Skip to Content

How to animate with Actionscript

Author: Bill Trikojus

1

Document setup

 
2

EnterFrame handler

 
3

Random effects

 
4

Add button functionality

 
5

Experiment

 

 

1

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;
}

 

2

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.

 
3

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...

 
4

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);
}

 
5

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.

 

bulletBack


Share

Like this? Click a link below to share it...


Subscribe and Download

Subscribe to the Swinburne Faculty of Design Podcasts

Comments

2008-04-09: Richard Matthews said:
Very good tutorial for the layman programmer

Do you sell cd????/ iam interested in buying


2008-04-09: Bill Trikojus said:
No CD I'm afraid but many of the video are available to download for free via our podcast.


cheers

Post a comment

Garbage posts and SPAM will be deleted.

* Name:
* Email: (will not be made public)
* Comment:
* Reply Notification: