As you guys already know that Adobe Flash CS3 is awesome enough, in CS3 we can see more features and especially coming to ActionScripting, more OOPS concepts has been introduced. Compared to old versions of flash ActionScripting, now experts says that Flash CS3 is good enough to handle more with Classes and Objects using OOPS concepts.

Coming to our topic today, after going through this post you will get an idea of how we can create a Custom Flash CS3 Preloader.

Custom preloader is a must topic in all aspects while creating any application in Flash or while doing any animation using Flash. The process is much different in ActionScript 3.0 compared to older versions of Action Scripting. External files are no longer loaded on to the stage like you might have done in earlier versions of Flash. Creating a Custom Flash CS3 Preloader is simple and very easy to implement. Here we will be creating a preloader which can be used for loading external images or other SWF (acronym of "Shockwave Flash ") files.

Before start creating the same, initially please do download the respective files – since this going to help us in understanding the same. Please do download the example files for reference, after downloading please do open flashpreloader.fla file.

Getting Started:

Step 1. Open flashpreloader.fla

After opening the flashpreloader.fla file, please do review its contents, you will see that the stage is empty. This is because here we are going to load an external file and display the same here. Here we are going to use some code to dynamically place the preloader on the stage and to remove the same from the stage when the loading is complete.

Press Ctrl+L to open the respective Library; here you will see two movie clips that is rectBarMC and Preloader Movie Clips. rectBarMC is simple blue rectangle bar which will be used to create a visual progress bar when a file is loading.

Firstly we will go with rectBarMC as I have mentioned above this is a simple rectangle bar which will be used as a progress bar for our program.

And coming to Preloader , which is a movie clip contain all the respective pieces of our preloader like the text “Loading 100% ” etc., Just right click on the same and check for the linkage option in the context menu. When you click on Linkage, it will open up “Linkage Properties ” window, in that window make sure that Class name should match with the movie clip name like “Preloader ” for this the Base class would be “flash.display.MovieClip ”. And if you see the checkbox for Export for ActionScript has been selected, this means that when the respective file runs, we can access this movie clip dynamically by its class name that is here “Preloader ”. Below is the screen shot which resembles the same – linkage properties

The Linkage properties for the Preloader Movie Clip.

Now just open the Preloader Movie Clip by double clicking on it in the library. Here you can see three respective layers which are named as Loading_txt , Loading_bar and Border_frame .

“Loading_txt ” layer just contains the “Loading 100% ” text that tells the user what percentage of the respective file has been downloaded. And when you select the same, in the properties inspector panel, you can see that loading_txt has given as the instance name . Using ActionScripting code we can show how much amount of file has been loaded.

“Loading_bar ” Layer contains an instance of the rectBarMC movie clip which will expand to visually indicate how much of the file has been downloaded or completed. And for this we have given an instance name as rectbar_mc .

“Border_frame ” Layer just it contains the box shape, it looks like a border.

Below snap-shot resembles the Preloader Movie Clip.

Step 2. Adding ActionScript to load the external file:

Now we will try to add ActionScript to load the external file, click on the Scene 1 under the timeline. You can see one layer called as “actions ”. Select the “actions ” layer and press F9 to open the Actions panel . Here we will be loading an external .swf file, keeping this in mind we will write some ActionScript code. Just go through the code snippet below which I have written for loading an external .swf file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var myUrlReq:URLRequest = new URLRequest("externalfile.swf");
var myLoader:Loader = new Loader();
 
myLoader.load(myUrlReq);
 
myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);
 
var myPreloader:Preloader = new Preloader();
 
function showPreloader(event:Event):void {
        addChild(myPreloader);
        myPreloader.x = stage.stageWidth/2;
        myPreloader.y = stage.stageHeight/2;
}
 
function showProgress(event:ProgressEvent):void {
        var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
        myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
        myPreloader.rectbar_mc.width = 198 * percentLoaded;
}
 
function showContent(event:Event):void {
        removeChild(myPreloader);
        addChild(myLoader);
}

Code in Brief:

1. Loading the External file

1
2
3
4

var myUrlReq:URLRequest = new URLRequest("externalfile.swf");
var myLoader:Loader = new Loader();
 
myLoader.load(myUrlReq);

Here in the above snippet code, we are creating an object of URLRequest called myUrlReq and will be creating an object of Loader called myLoader, and this Loader class expects to receive a URLRequest pointing to the file you wish to load, it can be an image file / any external file which you want to load. Here we are loading an external .swf file with file name as “externalfile.swf”.

2. Creating respective Listeners to check the progress of the file

After that we need to create listeners to monitor the progress of the file, like how much amount of the file has been loaded till now. For that we will be using event listeners like Event.OPEN , ProgressEvent.PROGRESS , Event.COMPLETE.

1
2
3

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);

Firstly we will run a function called showPreloader() which will place the Preloader movie clip on the stage. Then Secondly we will run a function called showProgress() which will visually update the preloader bar and text to reflect the download progress. Finally we will run a function called showContent() , which will remove the preloader and show the respective content once the download is complete.

3. showPreloader()

Before running the respective function, we need to create an instance of the Preloader movie clip which will display the Preloader on the stage.

1
2
3
4
5
6
7
8
9

var myPreloader:Preloader = new Preloader();
 
Then write the code of the respective function showPreloader():
 
function showPreloader(event:Event):void {
addChild(myPreloader);
myPreloader.x = stage.stageWidth/2;
myPreloader.y = stage.stageHeight/2;
}

Using addChild() we are placing myPreloader instance on the stage, if you see the above code we are placing the respective preloader in the center of the stage through x and y positions.

4. showProgress()

Now after completion of the positioning of the preloader, now we will call showProgress() function, here in this function we will calculate the percentage of loading completed by dividing the number of bytes downloaded so far by the total number of bytes. Then after calculating we are assigning the same to the loading_txt . And simultaneously we need to increase the width of the rectbar_mc to visually showing the same to the user that this much amount of file has been loaded.

1
2
3
4
5

function showProgress(event:ProgressEvent):void {
	var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
	myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
	myPreloader.bar_mc.width = 198 * percentLoaded;
}

5. showContent()

After loading everything, we need to remove the movie clip from the stage and need to show the external file respectively. Below is the code for the same.

1
2
3
4

function showContent(event:Event):void {
	removeChild(myPreloader);
	addChild(myLoader);
}

The above function is called after completion of showProgress() , and in this function we are removing myPreloader movie clip and adding the external file on the stage that is myLoader (I mean an external file named as externalflash.swf ).

So, we are done with the preloader. Now test the application by pressing Ctrl+Enter you can see preloader in action. Before pressing Ctrl+Enter, please do include some .swf file and instead of “externalflash.swf” place your own file in the same directory. After placing the file then press Ctrl+Enter for better results or else it will give an error like “URL not Found”.

Download
Flash Preloader

Articles which you would like to read:

• Simple example to demonstrate Sprite class in Flash ActionScript 3.0
• jQuery AJAX Tabs with ThickBox enabled
• Comparing two Arrays and remove duplicates from Original Array using JavaScript concat and slice
• How To: Make Tabs Reload and Evaluate Scripts using ExtJS
• How To: Make Simple slideToggle app using jQuery
• How to: build your first dynamic website
• 60+ Stunning Scriptaculous Applications
• How to open Ext.Panel onClick of a link
• Code Snippet of handling files in Ruby Programming Language
• Remove duplicates from an array using JavaScript