Printer Friendly Version

BellaOnline's Flash and Animation Editor

Animated Xmas Ornaments - Flash Storybook

We will continue to work on the first screen for the FlashR storybook application. We will import the graphics, the png files that we have created, for this screen.

Open your project fla file. You will have one layer (layer1) on the Timeline and one frame on this layer. We will import the png graphics into the first frame.

  1. From the menu, click File - Import - Import to Stage. Choose the background layer png file. Rename layer1 to "bgLayer". Lock this layer.

  2. Add a new layer to the Timeline and import the book cover png. Rename the layer to "cover". Lock this layer.

  3. Add a new layer and import the evergreen.png file. Rename the layer to "evergreen". Lock this layer.

  4. When Flash imported the pngs, it aligned the images to the upper left corner. We can use the Storyboard as our guide to reposition the design elements as needed.

We now have tree layers in the Timeline - each containing a design element. You will also see that the original pngs files are listed in the Flash Library panel. As we build our app, we will accumulate many png files. Let's create a new folder in the Flash Library (click the New Folder icon at the bottom of the Library panel) and name the folder "pngs". Drag the png files into this folder.

Our first step will be to reduce the size of the book cover and place it in the correct position.

  1. Unlock the cover layer and select the cover png graphic. Right click and choose Convert to Symbol.

  2. Set the type to Movie Clip and the Registration Point to Left Center.

  3. Name the movie clip "cover".

Using the Free Transform tool, click on the book cover on the stage. Hold down the Shift key on your keyboard and drag inward to make the cover smaller. Next, rotate the book until it is in the position indicated in the storyboard.

First Xmas Ornament Animation

Because we don't know when the user will click on the book to open it, we need the ornament's animation to repeat until the reader does click. That will cause the Timeline to move to the next frame. Therefore, the ornament animation will continue as long as the Timeline remains on Frame 1.

  1. From the menu, click Insert - New Symbol. In the dialog box, name the symbol "redOrn" and set the Type to Movie Clip.

  2. This will take you "inside" the red ornament movie clip. You are now in edit mode and you have a new Timeline with the default Layer 1. You will notice that everything on the stage is gone. This indicates that you are in the edit mode for the red ornament. This is also indicated by the links at the top which now show Scene 1 - redOrn.

  3. Rename Layer 1 to "redOrn".

Next →

Join us in the Digital Art and Design forum. | 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 © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor