Movement
Using Keyboard Keys
by
kirupa chinnathambi
While this tutorial exists for Flash 5, the
Flash MX version is a slightly more simplified version. Why
is it more simplified you ask? In Flash MX the segregation
of the button and movie clip has been removed. The barriers
preventing complex scripted actions for buttons has been
lifted. Buttons in Flash MX now allow you to script events
without having to place the buttons inside a movie clip.
In this tutorial, you will learn how to move
a yellow ladybug across the animation by using your keyboard
keys. Thanks to Macromedia for providing the bug as a
graphic in one of their sample FLAs:
[ use your left, right, up,
and down arrows to move the yellow bug ]
Creating the Movement:
-
Click here to
open an FLA that contains
the graphic of the bug. Don't worry, you will add the cool
code to make the bug move yourself.
-
Once you have opened the keys.fla file you
downloaded from the above link, you should see a movie
clip with the picture of the bug.
-
Select the movie clip of the bug and press F8. The Convert
to Symbol dialog box will appear. Select Button and
press OK. Your movie clip is now a button.
-
Right click on the button (which you just converted in
Step 4) and select Actions. The Actions dialog box will
appear. Copy and paste the following code:
[ copy and paste the above
code into the Actions dialog box ]
-
You are done with the animation! Preview the animation and
you should be able to move the bug around the screen by
using your left, right, up, and down arrow keys.
ActionScript Explained
Not to leave you in the dark, I will
briefly summarize what the major sections of ActionScript
stand for.
on
(keyPress
"<Left>")
{
currentX =
this._x;
this._x
= currentX - 2;
_root.bug._rotation
= 270;
}
In the above lines of code I am specifying what to do when
the left arrow (<Left>)
key is pressed (keyPress).
By the naming of the variables, you should be able to
establish that I am referring to the X axis. I first take a
value of what the current X position is by making the
variable currentX equal the
current X position (this._x).
The next line deals with actually moving the
bug across the screen. I set the current x position to equal
the current x position (currentX)
subtracted by 2. In the next line, I set the bug's rotation
to point left when moving. Unlike conventional geometry,
Flash does not always follow the 0, 90, 180, 270, 360 (also
0) rotations.
Look over the remaining lines of code, and
you will see that the code is quite self explanatory.
I explain that strange Flash behavior below:
 |
THE TRUTH ABOUT THE Y AXIS |
| Did you notice
that for moving the bug down, I am incrementing
the y value? If you did not, here is the line of
code for moving the bug down:
this._y = currentY
+ 2;
Why would that be? In Flash,
the Y axes are reversed. All vertical instances
in Flash go contrary to the Cartesian principle
by moving down when incremented and moving up
when decremented. |
|
|
You have just completed the tutorial! As
always, I have provided the source code for you to take a
peek at. Click the download source link below to download
the Flash MX Flash File (FLA) for this effect.
I hope the information helped.
If you have any questions or comments, please don't hesitate to post them on the
kirupa.com Forums. Just post your question and I, or our friendly
forum helpers, will help answer it.
The following is a list of related tutorial and help resources that you may find
useful:
|
