Macromedia Studio 8 [Electronic resources] : Training from the Source

Adding Interactivity to Your Flash Movie

You've added some animations, but the movie still plays back regardless of user interaction. You need to make the movie stop on the second screen (Frame 47) and not advance to the third screen until the user clicks the Next button. Likewise, the movie should stop on the last frame and not loop back to the beginning unless the user clicks the Restart button.

Building interactions requires planning. One of the most basic steps is to outline the two fundamental parts of every interaction: events and behaviors.

Events refer to something that happens when a movie is playing. Events include clicking or rolling over a button, pressing a key on the keyboard, or the frame indicator reaching a given keyframe.

Behaviors refer to statements that instruct a movie to do something in response to a specified event.

For example, imagine you have a movie with a soundtrack playing. You want to give the user the option of turning off the music, so you create a button, which you label "Silence!". When the user clicks the button (the event), the soundtrack stops playing (the behavior).

Creating interactions typically requires graphic interface elementssuch as buttonsand ActionScript, which tells the movie what to do. Like other scripting languages, ActionScript follows its own rules of syntax, which is like grammar and punctuation that determine which characters and words are used to create meaning and in which order they can be written. ActionScript is a large and complex language and can take months or years to learn. However, you don't need an in-depth understanding of programming, or even have programming experience, to begin scripting. Flash makes it easy for even beginning programmers to add simple scripts to create an interactive movie.

In this task, you'll script actions that add interactivity to your Flash movie. Scripts, like any other element in Flash, must be added to keyframes or to objects within keyframes that accept ActionScript, such as buttons and movie clips.

This opens the Actions panel, usually below the stage.

[View full size image]

Type your scripts directly in the Script pane. The Actions toolbox provides a comprehensive list of all the language elements of Flash ActionScript, organized hierarchically.

stop();

[View full size image]

Notice that a small "a" appears in the timeline in the keyframe with the script. This is a visual cue that a script has been attached to the keyframe.

This script makes the movie stop playback in Frame 47. You need to make this movie stop at Frame 47 to allow the user to click the button to move to the next frame.

Earlier we claimed that every script in Flash had both events and behaviors. Here, stop(), which stops the movie in the current frame, is obviously a behavior, but you might be wondering what the event is that triggers it. In this case, although it's implied and unspecified, the event is onEnterFrame. In other words, the event for this script is "as soon as this frame becomes active."

The animations play through, but this time the movie stops on the second screen and you're stuck. The button doesn't work, so there's no way to go forward or backward.

When a user clicks this button, the current frame will jump to Frame 67, where the third screen is located. You'll implement this functionality using ActionScript. But for the ActionScript to work, it has to be able to identify the button instance. In other words, this movie has two button instancesone each in the second and third screens. Each button will do something different, and you'll have to write two short scripts to make them work. To identify each button, you'll give each button a unique identifier by giving it an instance name.

[View full size image]

When naming instances, it's a good practice to add certain suffixes to them to make them easier to identify in the code. In this case, you added the _btn suffix to the instance name, making it easier to identify in the script that this instance is a button. Not only is it easier for readers to see that it's a button, but it also tells Flash that it's a button. Using sanctioned suffixes activates code hinting and code completion in the Script pane. Throughout this book, you'll use proper suffixes for all instances so you'll remember them quickly.

next_btn.onRelease = function() {
gotoAndStop("screen3");
};

The first and last lines of the script identify the event: next_btn.onRelease. In plain English, this means, "When the user presses and then releases (clicks) the next_btn instance, ..." The word function() indicates that you're creating a custom behavior that's supposed to happen when the event is fired. Everything inside the curly braces {} is the behavior itself.

In this case, the behavior is that Flash should skip to the frame labeled "screen3," which is Frame 67. The gotoAndStop() action (or, to use proper programming terminology, method) is built into every Flash timeline. As its name implies, it tells Flash to skip to a certain frame. That frame is spelled out in the parentheses. When you provide additional information to a method, you put it inside the parentheses. Each piece of information you put in the parentheses is called a parameter.

Many, though not all, methods have parameters. For example, the stop() method you used earlier doesn't require parameters; Flash knows where it's supposed to stop, so no additional information is necessary. But the gotoAndStop() method can work only if Flash knows where it's supposed to go to and stop. Sometimes parameters are required, as is the frame parameter of the gotoAndStop() method; other times, parameters are optional.

[View full size image]

This time, click the button when you get to the second screen. When you click the button, you'll go to the third screen. Once again you're stuck, with no way of going backward or forward.

You're ready to set up the second button.

With this identifier, the button instance is made available to, or exposed to, ActionScript.

startOver_btn.onRelease = function() {
gotoAndPlay("screen1");
};

The Actions panel is empty, because the script you added earlier was attached to the keyframe in Frame 47. Now that you have a new keyframe active, no script appears in the panel.

As with the previous script you wrote, this one makes it so that when the user clicks the button instance (startOver_btn), the movie is sent to a different frame. In this case, you use gotoAndPlay() rather than gotoAndStop() because you want playback to commence when the movie is in the right frame.

[View full size image]

Functionally, the movie is complete at this point. When it first loads, it plays through the animation until it reaches the second screen, at which point it stops and waits for the user to click the Next button. When the user clicks this button, it advances to the third screen and stops again. If the user likes, she or he can click the Restart button and circle back to the beginning.