Import Layered Bitmap Image Into Flash

In this Flash^R CS5 tutorial we will create a candle flame animation. We will use a flame graphic that we created in a Photoshop^R 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.

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.
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.
Add a new folder to the Library and name it "candleFlame Assets". Now, drag the flameAni movie clip into this folder.
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".
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
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.

	Diane Cipollo BellaOnline's Flash and Animation Editor