- Introducing the Tutorial
- Preparing the File
- Creating the Pages
- Adding the Directions
- Animating the Cursor
- Scripting the Interactivity
This chapter is from the book
This chapter is from the book
This chapter is from the book
Scripting the Interactivity
As you perfected the animation in the last step, you might have sensed that the piece is coming together. The only remaining problem is that the user has no control over the piece. The animation moves by too quickly for the user to read the dialog boxes at the bottom while also watching the animation show what is happening.
In this final step, you will add the scripts that give control to the user—a constant goal when creating learning media. For this section, there are two pieces you need to take care of:
You need to stop the animation on every "page" (major keyframe).
You need to give the user a means of telling Flash when to start playing again.
In the next section, you'll use simple scripting to accomplish both goals. If you're an instructor or trainer who's unfamiliar with programming or scripting, don't throw up your hands at the thought. You don't have to be intimidated by ActionScript, Flash's programming language, and you definitely don't have to be a programmer to use it. Even with a handful of simple scripts, you can create powerful interactivity. In this part, you are going to write two scripts—one three lines long and the other a single line long. But these simple scripts are sufficient to enable the interactive navigation needed for this project.
With frame 1 of the navigation layer selected, drag an instance of next_B from the interface folder in the library onto the stage, in the lower-right corner.
This is a button symbol that I have prepared for you in advance. Feel free to double-click it to look at how it was made. Notice that if you do double-click it there is a sound attached to the Down frame of the button timeline. This gives the button a satisfying click sound when the user clicks it.
In Flash, scripts can be added to different objects for different purposes. Button symbols respond to the user's mouse. When the button first appears, it is in the Up state. When the user rolls over it, the button's Over frame is displayed. When the user presses the button, its Down state appears. The fourth and final Hit state is invisible—it simply designates the area of the object that will respond to the user's cursor. Later in this lesson, you will add a script to a frame.
Unless you add a script to a button, it doesn't actually do anything. If you were to test the movie now (Control > Test Movie), the button would light up on rollover and make a pleasant clicking noise when clicked, but it would not cause anything to happen in the movie.
Select the button with the pointer tool, and click the Edit ActionScript for this Object button in the Property inspector.
Clicking this button opens the Actions panel. Use this panel to add scripts to frames and objects in your Flash movie.
TIP
Be certain that you have selected the button before opening the Actions panel. If the wrong object is selected, the script will appear in the wrong place. The title bar of the Actions panel should say "Actions – Button." If it says "Actions – Frame," you've selected the wrong thing. Click the button again.
Open the Options menu by clicking the options menu button in the upper-right corner of the dialog box. Choose Expert Mode from the menu.
You may not feel like an expert, but this mode allows you to type code directly in the editor. Normal mode is a GUI environment that is supposedly easier to use for nonprogrammers. However, you will internalize working with code better if you use expert mode.
In the main window of the Actions panel, enter the following code. on (release) { gotoAndPlay(_currentframe+1); }
Be sure to type it just as it appears above, including capitalization and punctuation, or it won't work.
Here's what the code means: The first line is the event handler and tells Flash what to do when the user initiates an event. In this case, that event is when the user releases the mouse over the object after clicking it. The brackets that follow indicate that everything in between the brackets should run when the event (the releasing after the click) occurs.
In this case, there is only one statement in the brackets: gotoAndPlay(_currentframe+1);. The first part, gotoAndPlay, is the action itself. It opens a set of parentheses that let you specify where your movie should go and what it should do when it gets there. You could enter a frame number, frame label, or an expression. In this case, we used an expression: _currentframe+1. That is, we're telling Flash to determine whatever frame the user is currently in, add one to that—effectively skipping to the next frame—and start playing again. The semicolon at the end of the line tells Flash that this is the end of this statement.
In all cases, no matter where in the movie the user is stopped, this little script will cause the movie to continue playing again. Since it doesn't matter where it is, you don't need separate keyframes for all of your Next buttons. That is the advantage of this script. Had you specified gotoAndPlay(2); where 2 refers to the frame number, you would need a separate Next button in a separate keyframe for each segment. By using _currentframe+1, you freed yourself from that constraint.
Select every keyframe in the navigation layer, and choose Insert > Clear Keyframe (Shift+F6).
The first and last keyframes alone should remain. The last keyframe in this layer should be a blank keyframe.
When this task is complete, no matter where the user is in the movie, she or he can restart it. Of course, so far nothing will cause it to stop in the first place.
In turn, select every existing keyframe in the frame actions layer (including the first and the last), and add the following script to each in the Actions panel.
stop();
You can copy and paste the text, if desired. Each time you add an action to a keyframe, a tiny "a" appears in the keyframe in the timeline to remind you that the action is there.
The purpose of this particular action should be self-explanatory. Every time the playhead reaches a keyframe with this action in it, it stops. This allows the user to read the dialog box and decide when to continue. The user presses the Next button and the animation starts up again, only to stop at the next keyframe.
Choose Control > Test Movie to view the finished product.
If necessary, you can return to the file and tweak it to improve the overall polish and flow.
Save your file.
Make sure you don't save over the original source file.
)
)
)
)
)
What You Have Learned
In this lesson, you have:
Set up a Flash computer simulation video (pages 116–126)
Used frame-by-frame and tweened animation (pages 127–132)
Added ActionScript to give control to the user (pages 133–137)