Tag Archives: flash preloader with image

Creating a Flash Preloader Using AS3

This tutorial will teach you how to create a very simple preloader for your Flash movies using ActionScript 3.0. A preloader is an essential asset in every single Flash movie you put on the internet as it prevents the movie from playing before downloading all its assets and also informs the user about how long he is expected to wait before the downloading process finishes. This tutorial will not require you to have any special ActionScript 3.0 knowledge and will make use of the LoaderInfo class to retrieve downloading data.

ActionScript 3.0 AS3 Preloader

Our tutorial will be divided into two sections, in the first section we will prepare the graphical assets of our preloader and in the second section we will code our movie.

Preparing Preloader Graphical Assets

Start off by creating a new Flash movie with the ActionScript version set to 3.0. The background colour, frame rate, and the stage size do not matter for this tutorial.

Properties Inspector - AS3 Preloader

Our preloader project is going to have two things only, the content and the ActionScript. We are going to arrange the layers on our timeline to reflect this. Double-Click the name of our only layer on the timeline and rename it Content. Click then on Insert Layer button to create another one and rename this one as Actions.

AS3 Preloader - Layers

Our timeline is now ready, Click once on the Content layer to start adding content to it. Pick the Rectangle Tool, set the Pen colour to something dark and the Fill colour to something darker. I chose black for the pen and blue for the fill. We need these two to have distinct colours from each other so that our preloader has an obvious outline to indicate how much of it is left to be filled. Once you have these selected simply draw your preloader bar on stage.

AS3 Preloader - Draw Bar

Our bar graphic is now on stage, but we will not be able to interact with it using ActionScript before converting it to a Movie Clip Symbol. We also need to separate the outline from the body of the bar because the body of it is the part that will expand as the loading progresses. To do both of these things, you will to use the Select Tool (the black arrow) to select the bar outline only. Once you do that, press F8 on your keyboard to convert it to a symbol. Select Movie Clip as the type and name your Symbol Outline.

AS3 - Outline Converted to A Symbol

We need to do the same thing for our preloader now. Click on the body of the bar to select it then press F8 to convert to a symbol. Set the type to Movie Clip and name it Bar, and finally set the Registration Point of the Symbol to the left side before you press OK. The registration point is the point at which our bar will expand or grow, if we leave it to the center our bar will start at the center of the outline and will expand from both sides to fill up the outline, what we want to happen is have it grow from the left to the right, so you have to click on the little box indicating the left side registration point.

AS3 Preloader - Bar Converted to A Symbol

In order to be able to refer to our bar through ActionScript we need to assign an Instance Name to it, to do this, while your bar is still selected, access the Properties Inspector and set bar_mc as the instance name of the bar.

AS3 Preloader - Instance Name

You might notice right now that our bar is covering our outline, this might be a little bit problematic, to ensure that our bar does not cover the outline, we are going to send the bar to the back of the stage. To do this, simply go through Modify>Arrange>Send to Back or alternatively press Ctrl+Shift+Down Arrow.

Front to Back

We are done working with our bar, but our preloader is also going to have a numeric indicator showing how much in percentage the file has loaded. To create the text field required for this, pick the Text Tool and draw the text field somewhere below the bar, then quickly access the Properties Inspector and set its type to Dynamic Text, this is a type that can interact with ActionScript. Set the font type to _sans and finally set the Instance Name to loader_txt.

AS3 Preloader - Text Tool AS3 Preloader - Text Properties

We now have all of our graphical assets ready, click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open the Actions panel. We are going to code our preloader now.

Coding Our Preloader Using ActionScript 3.0

Before we proceed with the actual code of our preloader we must ensure that the movie does not start playing before we tell it to do so after we check that all the data is ready. To stop our movie we simply use the stop() method at the start of our code, simply type stop() to do that:

stop();

Our preloader code is going to retrieve the amount of data which has loaded and compare it with the total file size of our SWF. This preloader code will have to be repeatedly checked until the movie stops loading. To make our code repeatedly execute we will create an event listener that we will attach to the main timeline and then call a loading function using that listener. The ENTER_FRAME event is executed repeatedly in accordance with the frame rate specified for the Flash movie.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{
}

We now need to write our loading() function, this function will have the following tasks:

  1. Retrieve the amount of data that has already loaded and the total amount of data of the file.
  2. Resize the bar in accordance to these values.
  3. Display the percentage of how much data has loaded.
  4. Check if the amount of loaded data has completed so that the movie is played.

We are going to do these one by one. In order to first retrieve the byte information of our movie clip we use the new loaderInfo property that does just that. We are going to retrieve the values we need and assign them to two variables:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

}

We are now going to use these two variables to perform the second task, which is to resize the bar in accordance to how much data has loaded, we can do that by simply dividing the loader amount by the total amount and then assign that value as the scaleX property of the bar.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;

}

That was easy, now the next task is to display the amount loaded as a percentage, we can do that again by dividing the loader amount by the total and then multiplying that by a 100 and setting this value as text property of our loader_txt text field.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt = (loaded/total)*100;

}

What we just wrote will actually generate a messy number with loads of decimal places, in order to make it look nicer we can clean it up by using the Math class to round it down using the Math.floor method:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100);

}

And if we want to add a percentage sign at the end of this text we can do that by using the plus sign operator:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ “%”;

}

That’s it, the very last task for our preloader is to check if the file has fully loaded, we can do that by using the comparison operator “==” along with a conditional. If that value is true, we will tell our move to play:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ “%”;

if (total == loaded){
play();
}

}

Good practice requires also removing a listener when it is no longer need, this helps improve performance:

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void{

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ “%”;

if (total == loaded){
play();
this.removeEventListener(Event.ENTER_FRAME, loading);
}

}

That’s it! We are done. You can close the Actions panel now, but in order to test your preloader you will have to put something large in your movie now to see it preloader. Access your timeline, right-click the second frame and select Insert Blank Keyframe to allocate a place for your object.

You can now go through File>Import and just import any large image in this frame. You can add as many frames and objects in there as you wish. Once you are done you can go through Control>Test Movie and then go through View>Simulate Download to see how your preloader works (Or just press Ctrl+Enter twice to do the same thing). You will see it working. If you have a single frame in your movie the image might flicker at the end because it will keep on looping along with the preloader. To avoid this you can put a simple stop() method at the last frame of your movie to prevent it from going back to the preloader.

ActionScript 3.0 AS3 Preloader

This concludes our tutorial, I hope that you learnt something new from it. You can download the end source file here.
thanks republicofcode