This activity walks you step by step through the process of creating a simple Flash animation. You will use many basic Flash techniques, including drawing tools, motion and shape tweens, button symbols, and basic ActionScript to provide user controls. You will also import a sound file to provide a musical soundtrack while the movie plays. After you have tested your movie, you will publish it for playback by others, either through a browser or directly with the Flash player.
Draw the Right Eye
1. Start Flash, and choose File > New to open a blank new document. The new document contains one layer and one empty keyframe.
2. Select the Oval tool and draw a small circle to represent the right eye on a face.
3. Select the Arrow Selection tool and double-click the circle to select it both the fill & stroke.
4. To change the outline color of the eye, click the Stroke color box in the Property inspector and select a new color.
To change the fill color, use the Fill color box.
You choose the colours you would like.
5. In the Timeline, double-click the layer name, Layer 1.
This selects the layer name so that you can rename it.
6. Rename the layer Right Eye and press Enter (Windows) or Return (Macintosh).
Save the Eye Graphic as a Symbol in the Library
Instead of creating two eyes separately, convert the right eye from a shape to a graphic symbol. This adds the eye to the library so you can use it over and over. This will also reduce the size of your finished movie.
7. In the Right Eye layer, click frame 1 to select it.
This automatically selects the contents of frame 1.
Note: If the right eye is not completely selected, double-click the eye on the Stage with the Arrow Selection tool to select it.
8. Choose Modify > Convert to Symbol.
The Convert to Symbol dialog box opens.
9. In the dialog box, name the symbol eye,
select Graphic as the type, and click OK.
The eye on the Stage is now just an instance (copy) of the master eye symbol, which is stored in the library. The eye now has a single blue selection border and can be selected with a single click.
10. Choose Window > Library to see that your symbol has been added to the Library panel.
Note: You must select the eye symbol in the library to see the graphic in the preview window, as shown in the following illustration.
You can now reuse the eye symbol as many times as you want without redrawing it.
Reuse the Eye Symbol to Create the Left Eye
11. Click the Insert Layer button in the lower left corner of the Timeline to insert a new layer.
12. Double-click the layer name and change the name to Left Eye.
13. In the Left Eye layer, select frame 1.
14. Select the eye symbol in the Library panel and drag the symbol onto the Stage.
You now have a second instance of the eye on the Stage. Using instances from the library keeps the file size of your movie smaller than copying and pasting. Smaller movies load faster in a browser.
Draw the Nose
15. Insert a new layer and name it Nose.
16. Select frame 1 in the Nose layer.
17. Select the Line tool and draw two lines that form an angle to represent a nose.
18. To adjust the angle after you have drawn it, use the Subselection tool (white arrow) to drag one end of the line. (You might try dragging one end of a line with the Arrow Selection tool to see the difference between the two tools.)
Add Frames to Make a Three-second Movie
A Flash movie typically plays 12 frames per second. To keep the nose on the Stage for 3 seconds,
for example, you need to insert frames in the nose layer up to frame 36.
19. Select frame 36 in the Nose layer and choose Insert > Timeline > Frame.
Flash inserts frames through frame 36. Observe that the playhead (the red rectangle at the top of the Timeline) is on frame 36 and that the nose is visible, but the eyes have disappeared. At the bottom of the Timeline, you can see that this movie is currently 36 frames, is set to play at 12 frames per second, and will play for 2.9 seconds.
Note: The keyboard shortcut for inserting a frame is F5.
20. Drag the playhead to various frames. The nose remains visible in frames 1 through 36, but the eyes appear only in frame 1.
21. To see your movie, drag the playhead to frame 1, then choose Control > Play.
At this point, not much is happening beyond frame 1.
Draw the Mouth
22. Insert a new layer and name it Mouth.
23. Select frame 1 of the Mouth layer.
24. Draw a mouth in frame 1:
. •Use the Line tool to draw a straight line.
. •Select the Arrow Selection tool and click on the Stage away from the line to deselect it.
•Move the pointer toward the middle of the line. When a curve appears next to the pointer, drag the middle of the line downward to create a smile.
. • When you release the mouse button, only the smile remains.
Animate the Facial Features
Use Motion Tweens to Animate the Eyes
Because you created the eyes using a graphic symbol, you can animate them using a motion tween. To create the motion tween you need a start keyframe and an end keyframe containing the same symbol. You can then use a motion tween to fill the frames between the keyframes.
1. In the Right Eye layer, select frame 36 and choose Insert > Timeline > Keyframe.
This will be the end keyframe.
OR you can right click on the frame and choose Insert Keyframe
A keyframe signals Flash that some animation action begins or ends at that frame.
2. In the Right Eye layer, select frame 36 and drag the right eye a short distance.
3. Select any frame between frames 1 and 36 in the Right Eye layer.
4. Right Click, choose Create Classic Tween to create a motion tween.
Note: You can also choose Insert > Classic Tween
Notice the frames containing the motion tween are now light blue and contain a solid arrow running from the start frame to the end frame.
5. Position the playhead on frame 1 and choose Control > Play to play your movie and see
the effect of the motion tween.
The right eye gradually moves from its original position in frame 1 to the new position in frame 36. Notice that only the right eye moves.
Note: If you want to change the motion, move only the symbol in keyframe 36.
LEFT Eye animation
6. Select frame 36 in the Left Eye layer and insert a keyframe.
7. Move the left eye the same distance as the right eye, and then create a motion tween
between the first and last frames in the Left Eye layer.
Use a Shape Tween to Animate the Mouth
Because you created the mouth using one of the drawing tools (the Line tool) and have not converted the mouth to a symbol; it is still a shape.
You can use a shape tween to animate the mouth.
8. Select frame 36 in the Mouth layer and insert a keyframe.
Note: You can also right-click in frame 36 and choose Insert Keyframe.
9. With the Arrow Selection tool, click on the Stage away from the mouth line to deselect it. Then drag the mouth line into a bigger smile.
10. To create a shape tween between the first and last frames in the Mouth layer, click a frame between frames 1 and 36,
Right Click, choose Create Shape Tween to create a motion tween.
OR use the menus Insert > Shape Tween
Notice the frames containing the shape tween are now light green and contain a solid arrow running from the start frame to the end frame.
Note: Shape tweens are light green
Motion tweens are light blue
11. Choose File > Save.
12. Choose Control > Test Movie to see it play.
Choosing Control > Test Movie exports a SWF file and plays it in a preview window. When the movie reaches the last frame, it loops back to frame 1 and plays again.
13. Create any additional animated facial features as you choose.
14. Choose File > Close to close the preview window.
Note: Be sure you save your animation before adding user controls
In Flash you can use ActionScript to enable the viewer to control a movie. You use frame actions to tell the movie what to do when it reaches a specific frame. You use object actions to associate the control with an object such as a button symbol. Object actions, such as button actions, let you give your visitors more control over your movie.
•You can attach a stop action to the first frame of your movie so the movie will not play past frame 1 until the viewer makes that happen.
•You can add a Start button in the first frame of your movie and attach a goto action so the movie will resume playing when the viewer clicks the Start button.
•When the viewer clicks the Start button, you can replace it with a Stop button. If you attach a stop action to the Stop button, the movie will stop when the viewer clicks the button.
If you published your movie now, the car would start moving as soon as the viewer entered the screen. You want the viewer to click on a button to make the car move. In this exercise you will add some script to stop any action before the viewer clicks a button. Later, you will add a button for the viewer to click on to start the action.
Stop the Action
To stop the action:
4. Play the Movie Choose Control > Test Movie > Test from the menu to play the movie. Your car should not move.
Buttons have four states: up, over, down, and hit.
The Four Button States
The appearance of the button when the pointer is not over it.
The appearance of the button when you place the pointer over it.
The appearance of the button when you click on it.
Defines the area that will respond to a click of the mouse.
Create a New Layer
Take the Start Button from the Library
Edit the Symbol
The Over Frame
The Down Frame
The Hit Frame
Return to the Scene
1. Choose Edit > Edit Document from the menu to change back to the Scene mode.
Test the Movie
You could repeat the steps you used to create the Start button, or you can simply duplicate and then modify the Start button.
1. Choose Window > Library to open the Library panel, if necessary.
2. Select the Start button symbol in the library.
3. Select Duplicate from the Library panel Options menu (in the upper right corner of the panel).
or right-click on the start button in the library and select Duplicate from the menu.
The Duplicate Symbol dialog box opens.
4. The Button type is already selected. Name the new symbol Stop and click OK.
5. In the Library panel, double-click the icon for the Stop symbol to edit the symbol.
6. Select frame 1, the UP frame, of the text layer, and use the Text tool to edit the text to read Stop.
7. Click Scene 1 or choose Edit > Edit document to exit symbol-editing mode.
8. Select frame 1 in the Buttons layer.
9. Choose Window > Library to open the library, if necessary.
10. Drag the Start button from the library onto the Stage.
11. Select frame 2 in the Buttons layer and insert a keyframe.
12. Delete the Start button from frame 2.
13. Drag the Stop button onto the Stage.
14. Click the Onion Skin button at the bottom of the Stage.
With onion skinning turned on you can view a range of frames. This will help you align the Start and Stop buttons.
15. Move the Start and Stop buttons so both of them are in the same position on the Stage.
Note: To fine-tune the position of the buttons, select a button and use the up, down, left, and right arrow keys.
16. Turn off onion skinning.
4. The Actions script window will open the following, as shown in blue, should appear.
5. Notice the instruction indicate to 'Replace the number 5 with the number you would like the playhead to move to.....
6. We wish to move the playhead to frame 2, so replace the 5 with a 2
The movie only plays once, we want it to keep looping until the stop button is pressed.
1. Click on the last frame of the Actions layer, and insert a key frame.
2. Open the Actions panel, Window menu > Actions
3.Type the following code EXACTLY as shown (upper & lowercase & spacing must be the same)
4. Test your movie, it should now keep looping until the Stop button is clicked
1. find a sound file and save it to your computer
2. Insert a new layer and name it Sound.
3. Choose File > Import to Library. The Import to Library dialog box opens.
3. Locate and select a sound file saved on your computer.
Click Open. The sound is added to the library.
Note: You can download free music loops and sound effect clips at www.flashkit.com, for example.
4. Select frame 2 in the Sound layer and insert a keyframe.
5. Open the library and drag the sound file from the library onto the Stage. Flash inserts the sound in the Sound layer, starting in frame 2.
6.To stop the sound when the viewer clicks the Stop button:
. •Select frame 1 in the Sounds layer.
. •Open the Actions panel (Windows > Actions), Type the following code Exactly as shown
7. test your movie
OR click the blue + then, flash.media> SoundMixer>Methods> stopAll
P. Stewart -
October 4, 2014
Based on Macromedia 2003, Activity 9.1