How to Create an Interactive Timeline With Flash

Written by william harrel
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an Interactive Timeline With Flash
Use buttons and ActionScript to create interactivity. (page of a notebook image by Victor M. from

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.

Skill level:
Moderately Easy

Other People Are Reading

Things you need

  • Adobe Flash CS3 or later

Show MoreHide


    Pausing for User Interaction

  1. 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 dialogue box. Browse to the FLA file, select it, and then click the "Open" button.

  2. 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. 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 flyout menu. Right click the new keyframe and choose "Actions" from the flyout menu. This opens the Actions panel. Type the following script into the right pane of the Actions panel:


  4. 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

  1. 1

    Click new keyframe to select it. Click "Window" from the menu bar and choose "Common Libraries," then select "Buttons" from the flyout 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.

  2. 2

    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."

  3. 3

    Right click the keyframe on the Actions layer and choose "Actions" from the flyout menu.

  4. 4

    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, button 1);

    function button 1(event:MouseEvent):void { next Frame(); }

    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 "next Frame();" with "next Scene();" 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.)

  5. 5

    Test the movie. When you click the button, the movie should start playing again.

Tips and 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.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.