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
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


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
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

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