4. From the menu, click File - Import - Import to Stage. Choose the redOrn.png file. Flash will place the redOrn graphic on the layer.
   
   
5. Right-click on the graphic and choose Convert to Symbol. Set the Type to Movie Clip and name the movie clip "redOrn2".
   
   
6. In the Properties Panel, set the Instance Name to "redOrn2".
   
   
7. 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.
   
   
8. 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.
   
   
9. 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.
   
   
10. 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.
    
    
11. Move to Frame 30 and rotate the ornament to the left.
    
    Return to Scene 1 by clicking the link at the top.
    
    
12. 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.
    
    
13. 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.
    
    
14. 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.
    
    
15. 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

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.