Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Adding Basic Scripts

In Chapter 1's project you created a button that stopped and played the SWF file. You used ActionScript to add some functionality to that button. ActionScript can be added to a SWF file to add all sorts of functionality, which you will learn about beginning in Chapter 6. In this project, you will add an action that controls the Timeline, instead of allowing the user to specify when the animation starts or stops. To do this, you add the stop action to the Timeline, instead of putting it within the button code. Then, you will create a button, much like in the project in Chapter 1, which plays the animation from frame 1 when the user clicks the button.

Exercise 6: Adding stop and a replay button

First, you add an action directly to the Timeline, and then you will create a button and add ActionScript to the Timeline that controls the button.

1. Select the top layer in the Timeline (which should be a layer called clouds), and click the Insert Layer button two times. Double-click the name of the first new layer, and type button. Double-click the name of the second layer, and type actions.

2. Open the Components panel (Window > Development panels > Components) and find the Button component, which is inside a folder called UI Components. Components are reusable assets (essentially movie clips) that designers and developers use to quickly add functionality to SWF files. You do not use many components during this book because you typically use your own graphics that are created in Flash or imported from other graphics programs.

3. Drag the Button component from the Components panel onto the button layer. Position it in the lower-right corner of the Stage, as shown in Figure 2.21. The button should span across all 40 frames because empty frames were added automatically when you inserted the new layer in step 1.

4. Open the Property inspector (Window > Properties) and select the Parameters tab. There are several options available in a list, which are used to control the appearance and functionality of the component. Select the text Button (next to the label heading) and delete it. Type replay.

5. Still in the Property inspector, type the following into the <Instance Name> text field: replay_btn.

6. Select the bird-body movie clip and type the following into the <Instance Name> text field in the Property inspector: bird_mc. Because the movie clip has an instance name, you can control it by using ActionScript.

7. Select the keyframe on frame 1 of the actions layer and open the Actions panel (Window > Development panels > Actions). Enter the following ActionScript:

replay_btn.onRelease = function(){
gotoAndPlay(1);
bird_mc.gotoAndPlay(1);
};

This code sends the playhead back to frame 1 and plays the animation again. Essentially, it says the following: "When the user clicks and releases the replay button, go to frame 1 of the main Timeline and play it. Also play the bird_mc movie clip's Timeline from frame 1."

8. Create a keyframe on frame 40 of the actions layer by selecting the frame and then select Insert > Timeline > Keyframe (or press F6). Open the Actions panel again, and enter the following line of code:

stop();

This ActionScript stops the animation at the end: frame 40. The user must determine whether it is replayed from frame 1 by clicking the button.

9. Double-click the bird-body instance and select the top layer. Click the Insert Layer button on the Timeline to create a new layer. Rename this layer actions.

10. Create a keyframe on frame 40 of the actions layer by selecting the frame and then selecting Insert > Timeline > Keyframe (or press F6). Open the Actions panel again, and enter the following line of code:

stop();

This ActionScript stops the animation inside the bird-body movie clip at frame 40. Therefore, the movie clip also stops at the end of the animation until the user clicks the replay button.

11. Finally, select Control > Test Movie to test the SWF file's animation. Click the replay button after the animation stops at the end. When you do so, the animation plays again and stops at frame 40 until you click the button. If you click the button during the animation, it returns to frame 1 and plays the animation from the start. Save the changes you have made to the document (File > Save).