Flash Explained

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.

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.

Top of page

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.

Top of page

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.

Top of page

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.

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.

Top of page

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!

Top of page

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):

moveUp.onPress = function() {
rocket._y = rocket._y - 4;
}

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:

moveRight.onPress = function() {
rocket._x += 4;
}

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!

Top of page

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):

moveUp.onPress = function() {
rocket.onEnterFrame = function() {
this._y -= 4;
}
}

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:

moveUp.onRelease = function() {
delete rocket.onEnterFrame;
}

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:

rotateCW.onPress = function() {
rocket.onEnterFrame = function() {
this._rotation += 3;
}
}

rotateCW.onRelease = function() {
delete rocket.onEnterFrame;
}

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.

Download the source FLA file for this tutorial.

Comments

Submit a comment