Create a motion tween using actionscript - Flash(AS2)

This is a fairly basic tutorial, to show you how some basic actionscript can be used to alter a movie clips position. Your final result (in about 5 mins!) will be something like this:

Nothing fancy, but it does its job. Well, let us begin!

STEP 1

First of all as always, we need to set up the stage. Create a new actionscript 2 file and set the framerate to 31. Rename the first layer to ’stuff’ and create a new layer called ‘actions’. Lock the actions layer and select the stuff layer. Select the shape tool and draw a shape on stage.

As always I went all out and drew a blue square, again.

Select the square and press f8 top convert to symbol. Select movie clip and call it MC_square. In the properties panel set the instance name to MC_square. Lock the stuff layer, and select the actions layer.

STEP 2

Now we add the actionscript. Now the first thing we bneed to do is to create a variable to store a numbered value. This will be used to constantly move MC_square, and i’ll show you how. Press f9 to enter the actions panel and enter the following code:

var i:Number = 0;

This creates a variable called ‘i’, which has a ‘Number’ value, currently set to ‘0′.

STEP 3

Now we need to add the function to control the counter and move our square. Enter the following code into the actions panel:

onEnterFrame = function(){
if(i<124){
i++;
MC_square._x +=2;
}
}

Now I will explain the code.

The first line listens for an event, in this case entering this frame, and then runs the function ( ‘onEnterFrame = function(){’ ). The next line is checking if the value of ‘i’ is less than 124. If it is less than 124 ( ‘if(i<124){’ ), then flash will run the next lines of code. ( ‘i++’ ) increases the value of ‘i’ by 1 every time this function runs, and ( ‘MC_square._x +=2;’ ) will increase the squares x-position by 2 every time. The following brackets close the ‘if’ statement, and then close the function. Once ‘i’ is equal to 124, the movement will stop.

STEP 4

Hit Ctrl + Enter, ta-da! Sorted.

Signing Off,

The Dude

Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!

Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.

Tags: actionscript, basic, flash, The Tutorials