To demonstrate the potential of arrays we're going
to skip ahead a little and apply what we've just done
to a scripted animation.
Create a new movie with three layers.
name them ‘script’, ‘dots’ and
‘border’. The border layer is simply to
provide a frame for our animation so draw a rectangle on
it about 5 px in from the edges of the stage. On the
dots layer draw a circle 10px by 10px and turn it into a
movie clip. In the properties panel (or the instance
panel in Flash 5) give it the instance name ‘mc0’.
Place it's center at 10 on the x axis and 50 on the
y axis. Make both of these layers three frames long,
lock them and then give the script layer three keyframes.
The intention of this animation is to create
a row of dots that move in a wave. The first thing you
want the script to do therefore is create copies of the
dot you've just drawn and position the copies in a row.
Select the first keyframe of the script layer and type the
contents of fig.7 into the actionscripts panel.
Line two is a literal array that
contains the instance names of all the movieclips we'll need.
Line four is another literal array
this time containing the initial y positions of all the movieclips.
Line six is another literal array
that contains the initial alpha levels (transparency)
of our movieclips.
Line eight is the start of a ‘for’
loop, to recap, it says the variable ‘i’
starts with 1 as it's contents, the ‘for’
loop should continue for the time that the variable ‘i’'s
contents is less than the length of the ‘mcId’
array, at the end of each time through the loop the
variable ‘i’ increments by one. In other
words the contents of the loop will be applied once for
every element of the mcId array. Do not forget that
the index of an array starts at zero. the reason this
‘for’ loop starts at 1 is that we already have
the first movie clip, ‘mc0’ on the stage
and in the correct position, it does not therefore require
manipulation at this stage and so we allow the ‘for’
loop to skip it.
Line nine is a new concept for this
tutorial. The ‘MovieClip.duplicateMovieClip()’
method is used to create a copy of a movieclip. We start
with the instance name of the movie clip to copy, in
this case ‘mc0’. Add ‘.duplicateMovieClip()’,
now we enter two arguments inside the brackets. The
first is a string that will be the instance name of the
new clip, in this case it is the appropriate element
in the ‘mcId’ array, the first time through
the loop it will be “mc1”, the second it
will be “mc2”, and so on. The second
argument, seperated from the first by a comma, is
the new depth of the movie clip, in this case the value
of ‘i’, the first depth being 1, the
second being 2, and so on.
Line ten is another new concept
for this tutorial, and one that seems complicated at
first. It involves objects and classes which go beyond
the scope of this tutorial. Instead I'll explain
it as follows: We want to refer to the _x property of
the appropriate movie clip. However, we cannot refer
to the _x property of an element of an array because it's
just a string and doesn't have an _x property. Consequently
we let flash know we're refering to an object (our
movie clip) by using this syntax. So flash calculates
the expression before continuing, ‘_root[mcId[i]]’
on the first time through the loop is the same as saying
‘_root.mc1’, ‘_root.mc2’
the second time through the loop, and so on.
What line ten says in English is
on the first time through the loop is make the _x position
of mc1 the same as the _x position of mc0 plus 10px,
on the second time through the loop it says make the _x
position of mc2 the same as the _x position of mc1 plus
10px, and so on.
Test your movie now you'll get a line of dots,
each one 10px further along the x axis than the previous
and all at 50px on the y axis, because each clip inherits
it's y position from the ‘mc0’ movie clip.
Now select keyframe 2 of the ‘script’
layer and type the contents of fig.8 into the actionscript panel.
Line two, three, four &
five work on the same principle as lines 8, 10 &
11 in fig.7, except that instead of setting the
_x property of the movie clips we are setting first the
_y property and then the _alpha property. Importantly,
instead of refering to the property of another movie clip
as we did with the _x property, we are pulling the values
from the arrays named ‘yPos’ and ‘aPos’.
This is what it says in English:
The value of ‘j’ is 0, repeat this loop
until the value of ‘j’ is greater than the length
of the ‘mcId’ array. The first time
through the loop refer to the movie clip reference at the
0 position of ‘mcId’ and make it's _y position
the value at the 0 position of the ‘yPos’ array,
then set it's _alpha value to the value at the 0 position
of the ‘aPos’ array. The second time through
the loop refer to the movie clip reference at the 1 position
of ‘mcId’ and make it's _y position the
value at the 1 position of the ‘yPos’ array,
then set it's _alpha value to the value at the 1 position
of the ‘aPos’ array, and so on.
Line seven is where we start creating
a wave effect. So far all we've done is set the
values of some movie clips to the corresponding values in
a couple of arrays. You may have noticed that all the
arrays were placed in frame one, and yet we're refering
to two of them in frame two. The reason is simple,
the intention is to alter the arrays. Each time this
‘for’ loop is run it will utilise the values
we populated the arrays with in frame 1, only until
they're altered by our script.
The first method of altering an array
we're going to use is ‘push()’.
The ‘push()’ method adds elements to
the end of an array, you can use it to add more than
one element by seperating the values inside the brackets
with a comma, in this case we don't need to.
We start with the array we're refering to, followed
by a dot, followed by the push() method.
The outermost brackets on this line
are required by the ‘push()’ method,
and we fill them with what we want to add. The rest
of this line, ‘Math.floor(Math.random()*10))+50’
is simpler than it sounds. starting with the contents
of the inner most brackets ‘(Math.random()*10)’
What you're telling flash is to create a random number
between 0 and 0.9999999999999...etc. and
multiply it by 10, so that you end up with a random
number between 0 and 9.9999999999999...etc.
This is surrounded by ‘Math.floor()’
which simply rounds this number down to the nearest whole
number giving us a random number between 0 and 9. Finally
we add 50, because the starting position of the movie
clips is 50. if we didn't add 50 then the movie
clips would be waving around the 0px on the y axis,
and rarely does anything look good flush to the side of
the stage.
Line 8 Because we've just added
an element to the end of the yPos array, we need to
remove one element from the beginning of the array in order
to keep the array at the same length. We do this using
the ‘shift()’ method, and this line
simply removes the first element from the ‘yPos’
array so that what was the element at the 1 position,
is now at the 0 position, and what was at the 2 position
is now at the 1 position, and so on.
Line ten is a slightly simpler version
of line 7. instead of adding a random number to the
end of the array we take the value at the 0 position of
the ‘aPos’ array and add it to the end.
Line eleven is identical to line
eight except we remove the first element of the ‘aPos’
array instead of the ‘yPos’ array. Again
we do it so that the array does not increase in length.
If you test your movie now nothing special will happen.
The ‘for’ loop in keyframe 2 executes using
the initial values we gave the movie clips and the arrays
are not altered until after it has executed. So,
what's needed is a way of making it repeat. If we
try enclosing the entire thing in an endlessly repeating
loop we'll crash the flash player. Therefore we
allow the playhead to pass on to keyframe three and then
send it back to play again, which has the effect of
looping the script but without the disasterous outcome.
Select keyframe 3 of the ‘script’ layer and
type the contents of fig.9 into the actionscript panel.
Note that the script is sending the playhead back to frame
2, not frame 1. Sending the framehead back to frame
1 would keep resetting the values of the arrays to their
initial values.
Test your movie, the result should look
the same as the contents of fig.10.
That concludes this tutorial. I hope
you've found it useful.
