Controlling Nested Timelines

I l @ ve RuBoard

One way to create complex interactions is to use one object to manipulate another. You can use a button to control a movie clip or a movie loaded via ActionScript, for example. The object that you want to manipulate is called the target . You point Flash to the target by identifying its target path (its address). In Chapter 13, you learned to control the Timeline by creating buttons with the stop and play actions. In that exercise, you didn't need to tell Flash the path to the Timeline you wanted to stop because there was only one Timelinethe one containing the button. By default, a button's event handler targets the Timeline that contains that button.

As you nest movie clips and buttons within other movie clips, you must tell Flash which of the nested Timelines you want to control. For this purpose, you'll want to learn two shorthand path names : _parent and _root . The _parent is the Timeline of the movie (or movie clip) containing the clip to which you are at aching the script, and the _root is the main Timeline containing all your movie's elements.

To control the main Timeline with a clipEvent handler:

1. Create a new Flash document with a layer named Contents that has keyframes in frames 1 through 5, and place identifying text in each keyframe.

   You can open a new copy of the ObjectActions template that you created in Chapter 13 as a basis for this document. Just be sure to remove the stop action from Keyframe 1 in the Actions layer.

2. In the Contents layer, in Keyframe 3, place a movie clip instance on the Stage.

3. Access the Actions-Movie Clip panel.

4. In the Actions Toolbox, choose Objects > Movie > _parent , and drag it to the Script pane (Figure 15.28).

   Figure 15.28. When you're using a clipEvent handler to control the Timeline of the movie (or movie clip) that contains the movie clip to which the clipEvent script is attached, select _parent .

   

   Flash updates the Script pane to read:

    onClipEvent (load) { _parent;  } 

   In the parameters area, _parent appears in the Expression field.

5. In the Expression field, place the insertion point after the letter t, and enter a period ( . ).

   If you have code hinting turned on in the ActionScripting tab of the Preferences dialog box, a menu of possible actions pops up in the parameters area (Figure 15.29).

   Figure 15.29. When code hinting is turned on, a pop-up menu of possible methods appears when you type the dot (the period character) that connects a method with a target object in ActionScript.

   

   Terminology: Object.Method

   In the script

    on (release) {     pongMC1.stop ();  } 

   you used a period to link a method ( stop() ) to a an object ( pongMC1 ).As you look at the script, that object.method syntax can seem pretty cryptic. Try thinking of the script as speaking with the immediacy of a 2-year-old who points at an object and makes a demand. Imagine a child who wants a snack and points to the cookie jar, saying, "Cookie, give," or who sees the family pet and says, "Kitty, come." The second line of this script is pointing to a movie clip and saying, "Hey, you, movie clip named pongMC1, stop playing!"

6. From the code-hints menu, choose stop , or enter stop (); manually in the field. Flash updates the script to look like Figure 15.30 .

   Figure 15.30. This script tells Flash to stop playback of the Timeline containing this movie clip as soon as the clip loads.

   

   You're ready to see the script in action.

7. Choose Control > Test Movie.

   When the playhead reaches Frame 3, the movie clip loads, and Flash carries out the instruction to stop playback of the parent Timeline (the Timeline containing the movie clip). The movie clip's Timeline is unaffected; the clip keeps playing.

Tips

• Try changing the clipEvent handler to unload . Now when you test the movie, the playback stops on Frame 4the frame in which the movie clip stops appearing.

• If you turned off code hinting in the Preferences dialog box, you can turn it on temporarily. In step 5, after entering the period in the Expressions field, from the Options menu in the top-right corner of the Actions-Movie Clip panel choose Show Code Hint. The pop-up menu of actions appears in the parameters area.

You can also use buttons nested in movie clips to control the main movie Timeline. To get a clearer picture of how _parent and _root work together, try creating a set of nested movie clips with buttons that control _parent and _root .

To create a set of basic buttons targeting _parent and _root :

1. Follow step 1 of the preceding exercise.

2. Add a new layer to the movie's Timeline, and name this layer Buttons.

3. In Frame 1 of the Buttons layer, place a button instance on the Stage.

4. With the button instance selected, in the Actions-Button panel, in the Actions Toolbox, double-click Actions > Movie Control > stop .

   Flash updates the script to look like Figure 15.31.

   Figure 15.31. The script for the selected button tells Flash to stop playback of the Timeline containing this button.

   

5. Place a second button instance on the Stage.

6. With that button instance selected, in the Actions-Button panel, in the Actions Toolbox, double-click the Objects > Movie > parent action.

   Flash adds it to the Script pane and displays the Expressions field in the parameters area.

7. Add . stop(); to the expression (see steps 5 and 6 of the preceding exercise for details).

   Flash updates the script to look like Figure 15.32.

   Figure 15.32. This script tells Flash to stop playback of the Timeline one level above the Timeline containing this button.

   

8. Repeat steps 5 through 7 for a third button instance; in step 6, choose root .

   Flash updates the script to look like Figure 15.33.

   Figure 15.33. This script tells Flash to stop playback of the main movie Timeline, no matter how many levels above this button it is.

   

9. Duplicate all three buttons and modify their scripts, substituting a play action for the stop action.

10. Create text boxes to label each button to remind you what action each one performs .

You can repeat this basic movie in a series of nested movie clips to see how each action works to target different Timelines.

To nest the movie clips:

1. Continuing with the file you created in the preceding exercise, choose Edit > Select All Frames (Figure 15.34); then choose Edit > Copy Frames.

   Figure 15.34. Choose Edit > Select All Frames to prepare to copy the set of buttons and animated text that you created.

   

