by kirupa | 25 June 2006
In the previous page,
you created a working connected lines example using five
draggable circles as the endpoints of the lines. In the next
few pages you will learn more about how the code works.
There are several main parts to the animation you
created earlier. The first part involves displaying the
circles!
If you recall in the previous page, you drew the circle, converted the circle to
a movie clip, gave it a linkage identifier, and deleted the
circle from the stage. So, the first part of our code is to
take the circle out of the library and place it on the
stage. That code is contained in our init() function, and
the relevant portions are highlighted below:
- function
init()
{
- for
(var
i:Number
=
0; i<5;
i++)
{
- this.attachMovie("blueCircle",
"blue"+i,
this.getNextHighestDepth());
- var
mc:MovieClip
=
this["blue"+i];
- mc._x
=
Math.round(Math.random()*300);
- mc._y
=
Math.round(Math.random()*200);
-
mc.onPress
=
function()
{
-
this.startDrag();
- };
-
mc.onRelease
=
function()
{
-
this.stopDrag();
- };
- }
- this.createEmptyMovieClip("line",
-1);
-
drawLine();
- this.onMouseMove
=
function()
{
-
drawLine();
- }
- }
The above highlighted code places five circles from the Library,
gives each circle a unique name, and places them on a random
location on the stage. Let's go through each line of code:
- for
(var
i:Number
= 0;
i<5;
i++)
{
This for loop will execute any code
contained in it five times. The variable i starts at
zero, and after each iteration, it increases by 1 until
it becomes less than 5.
- this.attachMovie("blueCircle",
"blue"+i,
this.getNextHighestDepth());
With this line of code, you are
retrieving the circle from your library referenced by
blueCircle, giving it a name "blue"+i, and
placing it at the next highest depth. The linkage
identifier blueCircle is the identifier name you gave
your circle from the Convert to Symbol window earlier.
The name "blue"+i is dependent on the
value of i as seen earlier in the for loop. For each
iteration of the loop, the value of i changes.
Therefore, the name of the blueCircle object you
retrieve from the library would also. In our
example, with the for loop terminating before i reaches
5, the circle names will be: blue0, blue1, blue2, blue3,
and blue4.
Each object that is placed on the stage
is given a depth. You cannot have two objects sharing
the same depth, so you need to find a way of giving each
object a unique depth. While you can use numbers that
increase with each object created, the safest bet is to
let Flash determine the depth using the
getNextHighestDepth() method.
- var
mc:MovieClip
=
this["blue"+i];
- mc._x
=
Math.round(Math.random()*300);
- mc._y
=
Math.round(Math.random()*200);
The above three lines are fairly
straightforward. For each movie clip we retrieve from
the library, we need a good way of referencing it. The
this[...] method allows you to create a reference to
an object containing the name you pass into it - In our
case, blue + i. This reference is stored in the variable
mc. Now that you have a reference
to the movieclip recently retrieved from the Library,
you can assign them various properties that you would to
any normal movieclip. Two properties we alter are the X
and Y positions of the movieclip, and those are the last
two lines you see above. The numbers 300 and 200
correspond to the width and height of the movie
respectively.
We have barely scratched the surface of
the code. There is more on the next page!
|
Creating Connected Lines - Page 2
