Skills Review

Lesson:  Plan for complex movies and animations, and create an animated graphic symbol

  1. Start Flash, open fl8_4.fla from the Digital Design/Flash/Chapter 8 folder on the server
  2. Save it as FL_C8_SR_skillsdemo8 (your username) to your server folder
  3. Verify the frame rate is set to 12 fps

In this document you will create a movie that will display a clock (a movie clip) with a minute hand (a minute clip) and an hour hand (a movie clip) that are rapidly spinning.  The clock will be a button so that when the user clicks the clock it displays two wings (two movie clips) and flies around the screen.  All of the necessary graphic objects are available in the Library panel.  The movie currently has a background graphic (water and clouds) and a text title (Time Flies).

Sample Solution

 

Lesson:  Create movie clip symbols

  1. Create a new movie clip symbol named mc_minuteHand
  2. Verify you are in the edit window for the mc_minuteHand movie clip, then drag the g_minute hand graphic symbol to the Stage
  3. Click the Free Transform tool and verify the object is selected
  4. Change the view to 200%, then drag the transformation point (circle) of the object to the bottom of the object--this will set the pivot point for the object as it spins around
  5. Click frame 1, then create a motion tween
  6. Drag the end of the tween span in the Timeline back to frame 5
  7. Verify frame 5 is selected, then use the Properties panel to set the rotate value to 1 and the direction to clockwise
  8. Play the movie clip, then return to the main Timeline
  9. Create a new movie clip symbol named mc_hourHand
  10. Verify you are in the edit window for the mc_hourHand movie clip, then drag the g_hour hand graphic symbol to the Stage
  11. Change the view to 200%, then drag the transformation point (circle) to the bottom of the object, which is actually to the left
  12. Click frame 5, then insert a keyframe
  13. Click Modify on the menu bar, click Transform, click Scale and Rotate, set the rotate value to 30 degrees, then click OK
  14. Click frame 10, insert a keyframe, then set the rotate value to 30 degrees
  15. Repeat step 14 for frames 15, 20, 25, 30, 35, 40, 45, 50, 55, and 60
    [Hint:  Do not just copy and paste frames because the action of rotating the hand will not be copied and pasted to the new frames]
  16. Play the movie clip, then return to the main Timeline
  17. Create a new movie clip symbol named mc_clock
  18. Verify you are in the edit window for the mc_clock movie clip, renane Layer 1 clockFace, then drag the g_clock face graphic symbol to the Stage
  19. Add a new layer, name it hourhand, drag the mc_hourHand movie clip to the middle of the clock
  20. Add a new layer, name it minuteHand, drag the mc_minuteHand movie clip to the middle of the clock so that the bottoms of the objects overlap
  21. Add a new layer below the clockFace layer, name it wings, then drag the mc_left wings to the upper-left side of the clock
  22. Drag the mc_right wings to the upper-right side of the clock
  23. Use the Free Transform tool and the arrow keys to rotate the wings as needed to place the wings to your satisfaction
  24. Insert keyframes in frame 60 on all the layers, then return to the Timeline
  25. Add a layer, name it clock, insert a keyframe in frame 2 on the layer
  26. Drag the mc_clock movie clip symbol to the lower middle of the Stage

Lesson:  Animate the movie clip symbol

  1. Verify frame 2 on the clock layer is selected, then create a motion tween
  2. Select frame 60 on the clock layer, then drag the clock to the upper-left corner of the Stage
  3. Use the Selection tool to reshape the motion path to an arc
  4. Use the Subselection tool to display the Bezier handles and reshape the motion path to an S curve
  5. Use the Properties panel to resize the clock to approximately 1/4 of its original size

Lesson:  Animate buttons with movie clip symbols

  1. Display the mc_clock symbol in the edit window
  2. Select the clock and hands layers (not the wings layers)
    [Hint:  If the wings are selected, recheck to be sure you placed the wings on the wings layer and not one of the other layers]
  3. Click Edit on the menu bar, point to Timeline, click Copy Frames, then return to the main Timeline
  4. Create a new movie clip symbol with the name mc_clockButton
  5. Verify you are in the edit window for the mc_clockButton symbol, click frame 1, click Edit on the menu bar, point to Timeline, click Paste Frames, then return to the main Timeline
  6. Create a new button symbol with the name b_clockButton, then insert the mc_clockButton symbol into the Up state of the button
  7. Insert a keyframe in the Hit state of the button, return to the main Timeline, insert a new layer above the clock layer, then name it button
  8. click the Edit Multiple Frames icon at the bottom of the Timeline to display the contents of the first few frames
  9. Select frame 1 on the button layer, drag the button symbol to the Stage and place it directly on top of the clock
    [Hint:  Use the arrow keys to align the two clocks]
  10. Turn off the Edit Multiple Frames feature
  11. Remove frames 2-60 on the button layer
  12. Insert a new layer above the button layer, name it stopaction, then insert a stop action in frame 1
    [Hint:  Be sure Script Assist is selected]
  13. Add a goto action to the button on the Stage, and specify 2 as the frame to go to
    [Hint:  Be sure the button symbol is displayed in the lower left of the Actions panel Script pane]
  14. Test your movie
  15. Publish the movie
  16. Save your work
  17. Exit Flash
  18. Post the movie to the Hulk server