building a slideshow with flash

Timeline in Action Script

In Three (or Four) Easy Steps

In this tutorial, you'll learn how to make a simple timeline in ActionScript 2.0 -- a line with a series of buttons labeled with numerical dates that you roll over to reveal text.

Make the Base Layer
1. Open a new Flash file, make it 600 x 400 pixels, with a white background, and make sure the Library and Info windows are open. Name this new file "Line".

  1. Choose Insert > New Symbol, name it "timeline" and choose "Graphic" as the symbol type. Click OK.

  2. Select the rectangle tool and draw a red (stroke and fill) rectangle 600 pixels wide and 10 pixels high. (Just slap a rectangle on the screen, then choose the arrow tool, click on the rectangle twice to select the fill and stroke, then size it in the Info box.)

  3. Choose the text tool, change fill and stroke to black, and type these four dates across the bottom of the line: 1700, 1900, 1915, 1995. Space them equidistant from each other.

  4. Go back into Scene 1, drag the "timeline" symbol onto the Stage, center it, and name its layer "line".

Make the Buttons
6. Now, choose Insert > New Symbol. Name it "yelbutton" and choose "Button" as the symbol type. Click OK. In Layer 1 of the Flash Timeline, the "Up", "Over", "Down", and"Hit" frames appear.

  1. In the toolbar, change the fill color to a yellow, and using the circle tool, draw a circle. (Just slap a circle on the screen, then choose the arrow tool, click on the circle twice to select the fill and stroke, then size it to be 20 pixels in diameter in the info box.)

  2. Then, insert keyframes in "Over", "Down", "Hit" - the easiest way is to drag the mouse or shift-click across all three to select them, then hold the mouse down until a menu appears and choose Convert to Keyframes. Or, select all three frames and choose Modify > Timeline > Convert to Keyframes. The circle is repeated in all the keyframes.

Put the Buttons on the Line
9. Above the Stage, click on Scene 1 to leave symbol-editing mode.

  1. Add five more layers, and name them "1700", "1900", "1915","1995", and "actions".

  2. Highlight the "line" layer. Drag the yellow button symbol from the Library onto the Stage, and, above "1700", put it on top of the red line.

  3. Repeat three more times, putting a yellow marker over each date.

