Understand Actionscript

ActionScript is Flash's native object-oriented scripting language used to program Flash movie playback and to control objects like buttons and other symbols. Writing scripts in Flash can be quite easy or quite complicated, depending on what it is you want to do. Flash's online "Introduction to ActionScript Tutorial" found under Help > Tutorials provides you with an excellent introduction to the finer points of scripting. For our purposes, we concentrate on the kind of scripts you'll need to write when building a basic Flash Web site.

If you've ever written JavaScript, you're familiar with the dot syntax style of scripting. Basically, dot syntax follows the style of object, a dot or period, and then an object's property or method, all in one string like this: object.property. Some even simpler examples might be: ball.red, cat.purr, music.play, noise.loud -- you get the picture.

Objects of the same type are grouped into classes. Classes share the same kind of methods (functions assigned to an object), and properties (attributes assigned to an object). Variables are identifying names that store data and information. And actions and/or statements are instructions written to control your movie, or objects playing in your movie.

TIP
For a detailed explanation of ActionScript, see Chapter 9, "Using the ActionScript Language," in Macromedia's "Using Flash MX" software manual.

provide instance names

One of the most important things to remember when scripting in Flash is to properly name your objects. Most scripting errors come from not being able to write to an object because you've got the name wrong, or worse yet, forgot to give an object an instance name in the first place. You can easily name your instance when you create it, that is, when you drag it from the Library and drop it on the Stage. Naming your instance right away in the Properties panel is a good habit to get into.

Work with Actionscript

The Actions and Reference panels, Normal and Expert Modes, and some simple naming conventions make it easy for you to write and use ActionScripts.

use the Actions Panel

In Flash, open the Actions panel by pressing F9 or choosing Window > Action. On the left pane are all the Actions you can add to your script, organized into sections and subsections. When you double-click a bit of script to add to your movie, it appears to the right in the script pane of the Actions panel, as shown in Figure 4-1.

Figure 4-1: The Actions panel in Normal Mode.

Depending upon what you have selected on the Stage, the Actions panel will display a different title. You can also navigate to other scripts in your movie by clicking the pop-up script navigator menu immediately under the Actions panel title bar.

Try Normal and Expert Modes

There's a View Options button at the far right of the Actions panel. It enables you to switch between Normal and Expert Modes. Normal Mode is very helpful for beginners, but even if you're expert at scripting, Normal Mode can save you a lot of typing as well. In Normal Mode, you can add or delete a line or a script by using the plus (+) and minus ( -- ) buttons at the top of the script pane. Then you can edit that script's parameters in the section above the script pane. This mode helps guide you in writing scripts correctly, but it's a bit cumbersome for editing your scripts directly.

Normal Mode is shown back in Figure 4-1. Figure 4-2 shows Expert Mode.

Figure 4-2: The Actions panel in Expert Mode.

After you get comfortable with ActionScript syntax, you can use the panel in Expert Mode (choose this setting from the drop-down menu at the top-right corner of the panel). This mode enables you edit ActionScripts directly as if you were using a text editor, but does not show you parameters. For this course, let's use the Actions panel in Normal Mode.

apply class suffixes

Whether you are scripting in Normal or Expert Mode, naming your files with an identifying suffix easily recognized by ActionScript helps you keep your instance names organized and makes your scripting easier. If you're scripting in Expert Mode and you type a filename with the proper extension, a Code Hint contextual menu pops up with suggested methods and properties for that class of object. Naming your buttons with a _btn suffix, your sounds with a _sound suffix, and your text objects with a _txt suffix greatly enhances your scripting capabilities as you work on more advanced interactivity. Here are a few examples so you can see how easy it is to identify what types of objects you have: start_btn, bach_sound, intro_txt, welcome_txt, home_btn, and beatles_sound.

use the Reference panel

The Reference panel is an invaluable resource. It enables you to look up scripts by their description, gives you examples of proper usage and syntax, and tells you all the parameters for scripts. You can access the Reference panel by clicking its book icon in the upper-right corner of the Action window, pressing Shift+F1, or by selecting Window > Reference.

Figure 4-3: The Reference panel.

You can also use the Reference panel as a source of contextual help for an individual bit of script by first selecting the script in the script panel, and then clicking the Reference button.

work with frame scripts

