CIS 421 › Flash> AS3 navigate sections

AS3: Navigate Timeline Sections

What it does

Mark off 3 different sections on the timeline by labeling the starting frame of each section with a frame label
Use buttons with the instance names equal to each section's frame label
ActionScript 3 passes the instance name of the button to the function, which then transfers the playline to that frame label
Each section can contain a different part of the story or display a different Flash animation or movie

How to do it

Open a new Flash movie with ActionScript 3.0

Set up the ActionScript and the Frame Labels

Rename layer1 as Actions, to contain the frame labels and the actionscript.
Click on keyframe 1 of the Actions layer.
Open the Actions palette (Windows>Actions)
Copy and paste the following frame ActionScript into the ActionScript window for frame 1:

//initialize frame label variable
var nextSection:String = "";

//add button event listeners
section1.addEventListener(MouseEvent.CLICK, navigate, false, 0, true);
section2.addEventListener(MouseEvent.CLICK, navigate, false, 0, true);
section3.addEventListener(MouseEvent.CLICK, navigate, false, 0, true);

//define the function each button will call
function navigate(evt:MouseEvent):void {
//the destination frame label is derived from the name of the button clicked
nextSection = evt.target.name;
play();
}

Pattern for each section -- you can adjust sizes of sections based on content for each

section labels - the destinations for the button clicks

Click Windows>Properties to open the Property Inspector, if it is not open.
Create a new layer and name it labels.
Click in keyframe 1 of the labels layer,
1. type section1 into the Frame input box in the property inspector for keyframe 1
2. The frame label should appear in the timeline starting at that keyframe.
Clck the cursor into frame 30 of the labels layer
1. Hit <F6> in frame 30 of the labels layer to make it a keyframe
2. type section2 into the frame labels box in the property inspector.
3. The frame label should appear in the timeline starting at that keyframe.
Repeat step 4 in frame 60 and name the frame section3

Add stop actions to the Middle of each section to stop the playline from going to the next section

Click in frame 15 of the Actions layer and hit <F6> to make it a keyframe.
1. Open the Actions Palette and type stop(); to insert a stop action to stop the section from changing until the user presses another button to switch sections.
Repeat in frames 45 and 75 of the frames layer.
These stop actions will stop the playhead from moving past a certain point in each section. The placement of the stop actions can be adjusted to suit your movie content.

Add ActionScript at end of section to move the playhead to a new section, based on button user presses

Click in frame 28 of the Actions layer and hit <F6>to make it a keyframe.
Open the Actions Palette
1. type the instruction gotoAndPlay(nextSection);
2. This action triggers the timeline to move to the label for whatever button the user has pressed.
Repeat steps 1 through 2 in frames 58 and 88 of the Actions layer.

Buttons to make it work

Click Insert>New Symbol and choose Button as the symbol type.
1. Name the symbol btn
2. Click OK to open the symbol editing window
Choose a fill color for your button up state
Select the Rectangle Primitive Tool on the rectangle popout menu on the toolbar.
1. changing the corner radius setting to about 20 or 30 for all 4 corners in the Property Inspector for the Rectangle Primitive Tool.
2. Draw a rectangle on the symbol editing stage
Hit F6 in the over state of the button timeline and change the color of the button.
You don't need to change the down state color unless you want to You chan just hit F6 to keep it the same color.
Hit F6 in the hit frame to be sure you create a hotspot for the button.
The button should appear in the movie library. (Windows>Library or <CTRL> L opens the library).

Add the buttons

You can create 3 instances of this button and put all three buttons into one layer,
1. Use the selection tool, and click on the stage to deselect everything on it before you drag a button on the stage.
2. Give each button instance has its own instance name riight after you drag it on the stage.
Click on Scene1 to open the movie stage.
Turn on the Grid so you can line up the buttons -View>Grid>Show Grid
Create a new layer called buttons
Drag the first button instance from the library onto the stage.
1. Name its instance section1 in the button property inspector
2. Click the selection tool somewhere else on the stage to deselect the section1 button
Repeat for the second button instance, naming it section2
Repeat for the third button instance, naming it section3

Add the button text

Select the Button layer and Create a new layer above it called btnText
Select the type tool in the toolbox
1. select a font style
2. font color that will contrast with the button color,
3. a font size that will fit on the button
4. Choose center alignment and start typing in the center of the button
In keyframe 1 of the btnText layer, type section 1 on the section1 instance of the button.
1. you can copy and paste in place two more copies of the button text.
2. Move the button text copies to the other two buttons either with the direction arrows on the keyboard or the select tool
3. Select the text tool, and change the section numbers to 2 and 3 to match the instance names of the other two button

The movie timeline story

Insert some content in each section
The section action will stop at the stop action keyframe in the Actions layer, so you may want to create a tween that stops there in your content layer.
- The tween should go from the first frame of the section to the frame with the stop action (frame 15 in the first section).
Save the movie
Control>test will test the movie.
Any errors or problems will appear in the output palette
When you press a button, the movie control will finish playing the frames in the section you are in and then jump to the section you have selected.

Source:

This information and the SWF movie is drawn Chapter 5 from the excellent book Learning ActionScript 3.0: A Beginner's Guide, by Rich Shupe with Zevan Rosser (2007). It is available in Safari books online through the Cal Poly Library. Downloads for this book's examples are available on-line

Section Index