Lesson 3

Create a Movie Clip Symbol

 

Lesson:  Create a movie clip symbol

  1. Open fl8_3.fla, save it as dragonfly, then change the frame rate to 10 fps
  2. Display the Library panel, then notice symbols—the Library panel contains the dfly body, left wings, and right wings graphic symbols, as well as the animated left wings movie clip symbol—these symbols will form the basis of your movie clip.
  3. Click the animated left wings movie clip symbol in the Library panel, then click the Play button→ in the Item Preview window—the wings appear to flutter—next, you will create another movie clip symbol to animate a set of right wings for the dragonfly
  4. Click Insert on the menu bar, then click New Symbol
  5. Type animated right wings in the Name text box, select Movie Clip for the type, then click OK to display the edit window
  6. Click frame 1 on Layer 1 on the Timeline, then drag the right wings graphic symbol from the Library panel to the center of the Stage so that the circle is over the centering cross-hair
  7. Display the Properties panel, click frame 1 on the Timeline, then click the wings
  8. Change the x and y coordinates to 0
  9. Click Insert on the menu bar, then click Motion Tween
  10. Click frame 5 on the Timeline, click the wings, then use the Properties panel to set the following values:  X: O, Y: O, W: 47, H: 57
  11. Click frame 10 on the timeline, click the wings, then use the Properties panel to set the following values:  X: O, Y: O, W: 84, H: 57
  12. Play the animation
  13. Click Scene 1 at the top left of the workspace to return to the main Timeline

Summary:  You created a movie clop symbol containing a  motion tween animation.

 

Lesson:  Nest movie clip symbols

  1. Click Insert on the menu bar, then click New Symbol
  2. Type animated dfly in the Name text box, verify Movie clip is selected for the type, then click OK
  3. Drag the dfly body graphic symbol from the Library panel to the center of the Stage
  4. Drag the animated left wings movie clip symbol from the Library panel to the Stage, then attach it to the upper-left side of the dragonfly’s body
  5. Drag the animated right wings movie clip symbol to the upper-right side of the body
  6. Click Scene 1 at the top left of the workspace to the main Timeline

Summary:  You nested two movie clips inside a new movie clip symbol.

 

Lesson:  Move the movie clip symbol to the Stage, rotate, and resize it

  1. Insert a new layer above the trees layer, then name it dragonfly
  2. Click frame 1 on the dragonfly layer, then drag the animated dfly movie clip symbol from the Library panel so it is on top of the left tree on the Stage
  3. Play the movie—because the dragonfly is an animated movie clip, the animation does not play on the Stage
  4. Test the movie to view the animation, then close the Flash Player window
  5. Verify the dragonfly graphic on the Stage is selected
  6. Click Modify on the menu bar, point to Transform, then click Scale and Rotate
  7. Type 180 for the Rotate value, then click OK
  8. Display the Properties panel, click frame 1 on the dragonfly layer, then click the dragonfly
  9. Change the width to 43 and the height to 32 in the Properties panel, then use the Selection tool to place the dragonfly so it is centered on the branches

Summary:  You added an instance of a movie clip symbol to the Stage, rotated it 180 degrees, and resized it.

 

Lesson:  Animate an instance of a movie clip and resize an object

  1. Click frame 1 on the dragonfly layer, click Insert on the menu bar, then click Motion Tween
  2. Click frame 10 on the dragonfly layer, then drag the dragonfly to the leaves on the small tree
  3. Click the Selection tool, point to the middle of the motion path, when the pointer changes too, drag the path down
  4. Click The Subselection tool, point to the left end of the motion path, when the pointer changes to an arrow with an unfilled square click to display the Bezier handles
  5. Point to the right-side handle, when he pointer changes to a delta symbol, drag the handle up to the top of the screen between the 2 trees
  6. Click the solid path with the Subselection pointer with a filled square, then move the path down slightly—notice the orange dots from the original path are on the reshaped path
  7. Click frame 1 on the dragonfly layer, then click Orient to path in the Properties panel
  8. Click the Free Transform tool, then rotate a corner handle to align the front of the dragonfly to the path
  9. Click frame 10 on the dragonfly layer, click the dragonfly, then resize the dragonfly to width 22 and height 16
  10. Drag the tween span on the dragonfly layer to frame 30, then insert keyframes in frame 30 on the other layers
  11. Test the movie, close the Flash Player window, then save your work

Summary:  You animated and resized an instance of a movie clip.