Written by: Billy T. [email:billyt@bigpond.net.au]
Time: 15 minutes
Difficulty Level: Beginner
Requirements: Flash 5 or higher
Topics Covered: Dynamic Motion Creation (Animation) using ActionScript.
Assumed knowledge: Button and Clip Events and handlers, simple variable applications.

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

Load Flash. Set the frame rate to 21. Draw a small circle on the stage and convert it to a movieclip, Give your movieclip this action.

[as]onClipEvent (load) {
        //this sets the initial x position of our clip
        this._x = 50;
}
onClipEvent (enterFrame) {
        //this moves our clip 5 pixels to the right every frame
        this._x = this._x+5;
}
[/as]

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

[as]this._x=this._x+5;
[/as]

to

[as]this._x+=5;
[/as]

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 -

[as]onClipEvent (enterFrame) {
        //this moves our clip 5 pixels to the right every frame until it reaches a certain point
        if (this._x<300) {
                this._x += 5;
        }
}
[/as]

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 clip to

[as]onClipEvent (load) {
        //this sets the initial x scale of our clip
        this._xscale = 50;
}
onClipEvent (enterFrame) {
        //this scales our clip along the x axis 5% every frame until it reaches a certain width
        if (this._xscale<500) {
                this._xscale += 5;
        }
}
[/as]

Test your movie.

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

[as]onClipEvent (enterFrame) {
        //this changes the x scale of our clip every frame to a random amount between 0 and 500
        this._xscale = random(500);
}
[/as]

Once again, test your movie.

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

[as]onClipEvent (enterFrame) {
        //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);
}
[/as]

test movie again

Tell me that wouldn't get annoying after a few seconds... Let's see some more examples over the page...

OK now lets control our clip from a button. Remove all the actions on our clip and give it an instance name of "ball". Draw a rectangle on the stage and convert it to a button. Give your button this action -

[as]on (release) {
        _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);
}
[/as]

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

Give your ball clip this action -

[as]onClipEvent (load) {
        //this sets the initial target x position for our clip
        _root.targX = 50;
}
onClipEvent (enterFrame) {
        //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
}
[/as]

and your button this action -

[as]on (release) {
        //this sets the targX variable to a random number between 0 and 500
        _root.targX = random(500);
}
[/as]

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 on the clip -

[as]onClipEvent (load) {
        _root.targXscale = 50;
        _root.targYscale = 200;
}
onClipEvent (enterFrame) {
        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));
}
[/as]

and this on the button -

[as]on (release) {
        _root.targXscale = random(500);
        _root.targYscale = random(500);
}
[/as]

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 will tweened animation!

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

You can download the source file for this tute here (not that you will need it...)

cheers