Move the Object using the arrow keys

Date: 10.2.2007, 21:37    Total views: 51141

This, step by step flash lesson, will show you how to move any object using the action script code and arrows key on the keyboard. Using this lesson, you will also learn how to use aligned panel to align any object with the background, how to convert any object into a Movie Clip Symbol, how to create instance name and much more! You can use this animation when you need to have control over some object.


Example:



Step 1

Open Flash and start a new project with dimension of 400 X 300, set the frame rate at 36 fps, set the background colour as whatever you like, I used white for this example. See the picture below.





Step 2

Find any picture on internet or somewhere, open it in some of graphic programs (photoshop....), and set its dimension to 400x300px. After that, go in flash, choose File > Import > Import to Stage, to Import it into the Flash stage.

Step 3

While the picture is still selected, go to the Align panel (Ctrl+K), and do the following in the Align panel:

a) Make sure that the Align/Distribute to Stage button is turned on,
b) Click on the Align horizontal center button and
c) Click the Align vertical center button.



Step 4

Take the Selection Tool (V) and double click on layer 1 to rename its name in picture. After that, create a new layer above layer picture and name it object.



Step 5

Draw, or Import any object. I will use balloon for this example.



Step 6

Take the Selection Tool (V), select the object and press F8 key (Convert to Symbol) to convert this object into a Movie Clip symobl. See the picture below.



Step 7

While the object is still selected, go to the Properties Panel (Ctrl+F3) to its left side. You will find the Instance name input field there. Call this Movie Clip: object_mc. See the picture below.



Step 8

Create a new layer and name it text. After that, take the Text Tool (T) and in the Properties Panel (Ctrl+F3) below the stage, select the following options:

a) Select a Dynamic Text field.
b) Select a generic font family: sans , for example.
c) Choose 14 as font size.
d) Select black as color.
e) Select Single line for your textfield (6).



After that, click and drag out a text field on the stage. See the picture below.



Step 9

Then,in the Properties Panel for type (call this Dynamic Text) information_txt. See the picture below.



Step 10

Create a new layer and name it Action. Select it, click on the first frame, press F9 or select Window > Actions to open the Actions panel.

After that, enter the following ActionScript code inside the Actions panel:

information_txt.text = "Use your arrow keys to move the balloon!";
var speed:Number = 4;
object_mc.onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {
this._x = this._x+speed;
} else if (Key.isDown(Key.LEFT)) {
this._x = this._x-speed;
}
if (Key.isDown(Key.UP)) {
this._y = this._y-speed;
} else if (Key.isDown(Key.DOWN)) {
this._y = this._y+speed;
}
};

Action Script explanation:

1.information_txt.text = "Use your arrow keys to move the balloon!";
1. Display instructions on the screen

2 .var speed:Number = 4;
2. Set the speed for the object

3. object_mc.onEnterFrame = function() {
3. Capture the onEnterFrame event of the object_mc movie clip

4. if (Key.isDown(Key.RIGHT)) {
this._x = this._x + speed;
} else if (Key.isDown(Key.LEFT)) {
this._x = this._x - speed;
}

4. Move horizontally if the RIGHT or LEFT arrow keys are pressed

5. if (Key.isDown(Key.UP)) {
this._y = this._y - speed;
} else if (Key.isDown(Key.DOWN)) {
this._y = this._y + speed;
}
};

5. Move vertically if the UP or DOWN arrow keys are pressed

We're done!

Test your Movie (Ctrl+Enter).

Download source file (.fla)