logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Import Layered Bitmap Image Into Flash


In this FlashR CS5 tutorial we will create a candle flame animation. We will use a flame graphic that we created in a PhotoshopR tutorial. See the link at the bottom of the page. In the Photoshop tutorial, the flame graphic contains three transparent layers. One layer contains the flame shape, another layer contains the orange glow and a third layer contains a smaller white glow. By animating all three of these parts separately we can create a realistic animation.

Once we have created the animation, you will be able to use it in any Flash project. To keep the animation reusable for various candles, you may wish to omit adding the candle graphic.

  1. Start a new Flash CS5 project and set the Background Color to black or a dark color of your choice and the Frame Rate to 30.

  2. We will start by creating a new movie clip. From the Menubar, click Insert � New Symbol. Name the new movie clip "flameAni". This will take us to the edit mode for the new symbol.

    At this point, we have one layer on the Timeline. Rename this layer to "bg" and leave it empty.

    In preparation for using this animation in several Flash projects, let's create a folder in the Library to contain all the assets for this movie clip.

  3. Add a new folder to the Library and name it "candleFlame Assets". Now, drag the flameAni movie clip into this folder.

  4. This is optional. We will import a candle graphic into our project (File � Import to Stage). This will add a new layer to the Timeline containing the imported bitmap. Rename it "candle".

  5. As stated above, the flame image has three layers. When we click File � Import to Stage, Flash will automatically create three new layers for us. In the Import dialog box, use the Bitmap Image with Editable Layer Styles option for each layer.

    We now have five layers on the Timeline.

    flame_glow � the orange glow around the flame
    flame_shape � the basic shape of the flame
    back_glow � the white glow around the flame
    candle � the candle image
    bg � empty bg layer

  6. In the Library, drag the asset folders for the candle and flame bitmaps into the candleFlame Assets folder.

Because we used the Editable Layer Styles option when we imported the flame bitmat, Flash has already converted the imported flame layers into movie clips. We will use Frame 1 as our first candle flame position. Then we will transform the shape several times to build our tween animation.






Join us in the Flash forum.




Add Import+Layered+Bitmap+Image+Into+Flash to Twitter Add Import+Layered+Bitmap+Image+Into+Flash to Facebook Add Import+Layered+Bitmap+Image+Into+Flash to MySpace Add Import+Layered+Bitmap+Image+Into+Flash to Del.icio.us Digg Import+Layered+Bitmap+Image+Into+Flash Add Import+Layered+Bitmap+Image+Into+Flash to Yahoo My Web Add Import+Layered+Bitmap+Image+Into+Flash to Google Bookmarks Add Import+Layered+Bitmap+Image+Into+Flash to Stumbleupon Add Import+Layered+Bitmap+Image+Into+Flash to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Adding Glow Filter in Motion Project

Animation Behaviors in Motion Project

Importing Photoshop Images into Motion

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor