First, to set the stage here, I have drawn a circle, converted it to a movie clip, and set the linkage to “circle”. If you do not know how to setup the linkage for an object so that we may use it ActionScript, please refer to my previous tutorial - responding to mouse clicks.
The first thing I need to do is place the object on the stage, as I explained in placing an object on the stage.
1 2 3 4 | var hero:circle = new circle(); hero.x = 5; hero.y = 5; addChild(hero); |
Next, we setup an event listener to the stage that will run once per frame:
6 | stage.addEventListener(Event.ENTER_FRAME, moveCircle); |
That event listener calls a function called moveCircle, which we create next:
8 9 10 | function moveCircle(event:Event):void { hero.x += 1; } |
What this function does is, as you can see on line 9, is find out what the x property is of our object, and then add 1 to it. What that means is that every time our flash movie runs a frame, this function runs and moves the circle to the right 1 pixel, because the x property increases by 1 each time. If you subtract from the x property, your object moves to the left. If you use the y property instead of x, your circle can be controlled vertically. Adding to y will move the circle down, subtracting will move it up.
That is all there is to the basics of frame-based animation. There are other ways to animate objects that I will show you in later tutorials.
Click the download link below to obtain the source .fla for this simple example.