Moving and rotating a movie clip with button symbols, via
ActionScript
In this lesson, you will learn how to manipulate a movie clip via button
symbols. You will create an interface and write ActionScript that will enable
the rotation and movement of a movie clip across the screen.
Press and hold the buttons on the example below to see the little rocket
spaceship move and rotate!
Creating a basic button symbol
1. Open a new Flash document. Save it now so that you can
just press Ctrl+S (Command+S on a Mac)
later.
2. Select the Oval tool (O). In the
Properties panel, set the line type to solid and choose 4 as line thickness.
Choose black (or whatever color you may like) as outline color and light blue as
fill color.
3. Click and drag anywhere on the stage while holding
Shift and draw a circle with a 50-60 pixel diameter.
4. Choose the Selection tool (V) and select
the whole circle - the fill as well as the outline.
5. Select Modify > Convert to Symbol to
make a button symbol out of the circle drawing. Select "Button" as type and call
it arrow button. Click OK.
6. You now have a button symbol on the stage.
Double click on it to enter inside it. Now you can edit it. If in doubt
whether you are still on the main scene or inside the button, just look above
the layers. You'll see the information there: it says "Scene 1", followed by
"arrow button" next to it. This clearly indicates that you are working inside
the button symbol. Also, the timeline is different - it consist of four frames
only, specific for a button symbol.
7. Lock the layer you are working on now by clicking on the
little dot beneath the padlock icon. Double-click on the layer name, call it
circle and press Enter to confirm.
Next, click on the Insert layer icon below the layers to create a new layer.
Call it arrow.
8. Select the Line tool (N). Hold
Shift, click and start dragging downwards from where you
clicked to create a vertical line. The line should be a little shorter than the
circle.
9. Now, zoom in a little to work more easily. Using the Line
tool again, click on the line's top point while holding Shift
and draw a 45 degree short line.
Repeat this for the other side, too. Now you have a nice arrow.
10. Choose the Selection tool (V) and
select the arrow.
11. Open the Align panel by selecting Window >
Align. Turn on the "Align/Distribute to stage" button at the right side
of the panel (1 on the image below). Next, click the "Align horizontal center"
button (2) and the "Align vertical center button" (3).
Now you can see how nice the arrow is aligned in relation to the button's
circle area. If you want to learn some more about aligning objects in Flash,
check out the tutorial
on Align panel usage which I made.
There! You just finished designing the button. You'll now make copies of it.
But first, return to the main scene by clicking on the "Scene 1" link above the
layers.
Making copies of the button symbol and modifying them
12. You should now be on the main scene and the button
symbol should be selected. If it isn't, select it by clicking on it
once with the Selection tool (V).
13. Copy the button (Ctrl+C) and paste it
(Ctrl+V).
14. Select the Free transform tool (Q).
Click once on the copy of the button symbol you just made if it isn't already
selected. Bring your mouse cursor near the symbol's top right until a circular
arrow appears. Press Shift and hold it, click with your mouse
and start dragging it clockwise until a rotation of 180 degrees is made. Release
the mouse and the Shift key.
15. Choose the Selection tool (V) again.
Click once on the first symbol (the original, not the copy). Make another copy
of the symbol (copy and paste it like you did in step 13). Move this new copy
away from the other buttons so that you can work more easily with it.
16. Select Modify > Transform > Rotate
90°CCW and you will make your button point leftwards. Easy, isn't it?
This shows you how there always are many ways to do a same thing in Flash. Cool
:)
17. Now make a copy of the left-pointing button you just
made. With the new button instance selected, select Modify >
Transform > Flip Horizontal. There! Another easy way to make a
different copy of a button.
18. Now, using the Selection tool (V),
place the buttons so that they form a cross.
The buttons are now placed logically, as in a control interface, or maybe
Playstation controller :) But! They are too big. Let's make them smaller. This
is easy.
19. Select all the buttons. With the Free transform tool
(Q), make them smaller by holding Shift while
dragging on one of the corners of the selected group of buttons, towards the
center of them.
Click anywhere on stage to unselect the buttons.
Creating the buttons for rocket ship rotation
20. Open the Library (Window > Library).
You will see your arrow button symbol inside it. Right-click on it and
select "Duplicate". In the dialog box that appears, enter rotation
button as the new name and click OK.
21. Double-click on the rotation button symbol you
just made in the Library, to enter inside it. You are going to edit this button
now. Again, above the scene, you can see that you are working inside the button
symbol.
22. Delete the arrow graphic that is situated in the
arrow layer.
23. Unlock the circle layer and change the fill
color of the circle. Choose whatever color you like. Do this by clicking once on
the fill and then selecting a different fill color in the Tool panel.
24. Lock the circle layer. Click on the
arrow layer's first keyframe to select it for work.
25. Select the Oval tool (O). Block the
fill color by clicking on the little paint bucket icon in the Color portion of
the tool panel, and then clicking on the small "No color" icon below it, in the
middle.
26. Click and drag your mouse while holding
Shift to make a circle and not an ellipse. Make the circle a
little bit smaller then the one on the layer below it.
27. By using the Selection tool (V), click
and start dragging to select a bit of the lower portion of the circle. Hit
Delete to erase it.
28. Select the Line tool (N) and draw two
small lines so that your curve becomes a circular arrow. Zoom in if necessary to
work more easily.
29. That's it! You just made the second button! Click on the
"Scene 1" link to return to the main scene.
30. Click and drag an instance of the rotation
button from the Library to the scene.
31. Click on any of the blue arrow buttons, once. In the
Properties panel, read the dimensions (fields marked with W and H) of the
button.
32. Click on the red rotation button, go to the Properties
panel and enter the same dimensions of the blue button inside the appropriate
fields. Press Enter to confirm. The red button will now have
the exact same dimensions as the blue ones. Again, this is just one possible way
of doing it in Flash. There is the Align panel also, the Free transform tool -
work and see whichever suits you best in a specific situation.
33. You are probably still in the dimensions' fields in the
Properties panel, so click once on the red button to select it. Copy and paste
it, to make another instance of it.
34. Select Modify > Transform > Flip
Horizontal. You have just made the button with which you'll rotate the
rocket counter-clockwise. Place the button on the left of the arrow buttons so
that you have a nice panel for steering and moving the rocket spaceship.
Setting up the buttons for ActionScript use
Before going on, you must prepare the buttons so that you can tell them what
to do via ActionScript. If you already know how to do this, just skip this
section. If not, please continue.
You will now give each button its unique Instance
name. This name is necessary if you are going to control your
buttons via ActionScript. This has nothing to do with the Library name -
arrow button, rotation button, my cool movie clip,
etc.
35. Select, let's say, the up arrow button on stage. Now go
to the Properties panel again, to its left side and find the input box with
"Instance name" written inside it.
36. Click in the field, write moveUp and press
Enter to confirm.
REMEMBER You have to respect the following rules
when giving Instance names to movie clips or buttons:
1. Special characters, as spaces, #, $, %, !, & and such are
not allowed. If you need to have two words within the Instance name, separate
them with a underscore, as in blue_button. However, that
isn't recommended practice. You'll see that in ActionScript, capital letters are
used to denote different words within an Instance name, as in blueButton. This is just Flash folklore :) But use it, as it
is the standard way of naming things in Flash.
2. So, you have to use letters and numbers only for your Instance
names. These characters are more than enough for any number of Instance names in
your flash projects. Note one important thing: an Instance name can have a
number inside it, but NOT at the beginning. So, coolThing4 is a proper Instance name, while 4coolThing is NOT.
3. ActionScript is case-sensitive. That means that Instance name,
for example, blueMovieClip is NOT the same as bluemovieclip, BlueMovieClip or blueMOVIEclip.
4. Instance names are unique. You cannot use the same Instance
name twice.
5. The Instance names you gave to your movie clips and/or buttons
must be the same throughout your Flash movie. If you wish to do something with a
button or movie clip by using ActionScript, you must use the exact same Instance
name as you wrote in the Properties panel. Flash can't figure it out by itself
if you make a mistake and misspell it or write a capital letter where there
isn't one, etc.
6. You can assign Instance names to movie clips, buttons and input
or dynamic text fields. Graphic symbols and simple drawings can't have Instance
names.
That being said (and learned :), let's move on!
37. Do this for each of the buttons: click on each button
and give it an Instance name.
Click on the down arrow button once, go to the Properties panel, enter
moveDown as Instance name and hit Enter. Call the
right and left arrow buttons moveRight and moveLeft,
respectively.
Also, call the right circular arrow button (the one with the arrow pointing
clockwise) rotateCW. Call the other one rotateCCW.
Now you have assigned an Instance name to each of the buttons on stage. You
can proceed to rocker space ship creation, and, finally ActionScript coding.
Creating the rocket spaceship movie clip
38. Call the layer with the buttons controls and
lock it. Create a new layer and call it spaceship.
39. Draw a rocket spaceship. Create anything you like.
The style and looks aren't important, because the goal of this tutorial for
you is to learn how to make an user interface and write ActionScript code to
control the movement of a movie clip.
So, the above drawing is completely fine :-)
40. Select the whole drawing.
41. Press F8 (or select Modify >
Convert to Symbol) to make a symbol out of the raster graphics.
Call the new symbol rocket space ship. Before clicking OK, there are
two important things that need to be made here.
First, change the Type selection to Movie clip, because it has probably
stayed on Button from before.
Second, in the Registration diagram, click the central little square so that
it becomes black (see it on the image below). This is where you define the
registration point of a movie clip. This point is the place around which all
transformations will be done - rotation, deformations, position, movement,
etc.
Click OK. You can see in the image beneath that the registration point is in
the center of the movie clip. Of course, if you wanted, you could have chosen
any other in the diagram, but I think the central one will be fine in this
case.
42. With the movie clip still selected, go to the left side
of the Properties panel and give it an Instance name. This is also necessary in
order to control the movie clip with ActionScript.
Call it rocket and hit Enter.
43. Lock this layer. Create a new one above it and call it
actions.
There! Now you're ready to put in some ActionScript and make the rocket space
ship move in response to clicks on buttons!
Writing the ActionScript that powers the rocket space ship
44. Click the first (and only) keyframe of the
actions layer to select it.
45. Select Window > Actions or press
F9 to open up the Actions panel.
Enter in the following code:
moveUp.onPress = function() { rocket._y =
4; }
46. Press Ctrl+Enter (or select
Control > Test Movie) to test your movie. Click the up arrow
button. You will see your spaceship jump up to Y coordinate 4. If it doesn't
work, check that you really gave that button the Instance name moveUp
and that you wrote it exactly like that in the ActionScript code.
Try clicking again, it won't move. It will stay there. Why is this so? It is
perfectly ok, and you will know the reason for this in a moment. Let me explain
you the code now, step by step.
The line
moveUp.onPress = function() {
means that a function will run (will be executed, will be put in
motion, etc) when the onPress event for the moveUp
button happens. This particular event happens when a user has pressed the mouse
button - note that this is different from the "standard" click, when the mouse
is pressed and released (seldom a user presses her
mouse and holds onto it, unless she is dragging something).
So, you understood that a function will execute when the mouse is pressed
over the moveUp button. But which function? A function is made up
of code found between its curly braces: { and },
respectively. So, every line of ActionScript code between the function's curly
braces will be executed once the moveUp button is pressed. In this
case, the code that runs is a single line (it can be as many lines as needed,
there isn't any limit on how much code you can put in a fucntion):
rocket._y = 4;
So, this line sets the _y property of the rocket
movie clip to 4. The _y property of an object in Flash is its
vertical position (Y coordinate) on the stage. Look at the diagram below to see
how this works.
So, as you see, the _y property (vertical position) of an object
(be it a movie clip, button, or anything else) in Flash is bigger the further
the object is away from the top stage edge. Once it moves above the stage top
edge, its _y property becomes negative (for example: -30 or - 17.4,
etc). The horizontal position of an object is defined by its _x property. This
property is the same as in a standard coordinate system: right of the stage's
left edge (where X coordinate equals 0), the property has positive values (1,
12.1, 300, 452.7, etc), and at the left of it it is negative (-7, -14.5, -80,
etc).
So, when the line of code rocket._y = 4; executes (when you
click on the moveUp button, in this case), it places the
rocket movie clip on the Y coordinate 4. You can click agan and
again, but nothing different will happen. The same command is repeated: the
placement on coordinate 4 on Y axis. So what must be done in order to move the
rocket movie clip upwards continually?
Change your code as follows (the line that needs to be changed is shown in
bold):
Test your movie (Ctrl+Enter). Click on the moveUp button
repeatedly. Your rocket spaceship will move upwards. It's because of the line
you changed. It says that the value of the _y property of the
rocket movie clip should equal this same value minus 4. Why minus? Beacuse if
you want to move it upwards, you must diminish the value of _y.
Look at the diagram again to remind yourself of this Flash characteristic. So,
the execution goes like this: let's say that you placed the rocket spaceship
somewhere in the middle of the stage and its starting _y value
equals, for example, 140 (you can check this value if you click on the spaceship
move clip while working in Flash and look it up in the Properties panel (on the
left side, the Y field). So, upon the first press of the button it would go like
this:
rocket._y = rocket._y - 4;
rocket._y = 140 - 4;
rocket._y = 136;
So, when you click the second time, the current Y position of the rocket is
136. So, this second click will produce the following:
rocket._y = rocket._y - 4;
rocket._y = 136 - 4;
rocket._y = 132;
So, when clicking again and again, the _y property of the rocket space ship
would be 128, 124, 120, etc. It is simple, isn't it? But let's simplify the code
a little bit. Change it to this:
moveUp.onPress = function() { rocket._y -= 4; }
Test your movie and start clicking on the button for moving the spaceship
upwards and you will see that everything has stayed the same. In fact, the code
changes you made accomplish exactly the same thing as the line of code that was
written before that. The subtraction assignment operator (-=)
subtracts the value on its right side (4 in this example) from the value on its
left side (the _y property of the rocket movie clip)
and the result of the operation becomes the left side property's new value.
The same thing as before happens again. Let's say that, for example, the
spaceship's starting _y value equals 40.
The line
rocket._y -= 4;
is the same as
rocket._y = 40 - 4;
so the new rocket._y value would equal 36.
Isn't that easy? Flash is so cool :) Ok, you'll now make the rocket move via
the moveDown button. So, add this piece of ActionScript beneath the
current code:
moveDown.onPress = function() { rocket._y
+= 4; }
Test your movie and click on the button to move the rocket space ship down.
Click repeatedly on it. It will move down! The same thing happens as with the
previous button, just in the opposite direction.
The line
rocket._y += 4;
is the same as
rocket._y = rocket._y + 4;
Therefore, if the starting Y coordinate of the rocket spaceship is for
example 200, the calculation would go on like this:
rocket._y = rocket._y + 4;
rocket._y = 200 + 4;
rocket._y = 204;
Upon the next press of the mouse it would be 208, then 212, etc.
So, i suppose you know how to move your spaceship left and right. Put this
piece of code below the current one:
This was the code for the right button. For the left one, put this:
moveLeft.onPress = function() { rocket._x
-= 4; }
Ok. You can try these buttons, they will work with no problems at all. The
ship will move nicely. Wait a minute... this is annoying and boring... having to
click repeatedly to move it. Wouldn't it be a lot more convenient to just press
the button and have the rocket cpaceship move, and release the button to make it
stop? Most certainly it would. So, I will explain you how to do exactly
that!
Making the rocket spaceship move continuously with a press of a button
I will show you how to do this for one button, and you will easily apply this
technique to all the others. So, change the code for the button with the arrow
pointing up to this (again, the change is shown in bold):
Select Control > Test Movie, press the up arrow button
and see the ship nicely move, without you having to click again on it. But if
you release the button, the ship still moves. I will tell you how to resolve
this in a moment, but first, let me explain you the code that makes the
continuous movement possible, with just one click of the mouse.
You know the explanation for the first line from before: a
function is executed when an onPress event happens for
the moveUp button. So, every ActionScript command between the
function's curly braces is executed. And what's inside this time? Another
function tied to another kind of event. The ActionScript line
rocket.onEnterFrame = function() {
does the following: when the onEnterFrame event for the
rocket movie clip happens, the function (everything
between its curly braces, that is) gets executed.
When does the onEnterFrame event happen? This specific kind of
movie clip event is happening as many times per second as the movie frame rate
is set up to. Select Modify > Document and the Document
properties dialog box will open. There is an input field named "Frame rate".
This is where you define the speed at which the animation in your Flash document
will perform. The higher the frame rate, the faster your movie will be.
So, in case of this example you're currently working on, there is the default
speed of 12 fps. This means that the onEnterFrame event will fire
12 times per second. There is a function associated with the
onEnterFrame event. Therefore, every line of code between the
function's curly braces will get executed 12 times per second. And that
ActionScript code is:
this._y -= 4;
Why is there a this keyword instead of rocket, the
Instance name of the spaceship movie clip, you may well ask? Because, since the
onEnterFrame event belongs to the rocket movie clip
(rocket.onEnterFrame), the keyword this denotes the
movie clip itself. If you wrote rocket instead of
this, Flash would look for another rocket movie clip situated
inside the original rocket movie clip. It would find nothing, and nothing would
happen. Clear? :)
I assume you get the rest - the subtraction assignment operator does the same
thing as before. Now, you should make your rocket space ship stop once a user
releases her mouse button. So, append your ActionScript code with the
following:
Test your movie now, press the button, hold it a little and release it. You
will see that the ship is going and stopping, as per your wish :)
The above piece of ActionScript code is simple: you say that a
function will execute when the onRelease event is
fired for the moveUp button. The onRelease event fires
when a user has released the mouse button after pressing it. And inside the
event's associated function is a line that simply deletes the
rocket movie clip's onEnterFrame event started when
the user pressed the button. You have to do this, because the
onEnterFrame event goes on forever if you don't stop it. So, always
remember to delete a onEnterFrame event (if you don't need it
anymore, of course). That way, you take load off the user's CPU.
That's it! You just need to make the rotation buttons function, which is
really easy. The principle is the same, you only change the Instance names of
the buttons and the property being used. The same applies for other movement
buttons.
So, for the clockwise rotation button you will input this code:
As you can see, the only thing that's changed (besides rotateCW,
the name of the appropriate button) is the property - it is
_rotation. The _rotation property refers to the
rotation of an object in Flash expressed in degrees.
The rotation of your spaceship at the beginning is 0 degrees. So, the
calculation for the change of the _rotation property would go like
this:
The line this._rotation += 3; is the same as
this._rotation = this._rotation + 3;
therefore,
this._rotation = 0 + 3;
this._rotation = 3;
at the next firing of the onEnterFrame event, this will execute
again, therefore yielding
this._rotation = this._rotation + 3;
this._rotation = 3 + 3;
this._rotation = 6;
etc.
At the other button, you would just change the button's Instance name and the
operator: you would put -= instead of += to make your
space ship rotate counter-clockwise.
That's it! You learned a lot from this tutorial, about controlling movie
clips with ActionScript. Below, you can download the source file for this
tutorial!
