Actionscript Animation Basics
To many beginners Flash animation consists of using the timeline to create shape tweens or motion tweens. This method of animation is all well and good however when it comes to creating advanced websites animation with actionscript is the only way to go.
First we will set up our Flash document. Open up Flash and create a new document (File > New…). Now go down to the Properties window (it should be on the bottom of your screen.) and change the frame rate to 30 to ensure our animation look smooth. For this document we will use the standard 550pixel x 300pixel stage size.
Now create a red circle on the stage, double click on it and go up to Modify > Convert to Symbol (or press F8) to make this circle a movie clip. Name it redBall and make sure that movie clip button is checked.
Now we have a redBall movie clip on the stage. One last thing then we can animate this baby.
Select the redBall on the stage and go down to the properties window, on the left there is a text field under the word Movie Clip this is were we give the movie clip an instance name. An instance name is basically how we will refer to our movie clip within actionscript. So type redBall into that field and hit enter.
Now we are ready to break in to actionscript.
All of our actionscript for this file will be contained on the first frame (and only the first frame) of this document. But how will my ball move across the screen? You ask. Instead of creating a keyframe to tell the ball to move to a new point we will be telling the ball to move through code.
The first step in writing actionscript is to create a new blank layer and name it actionscript. Click on the first frame in the actions layer and open up the actionscript panel. It is under Windows > Development Panels > Actionscript (or press F9).
Select the first frame and type
this._x+=1;
this._y+=1;
this._xscale+=1;
this._yscale+=1;
}
It is important to note that this code is being placed on the first frame, in other words it is a frame action. This can be a confusing concept to people new to Actionscript programing.
Press apple+return or ctrl+return to test the movie and the ball will move 1 pixel down and 1 pixel over while increasing its scale 1 pixel in width and 1 pixel in height.
click to view animation
Lets break down what this code is doing.
+= is actually shorthand and in this case it means the redBall at point x = the redBall at point x+1. A simpler example is x+=y which really means x = x+y
First we are taking the instance of the redBall and as we enter the frame we are creating a function. A function is a group of statements that we define to do something. In this case move the redBall 1 pixel in the x and y direction while making the xscale(width) yscale(height) expand by 1 pixel. Wow it works but wait a minute what purpose does this serve? Lets create a button to make this a bit more interactive.
Our button is actually going to be a movieclip, hang on Flash has buttons; we are going to use a movieclip because they offer more flexibility and control with what we can do. So lets create a square on stage and press F8 to convert this to a movieclip. Give the square an instance name of mcButton. Now click on the first frame and go to the actions window again (F9). Type in
mcButton.onEnterFrame = function(){
redBall._x +=10;
redBall._xscale+=10;
redBall._yscale+=10;
if(redBall._x >= 300){
redBall._x = 50;
redBall._xscale=100;
redBall._yscale=100;
}
}
}
Test the movie.
it should look something like this
So what we are doing here is on the release of the movieclip mcButton we are creating a function. Within this function we are creating another function on the same button only this time we will send it the event handler onEnterFrame which means flash will continually run this function at the frame rate of the flash movie (30fps). All that is left is to tell the Flash movie what to do with the addition assignment operator (+=). So we will first have the redBall add itself plus 10 along the x axis. We will do the same thing with the xscale and yscale (or width and height) of the redBall. Finally we have created an if statement which is what causes the redBall to loop. Our if statement reads like this if redBall along x axis is greater than or equal to 300 then set redBall._x =50, set redBall_xscale=100, and redBall._yscale=100.
Ok now lets use this same technique to create a roll over animation for out button. First we will look at the code and break it down line by line.
this.onEnterFrame=function(){
this._xscale+=2; this._yscale+=2; if(this._xscale>=150){ this._xscale=150; this._yscale=150;
}
}
} mcButton.onRollOut=function(){
this.onEnterFrame=function(){
this._xscale-=2; this._yscale-=2; if(this._xscale<=80){ this._xscale=80; this._yscale=80;
}
}
}
here is an example of the rollover button
It isn’t going to win any design awards but it does work.
What we are doing here is first creating a function on the rollover of mcButton, this in the code is shorthand referring to mcButton which is at the top of this bit of code. Next we have to create another function that will call this function at the frame rate of our movie. 30fps. What we are going to tell the mcButton to do is have the xscale and yscale of the button grow by 2 pixels while the mouse is rolled over the button. In order to stop the growth of the button we need to use an if statement and tell it that if if the xscale of the mcButton is greater than or equal to 150 then set the xscale and yscale of the mcButton to 150. To create the roll out effect to the same thing as above but reverse the values. This should help you create the basics on motion in actionscript.
Next we will cover the Flash designer’s secret weapon, which turns a simple flash animation into a complex one.