Frame scripts, as their name implies, are scripts that reside in and control frames. The simple frame scripts goto, stop, and play, are the ones you'll use to control your movie's playback. Of these frame scripts, stop is used most often, because your movie will continually loop without any stop actions in your frame scripts.

Not all frame scripts will be simple gotos or stops. The deeper you get into advanced interactivity, the more you'll find your scripts taking place in your Timeline and not on the Stage. This is important to note because Flash has a hierarchy in playback, and scripts in the Timeline will fire before scripts attached to objects on the Stage.

Scripts, like symbols, need to be placed in a keyframe. If you don't specify a keyframe when writing a script, the script automatically attaches itself to the last keyframe in your layer.

work with button scripts

When users click a button, they expect something to happen. What happens is completely determined by your button script. Buttons themselves have no powers of interactivity; they're merely a series of keyframes. However, when you create a button symbol, a number of actions unique to buttons alone become available.

The best way to begin to write a button script (or any script) is to think about the structure of your movie, and to plan accordingly. Sometimes it's helpful to write down, in plain English, what you want to happen in a series of steps. For example, in our earlier lesson we divided our movie into sections with frame labels. When planning out our interactivity, we could say:

1. In the Down frame of the Acme Interactive button, script to goto the start frame label.
   
2. In the Down frame of the About Us button, script to goto the about us frame label, and so on.

moving on

This lesson covered the basics of ActionScripts. In the assignment for this lesson, you'll add stop and goto scripts to the navigation bar you started in Lesson 3. When you've finished the assignment, don't forget to take the quiz just to check what you've learned.

Assignment: Work with Actionscripts

Open Lesson 4's Flash file FlashMX04.fla. Now add in some simple ActionScripts to stop and start the movie's playback.

1. First we need some Stop actions in our movie's playback at the end of each section. In the actions layer, click in the last frame of section start, frame 9, and add a blank keyframe.
   
2. With frame 9 still selected, press F9 or choose Window > Action to open the Action window. Notice that the window's title is Actions - Frame and below that, a pop-up window reads, "Actions for frame 9 of Layer Name actions." The name of this window changes depending on what you have selected, so it's a good idea to make sure you have the frame selected and not a button or other object on the Stage instead.
   
3. In the left column, click the icon next to Actions, and click the first subsection called Movie Control. Double-click the Stop action. The scripting stop(); appears in the right column. This simple scripting stops the playback of your movie at the frame where it appears -- frame 9 in this case.

In the Timeline, note a small a over your blank keyframe. This indicates that there is an ActionScript associated with this frame.

4. Add a stop action to the last frame of each of the sections by repeating Steps 1-3 for frames 19, 29, 39, and 49. The stop actions are shown in Figure 4-4.

Figure 4-4: Stop actions in keyframes of the Timeline.

5. Ensure that Control > Enable Simple Frame Actions is checked, and then click back into frame 1 and press Enter or Return to see your stop actions halt the movie's playback.
   
6. Now we need to script our buttons to jump to the appropriate frame label. Unlock the buttons layer and back on the Stage, select the button next to the Acme Interactive label.
   
7. Launch the Actions window if it's not already open. (Note that its title now reads Actions - button.) In the Actions window, select Actions > Movie Control, and click goto. The scripting gotoAndPlay(); appears in the right column, under on (release) {. on (release) is a prescripted button action that enables you to place a script that will fire when the user clicks down and releases the button.

Note the Go to and Play and Go to and Stop radio buttons. Make sure Go to and Play are selected.

8. Select Type > Frame Label.
   
9. Click the pop-up menu to the right of the Frame text field and you'll see that the frame labels we made earlier are listed. Choose "start". Your script should now look like this, also shown in Figure 4-5:

Figure 4-5: A gotoAndPlay script jumps the user to the "start" fame label when the button is released.

10. Click out of the Actions window and back onto the Stage. Select the button next to the About Us text label and repeat Steps 7-9. Choose about us from the frame label pop-up window.
    
11. Repeat the same process for the remaining three sections, assigning each button to goto its frame label.
    
12. Save your movie (Command+S or Ctrl+S).
    
13. Choose Control > Enable Simple Buttons and Control > Enable Simple Frame Actions, and then select Control > Play (or just press your Return or Enter key) to play your movie and test your buttons.
    

Quiz