Introduction
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 what you will be making:
You may download the source
file for this tutorial 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.
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.
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);
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".
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%).
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.
Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
