04 August 2009

AS3 Loading Animation Tutorial

I've seen many loading animations people selling via Envato Flash Marketplace and other flash stock websites at prices like $1, $2 or more. Some of them are really great and some of them are just regular. Truth is, you can make simple loading animation in minutes and enhance it as you like and I'm going to show you how in this step-by-step tutorial.


step 1:

Create new Flash document. Choose File _ New... and than Flash File (ActionScript 3.0). Take a look at how finished loading animation will look like. It will display 6 rectangles and we will simulate 'color movement'.






step 2:

We need only one movie clip, so go to Insert _ New Symbol (or use keyboard shortcut CTRL+F8, choose Movie Clip and name it 'rectangle'. While in edit mode choose Rectangle tool, set black color for stroke and yellow for fill #ffff00. Draw any rectangle on stage, select it and type these setting width:20 height:50 X:0 and Y:0 in Property panel.

Now, on movie clip's timeline, right-click on first frame, copy it and paste it on second frame. Do the same for frames 3, 4, 5 and 6. Get back to frame 2, deselect shape and select only fill. Choose slightly brighter yellow color #ffff33. Continue same thing, for frame 3 fill set #ffff66, for frame 4 #ffff99 for frame 5 #ffffcc and finally for frame 6 use white #ffffff.

as3 loading animation tutorial
step 3:

We are done with our movie clip, go back to scene 1. One more things, rectangle movie clip is now in library. Right click on it and choose Linkage. Set properties like image shows and click OK.

as3 loading animation tutorial
step 4:

All we need to do now is write some AS3 code. Click F9 on keyboard to open Actions panel for first frame of main timeline. Paste next code:



var s1:rectangle = new rectangle();
addChild(s1);
s1.x = 200;
s1.y = 50;

var s2:rectangle = new rectangle();
addChild(s2);
s2.x = 170;
s2.y = 50;

var s3:rectangle = new rectangle();
addChild(s3);
s3.x = 140;
s3.y = 50;

var s4:rectangle = new rectangle();
addChild(s4);
s4.x = 110;
s4.y = 50;

var s5:rectangle = new rectangle();
addChild(s5);
s5.x = 80;
s5.y = 50;

var s6:rectangle = new rectangle();
addChild(s6);
s6.x = 50;
s6.y = 50;

s1.addEventListener(Event.ENTER_FRAME, onFrame1);

function onFrame1(evt:Event) {
s2.gotoAndPlay((s1.currentFrame+1)%6);
s3.gotoAndPlay((s1.currentFrame+2)%6);
s4.gotoAndPlay((s1.currentFrame+3)%6);
s5.gotoAndPlay((s1.currentFrame+4)%6);
s6.gotoAndPlay((s1.currentFrame+5)%6);
}



Code is simple. Variables s1 .. s6 are our rectangles. We add them to Stage with addChild and we set positions using x and y movie clip properties, since rectangle class extends Movie Clip class, remember Linkage step?

Finally we attach onFrame1 function to s1 instance on enter frame event. Formula (s1.currentFrame+i)%6 will give us values for i=1, 2, ..., 5 which means all rectangles will have different colors during current frame - and that's how we simulate color movement needed for loading animation.

Feel free to improve appearance and play with the code. Final swf is only 805 bytes.
That's all. Easy, right?


*_*

2 comments:

Frank said...

Correct me if I'm wrong here, but if you have the rectangle's animation looping in your library clip then you don't need to gotoAndPlay on every ENTER_FRAME event?

At the very least you should maybe add:

s1.removeEventListener(Event.ENTER_FRAME, onFrame1);

to the end of your onFrame1 function so the function only fires once.

flanture said...

Thank you Frank, you are right, your line to remove Event Listener can be added

This is just one way of doing it with a little bit of redundancy

 

template by blogger templates