Flash animates movies in much the same way film creates the illusion of motion onscreen. In both cases, a static image is displayed in a frame. The image is then changed slightly in the next frame, and then again in the next, and so on. When the frames are played back in quick succession, our eyes and brains are fooled into believing that we are seeing motion, thanks to something known as persistence of vision.

In Flash, this change in images over frames is controlled on the Timeline, a panel in the Flash interface. The Timeline panel shows each of the frames in the movie — Flash movies can contain up to 16,000 frames. Flash Player runs through the frames in the movie at the movie's frame rate. In Flash CS4 Professional, the default frame rate is 20 frames per second, but this can be changed if needed. As Flash Player proceeds through the frames, a play head indicates the current frame.

You can add keyframes, which are special containers in which you can change the position, color, transparency, size, or any other property of objects on the Stage. You can use ActionScript to control the play head. By default, Flash Player loops all movies, so when it reaches the end of a movie, it automatically rewinds the movie and then begins playing it again.

You can use the stop() global method in ActionScript to prevent this behavior by simply adding the method to the keyframe on which you want to end the movie. A global method is one that is available throughout your ActionScript code and does not require you to instantiate or even specify an associated object.

You can use ActionScript to cause the play head to jump to a specific frame in a movie. Once there, the play head can either continue to play from that point or stop, depending on whether you are calling the gotoAndPlay() or gotoAndStop() global method.

Both methods take a single argument, which is the frame to which the play head should jump when the method is called. You can specify the frame using either its number or an arbitrary label. You can add the label in Flash by selecting the frame on the Timeline and then entering the label on the Properties panel. Only keyframes can be labeled. The label is referenced in the gotoAndPlay() and gotoAndStop() methods as a string, so it can contain special characters such as spaces without causing problems. However, as with everything else in ActionScript, the label is case-sensitive, so be sure to be consistent when labeling frames.

Often, going to a specific frame is used to provide navigation within a movie. You may have a navigation button that takes a user to a different section of a project or allows him or her to move forward or backward through a presentation. If you stop a movie at the end, you might provide a button on the last frame that returns to the beginning and replays the movie.

Providing navigation like this gives your users more control over their experience within your project. Instead of a passive viewing of the project, they can feel like they are controlling the action.

Go to a Specific Frame in a Movie

STOP A MOVIE WITH A MOTION TWEEN

• 
• 

  Note

  See the preceding section, "Stop a Movie," for details on creating motion tweens and adding stop actions.

ADD A BUTTON THAT REWINDS THE MOVIE AND PLAYS IT AGAIN

• 
• 
• 

  You can also press F6 on your keyboard to add a keyframe.

• 

  Note

  See Chapter 3 for details on creating buttons.

• 
• 
• 
• 
• 
• 
• 

  The movie plays. When it reaches the end of the animation, it stops, and the button appears.

• 

  The movie rewinds and plays again.

MovieClips, like all symbols, have their own Timeline. The Timeline looks exactly like the movie's. You can add layers to the clip's Timeline and animate objects on the Stage within the clip. What makes a MovieClip unique, however, is that its Timeline is independent from that of the movie. Therefore, if you stop a movie, any animation within a clip will continue to play. You must stop the clip directly to get its animation to stop.

Because the MovieClip's Timeline functions exactly like the movie's, you can add frames to the clip and, in turn, add ActionScript to those frames. Therefore, a MovieClip can contain its own set of ActionScript code, which will execute independently from the movie's code. Although it is not a best practice, it is legal to have variables of the same name exist in both the movie's code and a clip's code; as the two execute independently of one another, they will not be in conflict.

Keep in mind, however, that you can and almost certainly will have multiple instances of a single symbol on the Stage. Any code that is written on the Timeline of a clip will be executed by each instance of the clip, although each will execute independently of the others. Generally, you will want to add code to a clip's Timeline only when you need code that will execute for every instance of the clip; code that should more logically be associated with individual instances should be placed on the Timeline of the movie itself.

In order to add code to the Timeline of a MovieClip, you need to edit the symbol. You can either double-click an instance of the symbol to enter editing mode or right-click the symbol in the library and select Edit.

Add Code to a MovieClip's Timeline

• 

  Note

  See Chapter 3 for details on creating MovieClips.

  
• 

  Flash opens the symbol in editing mode.

• 
• 
• 

  Note

  See Chapter 1 for details on the Actions panel.

• 
• 
• 

  The movie plays, and the code from the MovieClip executes.

• 

Adding code directly to the Timeline of a MovieClip can be useful when you have code that needs to execute with every instance of the symbol. More often, however, you are likely to need to write code that will affect only a single instance. For example, if you wanted every instance of a MovieClip to rotate when it was clicked, you could add the necessary code to the clip itself; if instead you wanted only certain instances to rotate when clicked, you would write the needed code on the main Timeline, where you can specifically target individual instances.

Any property or method of the clip can be called from the Timeline by referencing the clip's instance name and then the property of method that you want to use, separated by a dot. For example, if you had an instance of a clip named mcBounce1 and you wanted to stop the clip from the main Timeline, you could write

mcBounce1.stop();

You can use this technique not only to control clips' Timelines by starting, stopping, or jumping to specific frames, but also to set the properties of clips, such as their position on the Stage or their size. If the clip is an instance of a custom class, you can use the same technique to set any properties or call any methods of the class.

var mcSquare1:MovieClip;

In Flash CS4 Professional, as with all prior versions of Flash, the Stage represents the area where you can draw and place objects to have them visible at runtime. ActionScript 3.0 also has a Stage class, which is a container for all the objects on the display list, or everything currently visible in Flash Player. Technically, the two are not implementations of the same thing, but for practical purposes, you can think of them in much the same light.

