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 con­verted 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

 

Add User Control

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.

For example:

•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.

 

Stopping the Action

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:

1. Click the Code Snippet Icon to open the Code Snippets dialog box
   
   
   
2. Open the Timeline Navigation folder, And select 'Stop at this Frame'
   
   
   3. The Actions script window will open the following as shown in blue should appear.
   
   

 

4. Play the Movie        Choose Control > Test Movie > Test from the menu to play the movie. Your car should not move.

 

 

 

Adding a the Start Button

Buttons have four states: up, over, down, and hit.

 

The Four Button States
Up	The appearance of the button when the pointer is not over it.
Over	The appearance of the button when you place the pointer over it.
Down	The appearance of the button when you click on it.
Hit	Defines the area that will respond to a click of the mouse.

Create a New Layer

1. Choose Insert >Timeline > Layer from the menu to create a new layer above the active layer.
2. Rename this layer to Button

Take the Start Button from the Library

1. Move to the Library. If the Library panel is not open, choose Window > Library from the menu.
2. Click on the icon next to Start Button and drag the Start Button onto the Stage in a position similar to that shown above.

Edit the Symbol

1. Choose Edit > Edit Symbols from the menu to change to the Edit Symbols mode.

 

The Over Frame

1. Click in the Over Frame to select it.
2. Choose Insert > Keyframe from the menu.
3. Click on the Fill color box and select green.

The Down Frame

1. Click in the Down Frame to select it.
2. Choose Insert > Keyframe from the menu.
3. Click on the Fill color box and select brown.

The Hit Frame

1. Click in the Hit Frame to select it.
2. Choose Insert > Keyframe from the menu.

Return to the Scene

1. Choose Edit > Edit Document from the menu to change back to the Scene mode.

Test the Movie

1. Choose Control > Test Movie from the menu. The Test Movie window will open.
2. Move your mouse over the 'Button ' at the bottom of the scene, it should change its colour to green
3. Click your mouse on the 'Button" it should change its colour to brown.

Creating a Stop Button

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.

 

Adding the action to play the movie

1. Be sure you are on frame 1 and the 'Start Button' symbol is selected on the Stage. (click once on the start button)
   
   
2. Click the Code Snippet Icon to open the Code Snippets dialog box
   
   
   
3. Open the Timeline Navigation folder, And select 'Click to Go to Frame and Play'

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

Adding the action to STOP the movie

1. Be sure you are on frame 2 and the 'Stop Button' symbol is selected on the Stage. (click once on the stop button)
   
   
2. Click the Code Snippet Icon to open the Code Snippets dialog box
   
   
3. Open the Timeline Navigation folder, And select 'Click to Go to Frame and Stop'
   
   
4. The Actions script window will open code will be shown in blue
   
   
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 the very beginning frame 1, so replace the 5 with a 1

Adding the Action script to LOOP the movie

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)

gotoAndPlay(2);

4. Test your movie, it should now keep looping until the Stop button is clicked

Add Sound

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

SoundMixer.stopAll()

OR click the  blue +  then,  flash.media> SoundMixer>Methods> stopAll

7. test your movie

 

---

P. Stewart - October 4, 2014
Based on Macromedia 2003, Activity 9.1