How to Create an Interactive Timeline With Flash
Most designers use Adobe Flash to create interactive movies. You create movies in Flash on a Timeline consisting of layers and frames. An "interactive Timeline" allows your movie's users to click "hot spots," usually buttons, to navigate to other parts of the movie's Timeline, or to jump to external URL links to other Flash movies, Web pages, PDF files, and so on. Creating clickable buttons in Flash is a two-part process: placing and defining a button, or "button symbol," instance on the stage, and then writing a corresponding ActionScript to interact with the button.
Other People Are Reading
Instructions
-
Pausing for User Interaction
-
1
Open the Flash FLA movie you want to make interactive in Flash. Click "Open" on the menu bar and choose "Open" to display the Open dialog box. Browse to the FLA file, select it, and then click the "Open" button.
-
2
Go to the Timeline panel. Depending on your version of Flash, the Timeline panel is located either above or below the document window. Click the "New Layer" button---the first button in the lower-left corner of the Timeline panel---to create a new layer. Double-click the layer name to select the name text; rename the layer "Actions."
-
-
3
Go to the frame on the Actions layer where you want to place your button. Right-click the frame and choose "Insert Keyframe" from the fly-out menu. Right click the new keyframe and choose "Actions" from the fly-out menu. This opens the Actions panel. Type the following script into the right pane of the Actions panel:
stop();
-
4
Test the movie. Click "Control" on the menu bar and choose "Test Movie." The movie stops playing on the frame in which you inserted the script.
Creating and Defining Button Symbols
-
5
Click new keyframe to select it. Click "Window" from the menu bar and choose "Common Libraries," then select "Buttons" from the fly-out menu. This opens the Library - Buttons panel. Scroll through the list of folders and buttons to find a premade button to suit your design. As you select each button in the list, you can see it in the preview pane at the top of the panel.
-
6
Drag your button to the stage. Select the new button. Go to the Properties panel and type "button1" in the Instance Name field at the top of the panel. You can give buttons nearly any instance name you want, but you should use something simple and descriptive. Also, if you plan to use multiple buttons, using something like "button1" lets you create and easy-to-use naming scheme. Your next button, for example, would be "button2."
-
7
Right click the keyframe on the Actions layer and choose "Actions" from the fly-out menu.
-
8
Type (or copy and paste) the following script into the right pane of the Actions panel, below the "stop();" action you created earlier:
button1.addEventListener(MouseEvent.CLICK, button1);
function button1(event:MouseEvent):void {
nextFrame();
}This script tells Flash to jump to the next frame when the user clicks the button with the instance name "button1." This is a very simple script. What the button does when it is clicked is defined in the last line. Replace "nextFrame();" with "nextScene();" for example, to jump to the movie to the next scene. Use "gotoAndPlay("10");"to send the movie to frame "10" on the Timeline. (Replace the number in the parentheses with the desired frame.)
-
9
Test the movie. When you click the button, the movie should start playing again.
-
1
Tips & Warnings
To create multiple buttons, repeat this process again. (You don't, however, need a new layer for each button.) Give the next button a unique instance name, such as "button2." Copy and paste the script in the Actions panel to duplicate it. Replace all three occurrences of "button1" in the script with "button2."
All buttons and scripts must have unique instance names, and the corresponding instance names must match between the buttons and scripts. Otherwise, the interactivity won't work.
References
Resources
- Photo Credit page of a notebook image by Victor M. from Fotolia.com
