g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

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.




Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



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


BellaOnline Editor