Internet / Software Applications

Macromedia Flash MX 2004 ActionScript Programming Tutorial

Simple Actions

There are a few simple actions that, if you’ve used Flash at all, you’re probably already familiar with, and that you’ll find yourself using over and over again. We’ll begin with these actions in order to familiarize you with the basics of ActionScript programming and syntax.

The stop, play, gotoAndPlay, gotoAndStop, nextFrame, prevFrame, nextScene, and prevScene actions all control the flow of your movie by telling the Flash Player when to pause the play, when to resume, and where in the timeline to move and begin playing (or wait for a user response).

The stop action is used to force Flash to stop moving through the current timeline. This action is critical, since without it, the user never has a chance to interact with your movie—Flash won’t wait for an interaction.

This is best seen with a simple animation. Flash automatically plays an animation from start to finish—and then continues to loop through it again and again unless you tell it otherwise. You do this using the stop action, which you add to the keyframe where you want the animation to stop. Frequently, this action is added to both the first and last keyframes of the animation. In the first keyframe, the stop action tells the Flash Player not to start the animation automatically, and in the last keyframe, the stop action tells the Player to stop once the animation has finished (rather than looping back to the beginning).

To see how this works, you can create a simple motion tween on a single layer. Test the movie by pressing Ctrl+Enter (or Cmd+Enter for Mac users). The animation continues to play over and over again until you close the movie.

Now, let’s add a couple of stop actions to control this playback:

  1. On the timeline, create a new layer above your tween and name it “Actions”. It’s standard practice to keep code on a separate layer created just for that purpose.

  1. On the Actions layer, insert a keyframe at the same location as the second, or ending, keyframe on Layer 1 (for us, that’s Frame 5):

  1. Now, open the Actions panel (F9). Make sure the current selection displayed in the script navigator is the correct layer and frame (Actions: Frame 5). This location should also appear on the tab at the bottom of the Script pane.

  1. In the Actions toolbox on the left, click the Global Functions folder to open it. Then click the Timeline Control folder to see a list of actions related to the timeline.

Note:

If you can’t see the list boxes on the left side of the Actions panel, click the arrow button on the left side of the Script pane. If that doesn’t work, click and drag the left edge of the script pane to the right.

  1. In the Timeline Control folder, double-click the stop action to add it to the Script pane.

Flash inserts the code using the correct syntax:

This is the only code you need to stop the current animation. You could have just as easily typed it into the Script pane:

stop();

On the timeline, Flash inserts a small “a” into the keyframe, which tells you that an action appears on that frame:

Test the movie. When the animation reaches the end, it stops playing.

  1. Now, select the first keyframe (Frame 1) in the Actions layer.
  2. In the Actions panel, add another stop action.

  1. Test the movie. The animation never begins playing. With a stop action at the beginning of the animation, you’d need to add a button or some other means of allowing the user or system to begin playing the animation.

The counterpart to the stop action, the play action starts playback of the current timeline (whether that’s the main timeline or a movie clip timeline). Playback continues until another action stops or interrupts it:

  1. Add a button to Frame 1 of either Layer 1 or a new layer reserved for buttons. As you begin to create more complex movies, you’ll generally want to reserve a layer just for interface components.

If you don’t have a button at the ready, you can drag one to the stage from the common library: from the Window menu, select Other Panels, then Common Libraries, then Buttons. This opens Flash’s button library.

  1. With the button selected on the stage, add the on(release) event handler to the Actions panel: In the Actions toolbox, click the Global Functions folder to open it, then navigate to Movie Clip Control and double-click on:

Select release from the pop-up menu. Flash inserts the curly braces that enclose the event handler. All button actions need to appear in a button event handler. We describe event handlers in the next section.

  1. Position the cursor after the first (opening) curly brace and press Enter to create a new line.
  2. In the Actions toolbox, in the Global Functions folder, click the Timeline Control folder, and then double-click the play action:

  1. Save and test the movie. Click the play button to start playing the animation.

The gotoAndPlay and gotoAndStop actions tell Flash to move to a specified frame and either start or stop playback. The parameters of these actions are the target scene (optional) and target frame. For example:

gotoAndPlay(“Scene 1”, “driving”);

If you only specify one parameter, it’s interpreted as a frame. Frames can be specified as labels, numbers or expressions. For example, each of the three lines targets the same frame:

gotoAndPlay(“driving”);

gotoAndPlay(1);

gotoAndPlay(myAnimation); //where myAnimation is a variable that stores the frame label “driving”.

The nextFrame and prevFrame actions move playback to the next and previous frames on the timeline, respectively. Playback doesn’t automatically start when using these actions; rather, these actions include an implied stop action inside the target frames, so the timeline moves to the target frame and stops.

The nextScene and prevScene actions move playback to the next and previous scene, respectively.

All of these actions appear in the Timeline Control folder of the Actions toolbox. You can experiment with them by changing the play action in your button’s event handler to move to different locations in your animation’s timeline.