An instance of the Stage class, called stage, is automatically created when a movie loads in Flash Player. The instance contains several useful properties and methods that you can leverage in your code. For example, stage.stageWidth and stage.stageHeight can be used to determine the width and height of the Stage or to position other instances relative to that width and height. Therefore, an instance named mcSquare1 could be centered on the Stage by setting its x property to one half the width of the Stage and its y property to one half the height:

mcSquare1.x = stage.stageWidth/2;
mcSquare1.y = stage.stageHeight/2;

In the example shown here, a MovieClip will be placed in the center of the Stage, and then four more clips will be precisely placed relative to the first.

Work with the Stage in Code

PLACE INSTANCES ON THE STAGE

• 

  Note

  This example shows placing five instances.

• 

  Note

  This example uses the names mcSquare1 through mcSquare5.

POSITION THE INSTANCES ON THE STAGE USING CODE

• 
• 
• 
• 
• 
• 
• 
• 
• 

  The movie plays.

• 

btSpeedUp.addEventListener(MouseEvent.CLICK, speedUp);
btSlowDown.addEventListener(MouseEvent.CLICK, slowDown);
function speedUp(event:MouseEvent):void
{
                   stage.frameRate = stage.frameRate + 5;
}
function slowDown(event:MouseEvent):void
{                  stage.frameRate = stage.frameRate −5;

}

ActionScript classes can be placed into three broad categories. First, there are classes that can be created only visually with the drawing tools, such as SimpleButton. Second, there are classes that can be created only through code, such as Math, Date, and Array. Third are the classes that can be created either with the drawing tools or through code. The most common of this last class is MovieClip.

MovieClips that you plan to add through code can still be created using the drawing tools. The difference is that you will not place an instance of the clip on the Stage but will instead add it through code.

However, you must explicitly tell Flash that you plan to use the symbol in code. By default, instances of symbols that exist in the Flash library that do not have a corresponding instance on the Stage will not be exported to the published SWF. This is done to save file size in the SWF, as many designers will keep a lot of unused symbols in their library because they do not have to worry about those increasing the final sizes of their SWFs. This creates a problem when you are trying to add the clip through code because Flash will not know that it is supposed to include the symbol when it publishes the movie. The solution is to export the clip for ActionScript, which you do via the symbol's Properties dialog box. You can access the Properties dialog box from the Library panel. By default, the box shows only a few properties, but it contains an Advanced mode with other properties, including the setting to allow the symbol to be exported for ActionScript.

Add MovieClips to the Stage through Code

CREATE A MOVIECLIP

• 
• 
• 
• 
• 

  The Convert to Symbol dialog box appears.

  
• 
• 
• 

  The symbol is created and appears in the Library panel. An instance of the symbol is on the Stage.

REMOVE THE INSTANCE FROM THE STAGE

• 
• 

  The instance is deleted.

• 
• 

EXPORT THE MOVIECLIP FOR ACTIONSCRIPT

The Symbol Properties dialog box appears.

• 

  The dialog box expands.

• 
• 

  A dialog box appears, informing you that the classpath for the symbol will be generated.

• 

  The symbol will be exported and available to be used in code.

After a MovieClip has been exported for ActionScript, you can create instances of it in your code. You must first create it as an instance by giving it a name and using the new keyword to call its constructor.

Then you can add it to your movie by calling the addChild() method of the Stage class, passing as its argument the name of the instance. All objects that appear visually in your movie are part of the display list on the Stage. The display list tells Flash Player what objects should appear on the Stage and in what order. The addChild() method adds the instance to this display list as its last item.

The new symbol will be placed at the 0,0 coordinate on the Stage — the top-left corner. You can set the x and y coordinates of the instance to place it elsewhere on the Stage, just as you would a symbol that you drew on the Stage in Flash. Any other properties of the symbol can also be set as you would normally, and any of the symbol's methods can be called.

You must repeat these steps for each instance that you want to add, so you need to create the instance by naming it and calling its constructor and then call addChild() for each.

Creating the MovieClip by declaring the variable and using the new keyword to call the constructor is fundamentally the same process as dragging an instance of the symbol onto the Stage and then naming it in the Properties panel. Therefore, you should follow the same instance naming conventions for clips created through code as you would for those created visually: Begin with the mc prefix and then include the name of the symbol itself and an identifying number.

ADD THE MOVIECLIP THROUGH CODE

• 
• 
• 

SET THE MOVIECLIP'S POSITION AND ROTATION

• 
• 
• 

VIEW THE RESULTS

• 

  The movie plays.

• 

Just as MovieClips can be added to the Stage with addChild(), ActionScript provides a removeChild() method to remove objects programmatically. Like its counterpart, the method takes a single argument: the object to be removed. When called, the method removes the specified object from the display list.

However, removeChild() does not remove the object from memory, so you can redisplay it by simply calling addChild() again. If the object will not be needed anymore, it is a good idea to be sure to remove it from memory as well as the display list, which can be done by setting its value to null.

You should also get in the habit of removing any event listeners from the object that you may have added. Even if an object has been removed from memory, its event listeners can remain and continue to consume resources as they try unsuccessfully to respond to events. The code to completely remove a MovieClip with a mouse click event might look like this:

removeChild(mcStar1);
mcStar1.removeEventListener(MouseEvent.CLICK,
 clickHandler);
mcStar1 = null;

If you forget to remove objects from memory as well as the display list, your Flash movie may eventually end up with memory leaks or other potential errors.