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

Cooking for Kids
Women's Fashion
Small Office/Home Office

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Nested Movie Clips in Flash

  1. From the menu, click File - Import - Import to Stage. Choose the redOrn.png file. Flash will place the redOrn graphic on the layer.

  2. Right-click on the graphic and choose Convert to Symbol. Set the Type to Movie Clip and name the movie clip "redOrn2".

  3. In the Properties Panel, set the Instance Name to "redOrn2".

  4. Right-click on the new movie clip and choose Create Motion Tween from the menu, drag the end of the tween span to extend to 40 frames.

  5. Right-click on Frame 40 and choose Insert Keyframe - All from the menu. You will see a small black dot added to this frame indicating that it now contains a Keyframe. This will set the ornament in the same position as the first frame of the tween. Setting the first and last frame to be identical will result in a smooth transition when the animation repeats.

  6. Now we can begin to move the ornament. Right-click on Frames 10, 20 and 30 and add a Keyframe to each of these frames.

  7. Return to Frame 10 and click on the red ornament with the Free Transform tool. You will notice a small white circle on the ornament. This is the Transformation Point and works as a pivot point. We want the ornament's pivot point to be at the top of the ornament. Click on this small dot and drag it to the top of the ornament. Next, rotate the red ornament to the right.

  8. Move to Frame 30 and rotate the ornament to the left.

    Return to Scene 1 by clicking the link at the top.

  9. Add a new layer to the Timeline and name it "redOrn". With this redOrn layer selected, drag the redOrn movie clip from the Library and place it on the stage at the upper left corner (as indicated by the Storyboard). In the Properties panel, change the Instance Name from <Instance Name> to "redOrn". Lock this layer.

  10. Repeat the steps above for the other two ornaments, naming the movie clips greenOrn and purpleOrn respectively. For these smaller ornaments, set the tween span to 30 frames instead of 40. Because these ornaments are smaller, they will rebound back to the original position more quickly than the larger ornament. So we will shorten the tween span just a little to speed up the animation.

  11. At this point, you will have three layers above the evergreen layer called redOrn, greenOrn and purpleOrn. You should also have the corresponding ornament movie clip on each layer.

  12. Click Control - Test Movie - In AIR Debug Launcher (Desktop) and you should see something similar to this.

A little about Flash Keyframes: The Keyframe added to a frame on the Timeline works like a marker to tell Flash that it has to do something such as start playing an animation or running some ActionScript code.

← Back

Join us in the Digital Art and Design forum. | Join us in the Flash forum.

Add Nested+Movie+Clips+in+Flash to Twitter Add Nested+Movie+Clips+in+Flash to Facebook Add Nested+Movie+Clips+in+Flash to MySpace Add Nested+Movie+Clips+in+Flash to Del.icio.us Digg Nested+Movie+Clips+in+Flash Add Nested+Movie+Clips+in+Flash to Yahoo My Web Add Nested+Movie+Clips+in+Flash to Google Bookmarks Add Nested+Movie+Clips+in+Flash to Stumbleupon Add Nested+Movie+Clips+in+Flash 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
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor