Control Main Timeline with Button in Nested Movie

Control Main Timeline with Button in Nested Movie

Flash CS4 ActionScript 3.0 Tutorial

 

How to Control the Main Timeline with a Button in a Nested Flash Movie

 

 

Main timeline control can come from a button on the main stage, a button in a nested movie or a button in an external swf file. In this example we have a button located inside a nested movie that controls the playhead of the main timeline. A Nested Symbol is one that is placed inside another Button Symbol or Movie Symbol.

Tutorial Elements

Movie Symbol with instance name buttonHolder_mc

Button Symbol with instance name nestedButton_btn (located inside buttonHolder_mc)

 

Step One

Open a new Flash document and name the default layer Content.

Step Two

Add a new top layer and name it Actions.

Step Three

Choose Insert > New Symbol (Cmd/F8 (PC - Ctrl/F8).

Step Four

Name your symbol ButtonHolder, choose Movie Clip for type, then press OK.

Step Five

You are now inside the new Movie Symbol. Draw a rectangle on the stage. This will be your new button.

Step Six

Click the rectangle and press F8 to convert it to a Button Symbol. Name your button NestedButton and press OK.

Step Seven

Double-click the button to edit the button. Press F6 three times to copy/paste the Up content to the Over, Down and Hit keyframes.

Step Eight

Click the ButtonHolder icon to return to the ButtonHolder edit screen.

Step Nine

Click the button and give it an instance name of nestedButton_btn in the Properties panel.

Step Ten

Click the Scene icon to return to the main timeline.

Step Eleven

Click frame one of the Content layer and drag the ButtonHolder from the Library to the stage.

Step Twelve

Click the new button and give it an instance name of buttonHolder_mc in the Properties panel.

Step Thirteen

Option double-click (PC - Alt double-click) frame one of the Actions layer.

Step Fourteen

Copy/Paste the following code to the ActionScript panel.

stop();

buttonHolder_mc.nestedButton_btn.addEventListener(MouseEvent.CLICK, frameChange);

function frameChange(e:MouseEvent):void{

this.gotoAndStop(2);

}

Step Fifteen

Click frame two of the Content layer and add a blank keyframe by pressing F7.

Step Sixteen

Using the Text tool, add the following Static text to frame two of the Content layer.

Step Seventeen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Click the nested button. The main timeline should go to frame two and stop.

Dissecting the Code

The first line stops the timeline at frame one. The next line adds an event listener to the nestedButton_btn that is inside the buttonHolder_mc. Once it hears a mouse click, the function frameChange is run.

The line, this.gotoAndStop(2), tells the main timeline to go to frame 2 and stop.

 

Shutterfly 50 Free Prints 160x600