[AS3] Creating a Simple Custom Preloader in Flash using ActionScript

Adding preloader in your Flash file is necessary if your swf file size is large, and in my opinnion, anything bigger than 100 kb is large enough to have a preloader. In this age of high speed net, it usually does not take long to load even bigger swf files, but you still don’t want to risk losing your user if you are not showing him what’s going on with the flash file, whether it’s downloading or stuck somewhere.

I have put togther a simple AS3 preloader which will show a progress bar, show the bytes % loaded and a logo being unmasked and revealed based on the % data loaded. It will give a nice touch of custom preloader to yuor flash project.

1. Create a new Flash AS3 document.
2. Create a new MovieClip symbol and name it “preloader” (it does not matter what you name it anyway).
3. On the Main timeline, create a new layer “preloader” and drag the preloader MovieClip from the Library onto the stage on first frame.
4. Name this Movie Clip instance as “preloader” using properties panel.
5. Double click the instance “preloader” and inside it, create four layers and name them as “progress bar”, “progress bar BG”, “logo” and “percent text” from top to bottom order.
6. Similarly, Create a “bar” MovieClip symbol on “progress bar” layer and draw a rectangle 5px high and 200 px wide and give it a instance name “bar” using properties panel.
7. Drag and place another instance of bar on “progress bar BG” layer exactly underneath bar symbol and make its alpha 50%. You do not need to name this instance. It will be shown as dimmed background of progress bar.
8. Still inside preloader MovieClip, Draw a dynamic TextField on percent text layer, and name it “percent” using properties panel.
9. Still inside preloader MovieClip, select logo layer and create a new symbol Logo and name this instance as “logo” using properties panel.
10. Inside “logo” instance nested inside preloader MovieClip, create three layers and place your logo graphic symbol on two layers. set the bottom layer logo symbol alpha 50%. This will appear as dimmed BG version of the logo.
11. Still inside “logo” instance, create a rectangle of the exact size of your logo and make it a MovieClip and name it “logoMask”, and give it instance name of “cover” using properties panel (Please note that Symbol name is for you to find the symbol in the library, instance name is how you target it using ActionScript).
12. Set this mask layer as “Mask” and under it, make logo symbol layter as “masked”. The bottom layer with 50% alpha logo symbol will remain unmasked.

Don’t worry if you still cannot perform all the steps here. I have provided a demo fla file below for you to see it yourself. Main purpose of these steps was for those who wants to learn what’s going on and hows it’s been put together.

Our logic is to reveal the logo by increasing the mask height with % of data loaded. As the mask gets bigger, it will show the 100% alpha logo symbol underneath it and give a nice effect. Same logic is being used in increasing the “bar” width with % of data loaded.

Enough with the plan, let’s add some actionscript code.

Create a new “Actions” layer, select your first frame and open Actions Panel and place the following code:

//let's stop the movie at first frame
stop(); 

//add progress event listener for loading and completion
loaderInfo.addEventListener(ProgressEvent.PROGRESS, movieLoading);
loaderInfo.addEventListener(Event.COMPLETE, movieLoaded); 

function movieLoading(event:ProgressEvent):void {
	
var dataBytesLoaded:Number=event.bytesLoaded/event.bytesTotal*100;

/*
we are targeting the bar clip inside preloader MovieClip instance on stage
Bar will scale along the x-axis as per loaded bytes percent.
*/
preloader.bar.scaleX = dataBytesLoaded/100;
preloader.percent.text = int(dataBytesLoaded)+"%";

/*
we are targeting the logo mask inside preloader.logo movieClip instance on stage
mask will scale along the Y-axis as per loaded bytes percent to reveal the Logo 
image underneath it to create a nice custom preloader effect.
*/

preloader.logo.cover.scaleY = dataBytesLoaded/100;

}


function movieLoaded(event:Event):void {
trace("Movie Loaded");
//send the movie to frame 2 or.do whatever you want to.
gotoAndStop(2);
}

Just copy the preloader MovieClip from stage and place it on the frame 1 of your flash movie. Also copy the Actions from demo file to your own on the frame 1 and that’s it.

CTRL + Enter and test your movie using ‘Simulate Download’ inside Test environment.

Cheers!