Document setup

EnterFrame handler

Random effects

Add button functionality

Experiment

Document setup

OK I want to show you how to animate an object with actionscript.

This is what you will be making -

Download source

Load Flash. Set the frame rate to 21. Draw a small circle on the stage and convert it to a movieclip, Give your movieclip an instance name of ball. Make a new layer and name it actions. Put this action in the first frame

//this sets the initial x position of our clip
ball._x=50;

//this creates an enterFrame action that occurs every frame (even though our main timeline only has 1 frame)
ball.onEnterFrame=function(){
//this moves our clip 5 pixels to the right every frame
this._x=this._x+5;
}

EnterFrame handler

Test your movie. Too easy right? OK lets refine the code a little. In the enterFrame handler, I want you to change

this._x=this._x+5;

to

this._x+=5;

Test your movie again and you will see that both lines of code do exactly the same thing but the later is neater.

OK now let's stop our clip when it gets to a certain point. Change the enterFrame part of the code to this -

ball.onEnterFrame=function(){
//this moves our clip 5 pixels to the right every frame until it reaches a certain point
if (this._x<300){
this._x+=5;
}
}

Test movie again. Starting to see how this all works? Of course, what you have just learnt applies to scale, alpha, rotation etc. For example, change the entire code on the frame to

ball._x=50;
ball.onEnterFrame=function(){
//this scales our clip along the x axis 5% every frame until it reaches a certain width
if (this._xscale<500){
this._xscale+=5;
}
}

Test your movie.

Random effects

Or perhaps you might like to make a random effect? Change the actions to -

ball.onEnterFrame=function(){
//this changes the x scale of our clip every frame to a random amount between 0 and 500
this._xscale=random(500);
}

Once again, test your movie.

You can get some interesting effects with randomness. Change the actions to -

ball.onEnterFrame=function(){
//this makes the clip go crazy
this._xscale=random(500);
this._yscale=random(500);
this._alpha=random(100);
this._x=random(500);
this._y=random(400);
}

test movie again

Tell me that wouldn't get annoying after a few seconds...

Add button functionality

OK now lets control our clip from a button. Draw a rectangle on the stage and convert it to a button. Give your button an instance name of button1. Remove all the actions on frame 1 and add these -

button1.onRelease=function(){
_root.ball._xscale=random(500);
_root.ball._yscale=random(500);
_root.ball._x=random(500);
_root.ball._y=random(400);
_root.ball._alpha=random(100);
}

Test your movie and click on the button a few times. OK now lets make the clip scroll to different positions.

Remove all the actions on frame 1 and add these-

ball._x=50;
ball.onEnterFrame=function(){
//this variable stores the current x position of the clip
cX=this._x;
//this variable stores the distance between the clips current x position
//and where we want it to go
//I am setting the targX variable in the root so that it is easy to target with our button
difX=cX-_root.targX;
//this moves the clip 1/5 of the distance every frame.
//Because the difference between the clips current location and its destination
//will get smaller each frame, so will the amount the clip travels each frame.
//This is what makes the clip appear as though it "eases into" it's final destination
setProperty(this, _x, cX-(difX/5));
//check the flash manual to learn more about the setProperty action
}

button1.onRelease=function(){
//this sets the targX variable to a random number between 0 and 500
_root.targX=random(500);
}

Experiment

Test your movie and click the button a few times. Pretty cool huh? You can use this formula on the movieclip to get some great effects. Try (without cheating) adapting it to effect the clips x and y scale. You should end up with something like this -

_root.targXscale=50;
_root.targYscale=200;
ball.onEnterFrame=function(){
cXscale=this._xscale;
cYscale=this._yscale;
difXscale=cXscale-_root.targXscale;
difYscale=cYscale-_root.targYscale;
setProperty(this, _xscale, cXscale-(difXscale/5));
setProperty(this, _yscale, cYscale-(difYscale/5));
}
button1.onRelease=function(){
_root.targXscale=random(500);
_root.targYscale=random(500);
}

Test your movie. You will notice that even if you click the button quickly the scaling of the clip never jumps - imagine trying to do that with tweened animation!

This code works fine and is easy to read but if you want to clean it up change it to

//set the starting value for 2 variables
targXscale = 50;
targYscale = 200;
ball.onEnterFrame = function() {
//smooth scaling code
this._xscale-=(this._xscale-targXscale)/5;
this._yscale-=(this._yscale-targYscale)/5;
};
button1.onRelease = function() {
//set the 2 vars to random values
_root.targXscale = Math.random()*500;
_root.targYscale = Math.random()*500;
};

which does exactly the same thing.

OK that's it. Have fun - experiment with it.