2. Choose Insert New Symbol, name the symbol Granddaughter , give it movie clip behavior, and click OK.

   You enter symbol-editing mode.

3. In the Timeline, select Frame 1, and choose Edit > Paste Frames.

   Flash pastes all the frames that you copied from the main movie's Timeline into the symbol's Timeline. Now the symbol has a layer containing your button set and a layer containing five frames, each with identifying text. (If you used the ObjectActions template that you created in Chapter 13 as the basis for your file, you also have a layer for actions, but this layer should be blank.)

4. In the Contents layer, using the text tool, place the word Granddaughter near to the numbers that will count up with each frame.

5. In the Library window, select the Granddaughter symbol, and from the Options pop-up menu, choose Duplicate.

   The Duplicate Symbol dialog box appears.

6. Name the copy Daughter , and click OK.

7. In the Library window, double-click the Daughter symbol.

   You enter symbol-editing mode. The symbol already has five frames, with identifying text on one layer and a set of buttons on another layer.

8. In the Contents layer, select the word Granddaughter and change it to Daughter .

9. Add a new layer, name it Granddaughter Clip, select its Keyframe 1, and place a new instance of the Granddaughter symbol on the Stage (Figure 15.35).

   Figure 15.35. Place a copy of the Granddaughter clip in the Daughter symbol. Distribute the elements symmetrically around the registration point to make it easier to work with in movie-editing mode.

   

10. Return to movie-editing mode (by clicking the Back button, for example).

11. Repeat steps 5 through 9, this time naming the duplicate clip Mother (step 6), double-clicking the Mother symbol in the Library window to edit it (step 7), creating a Daughter layer and changing the text label to Mother (step 8), and placing an instance of Daughter on the Stage (step 9).

12. Return to movie-editing mode, add a new layer to the Timeline, and name it Mother Clip.

13. In Keyframe 1 of the Mother Clip layer, place an instance of Mother on the stage.

    You should see four sets of buttons: the original set created in the main movie Timeline and one set within each movie clip (Figure 15.36).

    Figure 15.36. Each button set here has its own Timeline. The set labeled Grandma is in the main Timeline, and the sets associated with Mother, Daughter, and Granddaughter are in nested movie-clip Timelines.

    

14. Choose Control > Test Movie.

    You see four sets of numbers counting from 1 to 5 repeatedly, plus all those button sets. Click the various buttons, and watch which set of numbers stops counting. Any of the _root buttons will stop the numbers of the main movie Timeline. But the stop and _parent buttons will act on different clips, depending on how deeply the button is nested.

In addition to targeting nested Timelines with _parent and _root , you can target a particular movie-clip instance by name. Targeting names allows you to control objects on the same Timeline, as well as objects that are nested above or below.

To control a movie clip with a button handler:

1. Create a new Flash document that contains a movie clip and two buttons in Keyframe 1.

   This example uses the Ping-Pong clip that you created in Chapter 11, plus two buttons that look like switches (Figure 15.37). In this exercise, the buttons and the movie clip reside in the same Timeline. You set one of the buttons to stop the action of the Ping-Pong game and the other to start it again. (Add text to identify the button functions, if you want.)

   Figure 15.37. You can assign stop and play actions that target a movie clip to buttons. This type of ActionScripting allows users to manipulate the movie clip during playback.

   

2. On the Stage, select the Ping-Pong movie clip.

3. Access the Property Inspector.

   You must use the Property Inspector to identify the movie clip as the target of your instruction.

4. In the Name field, enter a unique instance name.

   Do not include spaces or punctuation other than the underscore character in this name. Start the name with an underscore or a letter. For this exercise, enter PongMC1 (Figure 15.38).

   Figure 15.38. To make buttons identifiable to Flash as targets for actions, you must name the button instance in the Property Inspector.

   

5. On the Stage, select the button that will stop the action.

6. Access the Actions-Button panel.

7. From the Add menu, choose Objects > Movie > Movie Clip > Methods > stop .

   Flash updates the Script pane (Figure 15.39) and displays the Object field in the parameters area. You must tell Flash which object you want to affect.

   Figure 15.39. In Normal mode, when you add a stop method (from the Objects > Movie, > Movie Clip > Methods category) to the Script pane, Flash prompts you to fill in the path to the object that you are trying to stop.

   

8. To get assistance with entering the correct path to your target object, click the Insert Target Path button (Figure 15.40).

   Figure 15.40. In the set of icons above the Script pane, click the Insert Target Path button (top) to open a window that lists possible movie-clip targets (bottom). Click one of the movie-clip icons to enter its name in the path field. When you click OK, Flash enters the target path in the script.

   

9. In the Insert Target Path dialog box that appears, do the following:

   • In the hierarchical list of movie elements, click the icon for the movie clip you want to control.

   • In the Notation section, choose Dots. For Flash versions 5 and later, you should use dot syntax in writing the path name.

   • In the Mode section, choose Relative. Flash uses a relative path.

10. Click OK.

    Flash enters the path in the Object field and updates the Script pane (Figure 15.41).

    Figure 15.41. This script tells Flash to stop the movie-clip instance named pongMC1 when the button is clicked.

    

11. On the Stage, select the second button (the one that starts the action again), and repeat steps 6 through 10.

    This time, in step 7, choose play .

12. To see your buttons in action, choose Control > Test Movie.

    When you click the Stop button, Flash stops playback of the Ping-Pong clip. When you click the Start button, Flash resumes playback of the movie clip.

Tip

• In step 9, to use an absolute path, choose the Absolute radio button.

I l @ ve RuBoard