Simple AS3 Preloader Tutorial

May 2nd 2008
One Comment
respond
trackback

Preloaders are a big part of flash sites, just look around the internet today at some flash sites and you'll see some really creative ideas. Although I am surprised some of these creative preloaders don't need a preloader to load themselves as their is so much animation going on! Not that I am complaining, I think they are excellent and really enhance the flash experience.

Not so creative In this Preloader unfortunately but good enough to get the job done I think. So in this tutorial I'll show you how to create a very basic preloader using Flash CS3 and Actionscript 3. So lets open up flash and get started!

Step 1

Start by creating 3 new layers on your timeline and call them Actions, Loader and Stage. Insert a Keyframe on the second frame of the Actions and Stage layers. Now select the Loader Layer and insert a Frame, your timeline should now look like this;

Step 1 preloader

Step 2

Select the First Frame of the loader layer and select the Rectangle Tool. Set the Fill Color to #FFFFFF and the Stroke Color to #CCCCCC. Now hold down shift and draw a small rectangle on the stage.

Step 2 preloader examlple

Step 3

Highlight the Rectangle you have just created, Select the Selection Tool (V) and Right Click the center of the rectangle and select Copy. Now right click away from the rectangle and select Paste, repeat this another 3 times. You now should have 5 rectangles on the stage, align them on your stage so that they look like this;

Step 3 preloader examlple

Step 4

Now Highlight all of the rectangles and Right Click and select Convert To Symbol, give it the name Loader_mc and make sure Movie Clip is selected and press Ok.

Step 4 preloader examlple

Step 5

Your rectangles should now have a Blue Border around it, indicating that its now a Movie Clip. Scroll down to the Properties Panel at the bottom and give it the instance name loaderAnimation.

Step 5 preloader examlple

Step 6

Now we are going to create the pre-loader animation, to do this first Double Click on the movie clip you have just created. We now should be inside the loader_mc Movie Clip with a brand new timeline. Go to Frame 25 Right Click and select Insert Keyframe. Now go onto the Stage and click off the Stage on the Grey Area then click the Center of the First Rectangle and change the Color Fill to #0099FF. Select the First Frame of the layer and hold down Shift and select Frame 25, highlighting all the layers. Right Click and select Create Motion Tween, finally Press Enter to test that and the Rectangle should fade from white to blue.

Step 6 preloader example

Step 7

Go to Frame 50 and Insert a Keyframe, now click off the stage in the Grey Area and select the Second Rectangle and change the Color Fill to #0099FF. Repeat this step for all the Rectangles Inserting a Keyframe every 25 Frames. Press Enter to test it and all the rectangles should fade in one after the other.

Step 7 preloader examlple

Step 8

Click the Light Blue Arrow below the Layers Panel to go back to our main timeline. Now click on the First Frame of the Actions layer and Press F9 to open up the Actions Panel. Copy and paste this code below.

addEventListener(Event.ENTER_FRAME, loading);
function loading(event:Event) {
trace("loader Working");
var bytestotal = stage.loaderInfo.bytesTotal;
var bytesloaded = stage.loaderInfo.bytesLoaded;
var rectangle = Math.round(bytesloaded*100/bytestotal);
loaderAnimation.gotoAndPlay(rectangle);
if (bytesloaded >= bytestotal) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, loading);
removeChild(loaderAnimation);
}
}

Step 9

Go to the Second Frame of the Actions Layer Press F9 and add this line of code;

stop();

Step 10

Now go to the Stage Layer and select the Second Frame and add your content, in this case I've added a picture.

Conclusion

This is a very basic preloader but hopefully it's given you a platform to go on and create more complex. I'll be adding more complex preloaders in future posts but I thought id start with a very basic one.

Download the completed file.

This post is tagged Actionscript, Actionscript 3, Flash CS3, preloader, tutorial

Jobs

Flash Essential