Lesson 4

Animate Buttons Using Movie Clip Symbols

 

Lesson:  Create an animated button by nesting an animation in the button’s Up state

  1. Verify that the dragonfly document is open, click Insert on the menu bar, then click New Symbol
  2. Type play in the Name text box, change the Type to Button, then click OK
  3. Click the Up frame on Layer 1, click the Text tool T on the Tools panel, then click the Text tool pointer in the center of the Stage
  4. Use the Properties panel to change the Character family to Veranda, the style to bold, the size to 24, and the color to black
    [Note:  If you see Dynamic Text or Input Text at the top of the Properties panel, click the list arrow next to the phrase you see and then select Static Text]
  5. Type PLAY
  6. Click the Selection tool on the Tools panel, drag the animated left wings movie clip symbol from the Library panel to the left of the word “PLAY,” then drag the animated right wings movie clip symbol from the Library panel to the right side of the word
  7. Click the Selection tool on the Tools panel, click the word PLAY on the Stage, click the Text (fill) color box on the Properties panel, position the Eyedropper pointer over a wing, then click
    [TIP:  When you move the Eyedropper pointer to the Stage, do not pass over any other clickable element in the Eyedropper pointer, the pointer changes to a shape other than the Eyedropper, go back and click the Text (fill) color box and try again—the text and the wings are now the same color]
  8. Insert a keyframe in the Hit frame of the button Timeline, select the Rectangle tool on the Tools panel, then draw a box around both sets of wings and the text
    [TIP:  Remember that the Hit state is invisible on the Stage, but defines the clickable area of a button]
  9. Click the Selection tool on the Tools panel
  10. Click Scene 1 at the top left of the workspace to return to the main Timeline

Summary:  You created a button symbol and placed an animation inside the Up state of the button symbol.

 

Lesson:  Place the animated button on the Stage

  1. Insert a new layer above the dragonfly layer, name it button, then click frame 1 on the button layer
  2. Drag the play button symbol from the Library panel underneath the right tree on the Stage
  3. Insert a new layer above the button layer, then name it actions
  4. Open the Actions panel, then click frame 1 on the actions layer
  5. Verify that the Script Assist button is selected and that action:1 is displayed at the lower left of the Actions panel Script pane
  6. Click Add a new item to the script button in the Script Assist window, point to Global Functions, point to Timeline Control, click stop, then collapse the Actions panel
  7. Click Control on the menu bar, then click Test Movie—the wings flutter on the animated button—notice that while the dragonfly’s wings also move, the dragonfly does not fly on the motion path, nor do the leaves on the trees  animate—this is because both the dragonfly’s motion and the leaves are dependent on the main Timeline, which is stopped on frame 1
  8. Close the Flash Player window

Summary:  You placed an animated button on the Stage and added a stop action.

 

Lesson:  Add a button action

  1. Click the Selection tool, then click the Play button on the Stage to select it
  2. Display the Actions panel, then verify that the play button symbol is displayed in the lower left of the Actions panel Script pane
  3. Click Add a new item to the script button in the Script Assist window, point to Global Functions, point to Movie Clip Control, then click on
  4. Click Add a new item to the script button point to Global Functions, point to Timeline Control, then click goto
  5. Change the Frame number to 2
  6. Click frame 30 on the actions layer, click Insert on the menu bar, point to Timeline, then click Blank Keyframe
  7. Click Add a new item to the script button the Script Assist  window, point to Global Functions, point to Timeline Control, click stop, then close the Actions panel
  8. Click Control on the menu bar, then click Test Movie—notice the dragonfly in the tree and the Play button are animated—this is because they are movie clips and use their Timelines, which  are independent of the main Timeline
  9. Click the Play button—notice that the movie plays to the end—the leaves on the trees animate and the dragonfly flies on the motion path, which are actions associated with the main Timeline
  10. Close the Flash Player window, save your work, close the movie, then exit Flash

Summary:  You added actions to the movie, creating interactivity.