Graphics in Flash
Coding the Navigation
There series of little movie clips above the text will be used as buttons designed to give the user control of the slide show. If the user, for example, clicks on the thumbnail in the middle, the playback head will be sent to Frame 3 of the movie and remain on Frame 3 until the user clicks another button.
Although you can create a Button symbol for this purpose—and a lot of developers would—buttons are slowly falling out of vogue with the Flash community. The reason has more to do with manageability of the code than it has to do with buttons themselves. By having all the code in one place—in this case, a frame in the Actions layer—changes to the code can be made in a rather efficient manner. If a button doesn’t do what it is supposed to do, the developer doesn’t have to look in two places (code attached to a button and code on the Timeline) to isolate and correct the problem.
Movie clips can be used as buttons because event handlers such as onPress, onRelease, and onMouseUp can be attached to the movie clip instance. From there, the actions that will occur can be placed in a function. In this way, the action is confined strictly to that movie clip when the mouse button is pressed. The syntax will be in the following form:
instanceName.EventHandler = function(){
do_something;
}
- Select the first frame of the Actions layer and press the F( (PC) or Option+F9 (Mac) keys to open the Actions panel.
Open the Actions panel option menu and select Line Numbers from the drop-down list. This is another good habit to develop. Having the line numbers visible on the left side of the Script pane allows you to find the line in question if the Output panel informs you there is an error in your code. When this happens, it will always tell you the line number where the error was found.
- Click once in Line 1 of the Script pane and enter this:
stop();
This is actually more important than the code that will follow. When a movie plays, the playback kicks into gear and moves across the Timeline at the frame rate set in the Document Properties dialog box. This command stops the playback head on Frame 1.
- Press Enter (PC) or Return (Mac) twice and enter the following function:
Button01.onRelease = function(){
gotoAndStop(1);
}
As you can see, this code follows the syntax presented earlier. The do_something is replaced with a gotoAndStop(1); function. The number between the brackets is the parameter. In this case, it is the number of the frame the playback head is to go to when the mouse button is released.
In this movie, the Timeline is very short, and you can get away with using frame numbers. This is regarded by many developers as being a huge mistake. Using frame numbers “hard codes” the value into the function. By doing that, you essentially put yourself into a development box. If you have to add five frames between Frames 1 and 2, the buttons are now broken and you will have to go through the code searching for all references to Frames 2 to 5 in the code and change them. If the code is complex, you are in for a very long session.
The solution, in this case, is to use labels. Labels associate a frame with a name, not a number. If you do use labels, the first thing to do is to create a layer named Labels. The labels will now all be in one place and easily accessible. When you select a frame on the Timeline, the Property inspector will prompt you to add a frame label. Frame labels, by the way, can be added only to keyframes in the layer. Adding keyframes in the Label layer will have no effect upon the movie. You enter the label name into the Property inspector, and when you press Enter (PC) or Return (Mac) a little red gold flag with the name just entered will appear on the selected keyframe in the Labels layer.
To navigate to the label instead of a frame number, you simply enter the name of the label as the parameter in the gotoAndStop(); function. In the case of our movie, if we have a label over Frame 3 named “Fog” the code would be the following:
gotoAndStop(“Fog”);
Click the button when the movie is playing and the playhead goes to the label named “Fog”. Add five frames in front of it, and it will still go to “Fog” when the mouse button is released. Move the “Fog” label to another frame on the Timeline, and the playhead will go there when the mouse is released.
- Select the function in lines 3, 4, and 5 of the Script pane and press Ctrl+C (PC) or Cmd+C (Mac) to copy the code to the Clipboard.
One of the best lessons around digital media is: Let the software do the work. This code on the Clipboard will be the same for each of the buttons. The only change will be the frame number and button number in the instance name. Which is faster: entering the same code four more times or changing a frame number?
Press Enter (PC) or Return (Mac) twice and press Ctrl+V (PC) or Cmd+V (Mac). When the code is pasted into place. change the code to this:
Button02.onRelease= function(){
gotoAndStop(2);
}
Do this for the remaining three buttons. When you finish, click the Check Syntax button to make sure that there are no errors and close the Actions panel.
- Save and test the movie.
When you click a button, you will navigate to the frame associated with the button and see the picture and text in that frame.
This work is licensed under a Creative Commons License.
