Document setup

Instances

Movie clip setup

Movie clip actions

Movie clip controller

Document setup

One of the hardest things to learn about is how to target different timelines. Because Flash movies can have many movieclips inside each other (each with their own timeline) it can get pretty confusing as to how to make a particular mc stop (for example).

This tutorial will introduce you to the concept of "paths" and how they act within Flash MX.

This is the movie you will be making.

You can download the source file for this tute here.

Open Flash and leave the blank document at its default size.

At this point, you are looking at _root (the main timeline).



See where it says "Scene 1"? This is telling you that you are on the main timeline. It is vital the you keep an eye on this bar so that you always know where you are within your movie.

OK now draw a square on the stage. Double click on it with the black arrow tool (to select the fill and the stroke) and hit F8 to convert it to a symbol. Make sure that Movieclip is selected and name it "square movieclip".



At the end of the day, it doesn't really matter what you name your symbols. This is just to help you know what everything is when you look at your library, and has nothing to do with how we target that movieclip with actionscript.

Instances

OK so now you have a movieclip on the stage that has its own timeline which is completely independent of the main timeline. One can be stopped, the other can be playing etc. You can see that your square is now a symbol because of the blue bounding box and the crosshair in the middle.



You can also tell by clicking on it once and looking at the property inspector. While you're looking at the property inspector, give this instance of the "square movieclip" an instance name of "square_mc" (for reasons that I won't go into now, it is a good idea to get into the habit of ending your movieclip instance names with "_mc", your button instance names with "_btn" and your text box instance names with "_txt").


It's the instance name that is vital when working out the path to different timelines. When can now target this instance of the "square movieclip" and tell it to do whatever we want. We would do this via the path

_root.square_mc

anything you put after that path (eg .gotoAndPlay(5)) will effect the square_mc timeline.

NOTE: you must be very careful about the instance names you use. Never have a space in an instance name (eg "square mc"). Never start an instance name with a number (eg "5square"). Instance names are also case sensitive, meaning that if you name your instance "squareMC" you cannot target it later with _root.squaremc.gotoAndPlay(5);

Movie clip setup

OK. Make sure you are still located on the main timeline



and option drag out a copy of the "square movieclip". This new instance of the square movieclip will automatically have an instance name of "square_mc" but instance names must always be unique so change it to "square2_mc".

So now you have 3 timelines in your Flash movie that can each do its own thing.

Double click on either one of the squares on the stage to go inside the "square movieclip".



Click on frame 10 of this timeline and hit F6 to create a new keyframe. With the shape in frame 10, scale it so it is 50% of its original size. Now click on frame 1 of this timeline and in the property inspector turn shape tweening on. Test your movie and you will see that the animation you just made occurs in both instances of the "square movieclip", and the movieclips start playing and looping by default.

Go back to the main timeline



and draw a cricle on the stage. Double click on the fill of the circle with the black arrow tool and hit F8 to convert it to a symbol. Make sure you are creating a movieclip symbol and name it "circle movieclip" - click OK.

With the circle movieclip instance still selected on the stage, go to the property inspector and give it an instance name of "circle_mc". Now double click on the circle movieclip instance to go inside it.



The circle shape should be automatically selected



so just hit F8 again to create another movieclip - name this one "innerCircle movieclip" and click OK. Now give this instance of the innerCircle movieclip and instance name of "innerCircle_mc". Now go back to the main timeline



and name the one and only layer "movieclips". Make 2 new layers and name them "actions" and "buttons".



Click on frame 1 of the buttons layer and draw a small rectangle on the stage. Double click on this shape with the black arrow tool and hit F8 to convert it to a symbol. Make sure that button is selected and name it "template button".



Click OK and then give the instance of the button on the stage an instance name of "button1_btn". Now option drag out 2 copies of this button and change the instance names of the copies to "button2_btn" and "button3_btn".

Movie clip actions

Now let's give these buttons some actions. Click on frame 1 of the actions layer and paste these actions into the actions panel -

button1_btn.onRelease=function(){
//stop the square_mc instance
square_mc.stop();
//note: you could also say _root.square_mc.stop() but because we have
//placed this action on _root then the action we have used will work fine
}
button2_btn.onRelease=function(){
//stop the square2_mc instance
square2_mc.stop();
}
button3_btn.onRelease=function(){
//change the alpha of the innerCircle_mc instance
circle_mc.innerCircle_mc._alpha=50;
}

Have a read of the comments (the lines that start with //) and then test the movie. The actions for the first 2 buttons are pretty obvious - we provide the path to the timeline we want to target and tell it to stop(). For the thrid button, we have to go 1 level deeper to get to the movieclip we want to target so again we provide the full path and then tell Flash what to do with this movieclip (ie change its transparency to 50%).

Movie clip controller

OK let's do one more example. Select the movieclips layer on the main timeline and and draw a square off to the left of the stage. Select the square and convert it to a movieclip - name it "circle controller".

Click OK but this time don't bother giving the instance an instance name. Double click on the circle controller instance to go inside it.



Click on frame 10 of this timeline and hit F6 to create a new keyframe, then paste these actions into the actions panel.

//set the xscale of the innerCircle_mc to a random number between 0 and 500
_root.circle_mc.innerCircle_mc._xscale=Math.random()*500;



Test your movie again and you will see that everytime the circle controller gets to frame 10, it sets the xscale of the innerCircle_mc to a random value. This time we do have to specify _root as part of the path because we have placed the action on a different timeline.  Going to the root of the application and working your way up to the object you wish to target is know as an absolute path.  The alternative to this is to use what is known as a relative path, where we provide the path directly from the location of the code to the object that we wish to target.  In the example above, we would need to go back one timeline (_parent), then inside circle_mc where we would find the innerCircle_mc that we wish to target.  In this example, the code for the two paths is almost identical.

Absolute:  _root.circle_mc.innerCircle_mc._xscale=Math.random()*500; 
Relative:   _parent.circle_mc.innerCircle_mc._xscale=Math.random()*500; 

There are many times, however, that it much cleaner to use a relative path.  If you go inside the circle_mc on the main timeline and wish to put some code in there to target the innerCircle_mc, the relative path directly to the object we wish to target is much more direct that the absolute path.

//don't add this code to your movie - it's just an example of the different types of paths
Absolute:  _root.circle_mc.innerCircle_mc._xscale=Math.random()*500; 
Relative:   innerCircle_mc._xscale=Math.random()*500; 

In most cases it is best to use a relative path as they are generally shorter and will not break if you end up loading the swf into another movie.

I hope that you have found this useful.

You can download the source file for this tute here.