As for the calculator
movie, we’ll only use one frame in our lander movie.
Make a new movie and use
the properties inspector to resize it to 550 x 400 pixels. Use the properties
inspector also to set the background colour to black and check that the frame
rate is set to 12 frames per second. Make sure you can see the whole of the
frame by choosing ‘show frame’ from the pull-down list in the top right hand
corner of the frame window.
As we are concentrating on
learning Flash scripting skills, we won’t bother initially with using a
realistic photo of the lander. We’ll just use a red square instead – you can
change the fill of the square later into a bitmap photo of a lander if you like.
Select the rectangle tool in the toolbox, and set the
fill colour to red. Think also about the stroke colour - we don't need Flash to
draw four strokes (lines) around our rectangle so let's keep it simple by
setting the stroke colour to 'none' .
As it stands, our red
square cannot be given a name and therefore cannot be referred to by code. Click
the red square to select it then convert it to a symbol by pressing F8. Give the
name ‘lander’ and choose the ‘movie clip’ for the behaviour – this is
the usual choice for any symbol that is not intended to act as a button. Also
note that the 'registration point' of the movie clip is in the top left
corner.
Choose the bottom left corner instead so that we can more easily
detect when the bottom of the lander hits the top of the pad. The registration
point is the point to which the _x and _y coordinates refer. In other
words, when you get the position of an object on the stage you are
getting the position of that object's registration point, which
may have been placed in the top left corner or in the centre or in other
places. You
will notice that the symbol you have just created has been added to the
library (press Ctrl-L if you can't see the library).
The red square on the form
is now an instance of the lander symbol – use the properties
inspector to change the instance name of the red square to ‘lander1’. This
does not imply that there will be other lander instances, but it is a good
reminder that an instance is not the same as a symbol and that we
could make other instances of the same symbol if we wanted to.
We’ll build our program
step by step, testing as we go, so let’s first see whether we can make our
lander fall as if pulled down by the moon’s gravity. We did this in VB by
using the timer control to run a block of code at frequent intervals (once every
100 milliseconds or 10 times every second). We had variables vx and vy which
represented the horizontal and vertical velocities, respectively. 10 times every
second, the downward velocity vy was increased by a constant amount, just as
would be the case for a real lander. Since speed is just the distance moved in
each unit of time, we had code that moved the lander horizontally and vertically
by distances equal to vx and vy (we were assuming therefore that vx and vy were
the velocities in ‘pixels per decisecond’).
Since Flash has nothing like VB's timer control we will use a different technique to animate the lander. You
need to understand that:
our movie is only one frame long
when the movie gets to the end it starts again at the beginning
- it loops
each time the movie starts again we enter the first and only
frame in our movie
Flash has an onEnterFrame
event handler and code that is attached to this will run repeatedly at the frame
rate of the movie since our movie keeps starting again from the beginning after
playing the one and only frame. The frame rate of our movie is set to 12 frames per second
and code that runs this often to move the lander will give smooth-looking
animation, as we wish.
Make a new layer for this
code then, as you did in the calculator movie, and name the new layer
‘Actions’. Right-click the empty keyframe in frame 1 of the Actions layer,
open the Actions panel and paste a copy of the code below:
Study the above code
carefully – it first creates a variable called vy and gives it the value zero -
this variable will be used to store the vertical velocity of the lander. Please
note that Flash is (unfortunately) case sensitive so vy is not the same as Vy,
for example, and lander1 is not the same as Lander1. You can avoid case problems
if you use lower case for everything. Next, the code defines the function ‘_root.onEnterFrame’. In the
second line above, Flash needs to know where the frames are located, since a Flash movie can
contain many ‘movie clips’ each with a different timeline. In this case we
are referring to the main timeline, which is said to be at the ‘root level’
of the movie.
In the third line, we add
a constant number to vy, so that the downward velocity will increase steadily as
the movie runs.
In the fourth line, we add
the value of vy to the ‘_y’ property of the lander (not forgetting to
indicate that the lander is in the main or ‘root’ movie). As you have
guessed, the ‘_y’ property is the equivalent of the ‘top’ property in VB
– it gives the vertical position of a movie clip, measured from the top of the
frame.
Test your movie
(Ctrl-Enter) and if all goes well you will see the lander accelerate downwards
and disappear off the frame. Well done!
Note that it is also possible to test your movie by pressing Ctrl-F12 - this
takes a little longer but shows you exactly what your movie will look like
inside your browser.
Now let’s add a button
to control the thruster rocket that pushes the lander upwards. Choose the line
tool in toolbox then use it to make a sharp upward-pointing triangle in the
lower left corner of the frame. Make sure the fill colour is set to blue, choose
the paint bucket tool, and fill the triangle with blue colour. Delete the 3
strokes around the triangle and convert the triangle into a symbol with the name
‘thruster’ and with buttonbehaviour (we usually use 'movie clip'
behaviour' but 'button behaviour' allows us to use the simple 'on release' code
below).
Make sure the blue
triangle (now an unnamed instance of the ‘thruster’ symbol) is selected,
then open the Actions panel and paste or type the following
code:
on (release) {
vy = vy - 2;
}
It should be obvious what
this code does – when the mouse button is pressed down and then released over
this button, 2 will be subtracted from the downwards velocity (vy) of the lander.
Test your movie and make sure you can now control the vertical velocity of the
lander.
Let’s add the other two
buttons to control the horizontal thrusters. Make sure the movie’s library
panel is visible (choose Window > Library otherwise) then drag a second
instance of the thruster symbol from the library onto the frame, placing it to
the left of the existing thruster button. Choose the free transform tool in the
toolbox and use it to rotate the new instance until it points to the left. Add a
third instance and make it point to the right. Add the code for the two new
buttons – the one on the left should subtract 2 from vx each time it is
clicked and the one on the right should add 2.
The 2 new buttons won’t
affect the lander’s motion until we modify the ‘onEnterFrame’ function
definition to take into account the vx variable. The code below also contains a
line which creates and initializes the variable vx.
Test your movie and check
that you can control the horizontal as well as the vertical velocity of the
lander.
Now you can add a landing
pad – just a green rectangle, to the lower right corner of the frame. Remove
the 4 strokes around it then convert it to a movie clip symbol called ‘pad’.
Name the instance of the pad symbol now on the frame ‘pad1’ so that we can
refer to it in the code. Your frame should now look something like this (but not
yet including the text box in the top right corner):
Now we need to modify the
‘onEnterFrame’ function definition to test whether the lander has fallen far
enough to be touching the pad. In VB there is no property called ‘bottom’
that represents the location of the bottom edge of an object, so we had to add
‘top’ and ‘height’ to get the position of the bottom of the lander. In
Flash we can avoid this problem because the ‘_y’ property gives the position
of the lander’s ‘registration point’ and this is something that we can
move by editing the lander symbol. To edit the lander symbol, double-click the
instance (lander1) of the symbol that we have on the frame. You are now in
symbol-editing mode – you can’t drag the registration point (the circle at
the centre of the shape) but you can drag the shape - move the shape up until
the registration point coincides with the bottom edge of the lander (we could
have avoided this adjustment if we had specified the location of the
registration point when the lander symbol was first created). Exit
symbol-editing mode by clicking the ‘Scene 1’ label just above the frame
window.
Now edit the pad symbol so
that its registration point coincides with the upper edge of the pad.
Having made these changes,
we can make a rather simple modification to the onEnterFrame code:
The new line checks
whether the registration point of the lander is less far down the frame than the
registration point of the pad, and if so then the lander is moved as previously.
If the test gives a false result then the following lines are not executed so
the lander stops moving.
Test your movie – you
should see the message appear whenever the lander reaches the level of the pad,
WHETHER OR NOT THE LANDER IS ABOVE THE PAD. Clearly the program is not yet
finished – I’ll leave you the rather difficult challenge of adding the code
to check whether the lander actually lands correctly, entirely within the width
of the pad.
Before you do that,
however, make a message appear when you land. In our VB lander program a message
box appeared at the moment of the landing and announced ‘You have
landed’. There is no messagebox statement in Flash but a similar effect can be
achieved by changing the contents of an initially-empty dynamic text box.
Use the text tool to make
a text box in the top right corner. Set the text type to dynamic text, the
‘show border around text’ option to off, and the text colour to bright
yellow. Set also the var property of the text box to ‘message’. Now the
following modification to the code will make the message appear when you land:
Note that there are other
ways of making a message appear, e.g. a previously-hidden text box could be made
visible (Flash movie clips have a ‘_visible’ property which corresponds to
the ‘visible’ property of VB controls), or the alpha value (opacity) of the
text box could have been set to 0 initially (using the properties inspector) and
then (using code) to 100% when the lander landed. (A transparent text box is not
the same as an invisible text box, for the transparent box is still enabled –
it can still be clicked).
As mentioned earlier, you
are now left with the challenge of modifying the code so that the program can
detect a good landing, and react accordingly. As in VB, you will need to do this
with a ‘nested’ if structure, and you will probably need to use the
‘_width’ property of the lander and the pad. Note that you should use
&& in place of AND in Flash - I warned you that Flash is not
intuitive! The result could look something like this (refresh the page by
pressing F5 to
restart the movie)...