Lesson 3

Create Interactive Movie Clip Symbols

 

OBJECTIVE:

In this lesson, you will use ActionScript to make a movie clip draggable and change the properties of a movie clip based on user actions.

Sample Solution

Lesson:  Use ActionScript to make a movie clip symbol draggable

  1. Open fl9_3.fla from the Flash – Chapter 9 server folder, then save it as 'shapes' to your C9 Flash folder in your server folder
  2. Drag the playhead through the Timeline—this movie contains two frame labels, “start” and “play”, which are associated with two separate screens—the actions layer contains stop actions that correspond to each screen—all the shapes on the “play” screen are movie clip symbols
  3. Click frame 7 on the Timeline to display the play screen, click the black square in the Start Bin, then display the Actions panel
  4. Verify the square and the movie clip symbol are displayed in the lower left of the Script pane, and that Script Assist is active
  5. Click the 'Add a new item to the script' button, point to Global Functions, point to Movie Clip Control, then click 'on'
  6. Click the Release check box to deselect it, then click the Press check box to select it
  7. Click the 'Add a new item to the script' button, point to Global Functions, point to Movie Clip control, then click 'startDrag'
  8. Click the closing curly bracket in Line 3 to select it
  9. Click the 'Add a new item to the script' button, point to Global functions, point to Movie clip control, then click 'on'—the on (release) action is inserted after the closing curly bracket, indicating the start of a new action
  10. Click the 'Add a new item to the script' button, point to Global Functions, point to Movie Clip control, click 'stopDrag'
  11. Test the movie, click the Start button, then drag and drop the square around the screen
  12. Close the Flash Player window, then close the Actions panel
    [TIP:  To make the other two movie clip symbols draggable, you could select each symbol and then copy and paste between Script panes--the same ActionScript will work for all three symbols]

Summary:  You made a movie clip symbol draggable.

 

Lesson:  Create a conditional action

  1. Double-click the yellow square in the Drop Bin on the Stage to open the square movie clip, then drag the playhead along the movie clip Timeline—this movie clip symbol has two states; one with the square filled in, and one with just an outline—in the following stops, you’ll create a conditional statement that moves the movie clip to frame 2 when a user drops the square from the Start Bin onto the square in the Drop Bin
  2. Click Scene 1 to display the main Timeline
  3. Click the yellow square to select it, display the Properties panel, then click the Instance Name text box in the LABEL area
  4. Type 'targetSquare' for the instance name, then press Enter—you must name the square so it can be referenced in the ActionScript code
  5. Click the black square to select it, then display the Action panel
  6. Click the Script Assist button to turn this feature off—you need to turn off Script Assist in order to enter text into the Script pane
  7. Click the end of the StopDrag line in the Script pane (after the semicolon) in Line 5, press Enter to create a new line, then type the following ActionScript with no spaces:
    if(_droptarget==”/targetSquare”)
    This line creates a condition—if the square from the Start Bin is placed on top of the square in the Drop Bin, then perform the next set of actions in curly brackets
  8. Press Enter to create a new line, then type the following ActionScript:
    {_root.targetSquare.gotoAndPlay(2);}
    This line of ActionScript plays frame 2 of the targetSquare movie clip
    [TIP:  Use curly brackets at the beginning and end of the code]
  9. Click the Auto format button, test the movie, click the Start button, then drag and drop the black square from the Start Bin onto the yellow square—Flash plays the second frame of the targetSquare movie clip, which changes the square in the Drop Bin to just an outline
  10. Close the Flash Player window, then close the Actions panel

Summary:  You created a conditional ActionScript statement that plays a specified frame in a movie clip symbol when two movie clips collide.

 

Lesson:  Use ActionScript to change the properties of a movie clip symbol

  1. Click the black square in the Start  Bin, open the Properties panel, then name the instance of the movie clip symbol 'myBox'—you must name the square so you can reference it in ActionScript
  2. Display the Actions panel, verify that the black square is still selected and the myBox is displayed in the lower left of the Script pane
  3. Click the Script pane after the semicolon at the end of the gotoAndPlay code on Line 7, then press Enter to create a new line—line 8 is now blank and the line-closing curly bracket moves down one line
  4. On the blank line 8, which is before the line-closing curly bracket, type the following ActionScript:
    setProperty(“_root.myBox”,_visible, false);
  5. Click the Auto format button in the Script pane
  6. Test the movie, click the Start button, then drag and drop the square from the Start Bin onto the square in the Drop Bin—the black square becomes invisible
  7. Close the Flash Player window, save your work, then close shapes.fla

Summary:  You created an ActionScript statement that hides a movie clip symbol when a condition is met.