Tell the First Button What to Do
13. Select the "line" layer. Click on the red scrubber bar that's sitting over Frame 1. Then go to the Stage and select the 1700 button. A blue square will appear around the button. In the Properties Inspector, name the instance of that button "my1700_btn".

  1. From the Window menu, open the Actions menu. At the top of the window, you should see "Actions for my1700_btn (yelbutton)". This means that you're going to assign some actions to the 1700 instance of the symbol yelbutton.

  2. Then go to Actions > Movie Control and double-click "on". In the Parameters box, deselect "Release". Select "Roll Over". The script changes to "on (Rollover)" in the scripting pane (bottom right).

  3. In Actions>Timeline Control, double-click "goto". In the Parameters window, change the "Go to and Play" button to the "Go to and Stop" button. (You really, really, really don't want Flash to play - you want it to go to a particular frame, which it will play, and screech to a halt.) Change the frame number in the Frame drop-down window to "2".

  4. Click on number 3 in the scripting panel. (If you don't see numbers in the scripting pane, click on the boxed arrow above the pane on the right, and select "view line numbers".) Still in Actions>Timeline Control, double-click "on", deselect "Roll Over", and select "Roll Out".

  5. Still in Actions > Timeline Control, double-click "goto", select the "Go to and Stop" button, and leave the Frame number at Frame 1. What you've told Flash to do is when you roll over the yellow button named 1700, go to Frame 2. And when you roll off the yellow button named 1700, go back to Frame 1. The reason you're doing this will become clear in a moment.

Tell the Second Button What to Do
19. Go back to the Stage and click on the 1900 button. In the Properties Inspector, name the instance of that button "my1900_btn".

  1. In the Actions window, double-click "on" in Actions > Movie Control. Deselect "Release" and select "Roll Over". The script changes to "on (Rollover)" in the scripting window.

  2. Double-click "goto". In the Parameters window, change from the "Go to and Play" button to the "Go to and Stop" button. Change the frame number in the Frame drop-down window to "3".

  3. Double-click "on", deselect "Release", and select "Roll Out". Double-click "goto", select the "Go to and Stop" button, and leave the Frame number at Frame 1.

Tell the Last Two Buttons What to Do
23. Repeat steps 17, 18, 19, and 20 for the 1915 and 1995 buttons, but make sure you name their instances in the Property Inspector, and make sure you change the frame number in the first "goto" script to Frame "4" for 1915 and "5" for 1995.

Extend the Base Layer to Frame 20
24. Still in the "line" layer, insert a keyframe in Frame 20. Now all the frames between one and 20 are the same.

Test the Buttons, Stop the Movie at One
25. Save the movie. You can do a simple test to see if your buttons are active by choosing Control > Enable Simple Buttons, and moving your mouse over the yellow buttons. The hand will appear. But you're not finished yet. Before moving on to the next step, deselect Control > Enable Simple Buttons. (Those hands just get in the way.)

  1. In the "actions" layer, click on Frame 1, and in the Actions panel, choose Actions > Movie Control, and then double-click on "stop". A small "a" appears in Frame 1. This tells Flash to stop on Frame 1 as soon as it starts, rather than continue playing all the frames.

Put Text with Each Button
27. Click on layer "1700" and insert a blank keyframe in Frame 2. In the toolbar, select the text-editing tool ("A") and on the Stage, above the 1700 button, type "16K to 20K sea otters in California". In the toolbar, select the arrow tool to position it above the 1700 button.

  1. Click on layer "1900" and insert a blank keyframe in Frame 3. In the toolbar, select the text-editing tool and on the Stage, above the 1900 button, type "California sea otters though to be extinct". In the toolbar, select the arrow tool to position it above the 1900 button.

  2. Click on layer "1915" and insert a blank keyframe in Frame 4. In the toolbar, select the text-editing tool and on the Stage, above the 1915 button, type "50 sea otters found in Big Sur, CA". In the toolbar, select the arrow tool to position it above the 1915 button.

  3. Click on layer "1995" and insert a blank keyframe in Frame 5. In the toolbar, select the text-editing tool and on the Stage, above the 1995 button, type "Sea otters hit 2,300, start slow decline". In the toolbar, select the arrow tool to position it above the 1995 button.

  4. Save the movie. Now test it by choosing, from the Flash menu, Control > Enable Simple Buttons and Control > Test Movie. An export window will appear and disappear when the export is finished, and a new window will pop up.

  5. At the top of this new window is the file name, with attached swf. From View, choose "Bandwidth Profiler", which adds a pane at the top about the file, such as the dimensions, frame rate, size, etc. In the pane at the bottom is your timeline. You can mouse over the dates to see the text appear and disappear as you scripted.

Extra Info: Link a Button to a URL:
1. Create a button symbol, drag an instance from the library to the Stage and give it a name in the Property Inspector.

  1. Select the layer you've put the button into, then select the first frame of the main Timeline, and open the Actions panel.

  2. Choose Objects > Movie > Button > Events > onRelease.

  3. In the Object field, enter the name of the button symbol. The onRelease event handler for the button is created.

  4. Choose Actions > Browser/Network > get URL. The getURL action is added to the onRelease event handler.

  5. In the URL field, enter the full address of a Web site.

  6. Leave the Expression checkbox unchecked.

  7. Export your Flash movie in Flash and html, and play it in either Flash Player or a browser. From the Flash player, a separate window opens for the url. In Dreamweaver, when you click the button you created, the Web site loads in the same window as your Flash movie. Click the back button in your browser to return to your Flash movie.

[From Macromedia Flash MX Advanced, by Russell Chun, pp. 192-193.]