Basic Animation Via ActionScript

Written by: Billy T.

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.

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

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;

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 -

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

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

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

Test your movie.

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

onClipEvent (enterFrame) {
        //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 -

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

test movie again

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


Enter your email address: Subscribe Unsubscribe	© 2000-2007 actionscript.org! All Rights Reserved. Read our Privacy Statement and Terms of Use... Our dedicated server is hosted and managed by WebScorpion Webhosting.

Spread The Word / Bookmark this content