Nested Symbols

Nested Symbols

Flash CS4 ActionScript 3.0 Tutorial

 

How to Nest Movies or Buttons within Movies or Buttons in Flash

 

 

Nesting symbols is a common technique when working with Button Symbols and Movie Symbols. It allows you to create a parent/child relationship for simplified moving. You can also use ActionScript to talk to a nested movie at any level of the hierarchy.

In this example we will nest a Movie Symbol within a Movie Symbol. We will also add a button to the main stage. Whenever the button is pressed, the nested movie responds to the button click.

Tutorial Elements

Movie Symbol named holder_mc

Movie Symbol named nested_mc

Button Symbol with an instance name of play_btn

 

Step One

Open a new Flash document and add two more layers.

Step Two

Name the top layer Actions, the middle layer Button and the lower layer Movie.

Step Three

Add a button to the Button layer and assign it an instance name of play_btn in the Properties panel.

Step Four

Click frame one of the Movie layer and choose Insert > New Symbol (Cmd/F8 (PC - Ctrl/F8).

Step Five

Choose Movie Symbol for type and name your new symbol Holder.

Step Six

Drag the Holder symbol from the Library to the center of the stage.

Step Seven

Click the small circle to select the new symbol and assign it an instance name of holder_mc in the Properties panel.

Step Eight

Double-click the small circle to enter the editing mode of the Holder Movie Symbol.

Step Nine

Use the Rectangle tool to add a rectangle inside the Holder Movie Symbol.

Step Ten

Select the rectangle and press F8 to convert it to a Movie Symbol.

Step Eleven

Click the rectangle symbol and assign it an instance name of nested_mc.

Step Twelve

Double-Click the nested_mc to enter the symbol editing mode.

Step Thirteen

Add a new layer inside nested_mc and name it Actions.

Step Fourteen

Add keyframes for both layers at frame five by clicking frame five and pressing F6.

Step Fifteen

Add the following code to the Actions layer keyframes one and five.

stop();

Step Sixteen

Change the color of the rectangle at frame five.

Step Seventeen

Return to the main stage by clicking the scene icon.

Step Eighteen

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

Step Nineteen

Copy/Paste the following code to the ActionScript panel.

play_btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void {

holder_mc.nested_mc.play();

}

Step Twenty

Publish your movie by pressing Cmd/Return (PC - Ctrl/Enter). Click the button and the nested movie toggles between the two color states.

Dissecting the Code

The stop code added at Step Fifteen stops the timeline whenever it hits frame one or frame five.

The code at Step Nineteen add functionality to the button. By pressing the button you address the timeline of the nested_mc which is inside the holder_mc. The timeline is told to play.

 

Shutterfly 50 Free Prints 160x600