Flash MX Image Animation Introduction (Preparing the Stage) Movie Property Definitions: Go to the Properties panel at the bottom of the window to choose the frame rate, width, height, and background color of the stage as shown below. Exercise (Animating Graphics) The Toolbar: If your toolbar is not on the desktop, go to Window on the menu bar and choose Tools. http://lab.dce.harvard.edu/53a 1
Inserting Frames: Click on frame 30 in layer 1 on the timeline. Go to the menu bar and choose Insert Frame. This will insert 30 frames into your movie timeline. Importing: Find an object that you would like to animate and place it on your desktop (e.g. snowflake.jpg). Choose File Import from the menu bar. The object will appear on the your stage and will be added to the Library. Creating Keyframes: Create keyframes in frame1 and frame 30 by highlighting the frames and choosing and Insert Keyframe from the menu bar. Motion Tweening: Motion Tweening allows you to animate the object on the stage. Click anywhere between the two keyframes that you have created. Go to Insert on the menu bar and choose Create Motion Tween. http://lab.dce.harvard.edu/53a 2
You ll see an arrow appear between the two keyframes. The arrow represents the motion tween and indicates that changes can take place between the two keyframes. Next, you ll define the changes. Motion Guide Layer: Click on the motion guide icon as shown in the screen shot below. This creates a motion guide layer for your animation. Motion guide layers are used to draw lines that you want an animated symbol to follow. Click on the first frame of the Motion Guide Layer to make sure that it is the active layer. http://lab.dce.harvard.edu/53a 3
(Click on the layer name, where it says "Guide: Layer 1"). Choose the pencil tool on the toolbar. Make sure pencil mode is set to "Ink" as shown below. http://lab.dce.harvard.edu/53a 4
Use the pencil tool to draw the line that you want your object to move along on the stage. http://lab.dce.harvard.edu/53a 5
Now adjust the frame pointer so it points to frame 1. Go to the menu bar and choose View Snap to Objects. Moving the Object Along a Path: Select the pointer tool on your toolbar. With the mouse, place the object so that its center is at the beginning of your motion guide. The center is indicated by a small + when selected. A black circle appears when the bird is attached to the motion guide. Release the mouse button when the object is snapped to the guide. Now adjust the frame pointer (the red bar on the timeline), so that it points at frame 30. Repeat the process by snapping the object at the end of the motion guide. http://lab.dce.harvard.edu/53a 6
The object will now follow the motion guide when you play the movie. Testing the Movie: You can see the changes that you ve effected by clicking on the frame pointer (the red bar on the timeline) and dragging it through the frames. http://lab.dce.harvard.edu/53a 7
Publishing the Movie: Go to the menu bar and choose File Publish Settings. Click on the HTML tab at the top of the dialogue box and change the settings to match the ones in the screen shot below. http://lab.dce.harvard.edu/53a 8
Click the Publish button and then hit OK. Flash creates three files when you publish the movie: a Flash file (.fla), a Shockwave file (.swf), and an HTML file (.html). Saving the Movie: Go to the menu bar and choose File Save As. Name your movie, save it to the desktop, and FTP the files into your public_html folder. Be sure to save the editable.fla file and don t put spaces in the filename. Congratulations on the creation of your Flash movie! http://lab.dce.harvard.edu/53a 9