g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

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.

Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to Twitter Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to Facebook Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to MySpace Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to Del.icio.us Digg Animated+Xmas+Ornaments+%2D+Flash+Storybook Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to Yahoo My Web Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to Google Bookmarks Add Animated+Xmas+Ornaments+%2D+Flash+Storybook to Stumbleupon Add Animated+Xmas+Ornaments+%2D+Flash+Storybook 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Animation Software Terms

Why Hype 3.5 and Pro

Tumult Hype and Pro Intro

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor