On a new layer, create a motion or shape tween from frames 1–24 and press Enter/Return to play back and preview the animation.

For more information on creating tweens, see Chapter 3 of this minibook.

Click the New Layer button below the Timeline to create a new layer and name it Actions. If necessary, drag the layer upwards so it's the topmost layer in the stack.

This dedicated layer is where you add ActionScript to control your new motion tween.

Add a keyframe on frame 24 of the new Actions layer with the F6 shortcut key.

Select the keyframe and choose Window

In the Actions panel, locate the Script Assist button and click it.

The top panel expands, and you're now working in Script Assist mode.

Add a stop method, which stops the Timeline of a movie clip (including the main Timeline).

Here's how:

Figure 7-2. The Actions panel view, showing a stop() action (top).

Take a look at your Timeline and you'll notice that a lowercase a now appears inside the keyframe, which indicates that ActionScript on the keyframe. These scripts run when the playhead passes that keyframe.

Choose Control

The animation plays until frame 24 and then stops.

On the Actions layer, select and create a new keyframe at frame 23.

Choose Window

Apply a gotoAndStop action on this frame to send the playhead to a specific frame and have it stop.

Here's how:

Choose Control

The tween plays and jumps to the first frame, where it stops.

Select and create a new keyframe at frame 22 on your Actions layer and launch your Actions panel.

Apply a gotoAndPlay action at frame 22 to create a loop between this frame and frame 5 of your movie.

Here's how:

Figure 7-3. The gotoAndPlay() action, placed in ActionScript 3.0.

Choose Control

The animation plays until frame 22 and loops between frames 5 and 22.

On a new layer in your document, create a new, solid shape on the stage that you want to use as a button and select the shape with the Selection tool.

Choose Modify

The Convert to Symbol dialog box appears.

Enter a name for your new button in the Name text box and choose Button from the Type drop-down list.

Click OK to create the button.

If it's not already open, edit your new button by double-clicking it on the stage or in the Library panel.

You should have some content on the Up state from when you created the button. Now you can define content for remaining states as well.

Select the Over frame on the button's Timeline and add a new keyframe with the F6 shortcut key.

Use the Selection tool, Property inspector, or additional drawing tools to modify the artwork on the Over frame (see Figure 7-4).

Figure 7-4. Modified content for the Over frame appears when the user rolls over the button.

Select the Down frame and insert a new keyframe with the F6 shortcut key.

Modify or add content to the Down frame.

This determines how the button appears when the user clicks and holds down the mouse button.

Select the Hit frame and create a new keyframe by pressing the F6 shortcut key.

Use the existing artwork that is copied to this keyframe, or one of the shape tools to fill this frame with a large, filled Hit area.

Exit the button by clicking Scene 1 above the stage.

Choose Control

Rollover and click your new button to see the different states in action.

Choose Window

Drag two more instances of your button symbol onto the same layer as your existing button instance.

If necessary, position the buttons so that they're spread apart from each other.

Select one of the button instances and choose Window

The Property inspector opens.

Choose Tint from the Style drop-down list in the Color Effect section.

Select a color and set the tint percentage to 100 percent.

The button becomes tinted with the chosen color.

Select a different button instance, choose the Transform tool from the Tools panel, and use the Transform tool to resize or rotate the selected button.

Create a new Flash document.

Add some basic animation to the Timeline by creating a symbol, placing it on a new layer, and creating a Motion tween.

Create a new button and drag it from the library to a new layer on the Timeline.

Select the button instance on the stage and in the Property inspector, enter a name (such as stop_btn) for the button instance in the text box to the right of the button icon (see Figure 7-5).

Figure 7-5. Assign a button instance a name with the Property inspector; ActionScript can't control the button without it.

Before you can control this button with ActionScript, assign it an instance name. You use this name from this point in your ActionScript to refer to and to control this specific button instance.

Create a new layer on the Timeline, and name it Actions.

Select the first keyframe of the new Actions layer and choose Window

In the upper-right corner, make sure the Script Assist button is turned off.

Click in the Script window and enter the following:

function stopAnim(evt:Event):void {
stop();
}

This code represents the event handler — the instructions that respond when the stop button is clicked. Just as described earlier in this chapter, you're using the same basic stop() action, but this time, it runs in response to the button click and not at any specific point when the movie plays back.

Here, the event handler is given the arbitrary stopAnim name, but it could be named just about anything. The function statement lets ActionScript know that all the code that follows is grouped under stopAnim.

A function is a group of related ActionScript statements. Just like how you can physically group together graphics on the stage, a function statement virtually groups together multiple lines of ActionScript code that need to run together for a common purpose.

Assign this new block of code to a specific button instance on the stage — in this case, the button you assigned an instance name to in Step 1.

Press Enter/Return a few times to move down a few lines under the code you just typed and enter the following line of code:

stop_btn.addEventListener("click",stopAnim);

This code assigns an event listener, which tells the button to wait for a click, and when clicked, to respond using the new stopAnim event handler you created. You'll notice that ActionScript can now refer to your button by its new instance name, stop_btn, and assign code directly to it this way.

Save your file.

Choose Control

Any animation in your movie comes to a halt.

Place a new button instance on the stage and select it.

Make sure it's selected by verifying that its options are displayed in the Property inspector.

At the top of the Property inspector, assign the new button an instance name by typing in the text box to the right of the button icon.

For example, we entered rewind_btn for the instance name.

Select the first keyframe of the Actions layer you created in the steps in the previous section; choose Window

Press the Enter/Return key to make a few lines of room underneath any code already in the Script window.

Type the following on a new line in the Script window:

function rewindAnim(evt:Event):void {
gotoAndStop(1);
}

This new event handler, rewindAnim, instructs the Timeline to return to the first frame and stop.

Below the new event handler code, make a new line and enter the following:

rewind_btn.addEventListener("click",rewindAnim);

An event listener has been assigned to the button instance you named rewind_btn, instructing it to run the code in rewindAnim when it's clicked.

Choose Control

Clicking the rewind button on the stage now forces the playhead to frame 1 and playback stops.

On an animation layer, select frame 1 of your current Timeline.

Enter a name for your frame label in the Name text box in the Label area of the Property inspector, as shown in Figure 7-6.

Figure 7-6. Assign any keyframe a label name with the Property inspector.

For example, we assigned this keyframe the label name of top.

Select frame 1 of your Actions layer and choose Window

If you haven't already, follow the steps in the previous section, "Using goto", to create the rewindAnim function (or event handler).

Locate the line that reads gotoAndStop(1). Replace 1 with the name of your new frame label in double quotes.

The code now reads

function rewindAnim(evt:Event):void {
gotoAndStop("top");
}

Choose Control

Click the rewind button and you'll see the animation jumps to the beginning just as it did earlier. This time, however, the code uses a frame label instead of an absolute frame number.

Now, no matter where you move the keyframe, the script follows automatically as long as the frame label remains the same.