In this tutorial we will learn how to create a preloader bar with percentage in flash 8 with action script.

Step 1

• Create a new document (Ctrl. + J), of size 350*300 pixels
• Use as background color #FFFFFF. Example Fig 1.

Fig 1

Step 2

• Now create a New Symbol (Ctrl + F8 or Insertar >> Nuevo Símbolo)
• Name preload.
• Type Movie clip. Example Fig 2.

Fig 2

Step 3

• The following step is to draw a Rectangle of 125 * 15 pixels, this rectangle will be the loader see Fig 3.
• Place the rectangle in coordinated X = 0.0 y Y = 0.0.

Note draw the rectangle without border.

Fig 3

Step 4

• To select the rectangle and to press (F8 or right button of the mouse >> Convert to Symbol), see fig 4.

Fig 4

Step 5

• Place the Name now (bar) and Type Movie clip.
• Select the part indicated in Registration, See Fig 5.

Fig 5

Step 6

• Write like Instance name (bar) Fig 6.

Fig 6

Step 7

• Change the name of the Layer 1 (preload).
• It introduces a field of Dynamic Text under the bar. Fig 7
• Var: txt.

Fig 7

Step 8

• Create a new layer above preload layer and name it perimeter, hide the preload layer.
• Draw a rectangle without filler, the dimensions will be 125 * 15 pixels see Fig 8
• Place the rectangle in coordinated X = 0.0 y Y = 0.0.

Fig 8

Step 9

• Now return to the scene and change the name of the Layer 1 (preload).
• Click on the symbol (preload) in the Library window, and drag it onto the scene.
• Place the symbol in coordinated X = 170.0 y Y = 190.0.
• Select the symbol (not the fotograma); open the bar of actions and to insert the following code.

onClipEvent (load) {
b_total=_root.getBytesTotal();
}
onClipEvent (enterFrame){
b_loaded=_root.getBytesLoaded();
if(b_loaded >= b_total){
_root.gotoAndPlay(“start”);
}else{
clip=(b_loaded/b_total)*100;
bar._xscale=clip;
txt= Math.floor(clip)+” % loading”;
}
bar._xscale=(b_loaded/b_total)*100;
}

Step 10

• Create a new layer above preload layer and name it actions,
• Select the fotograma and in the bar of Actions – Frame insert stop();  Fig 10
  

Fig 10

Step 11

• Insert an empty key fotograma (F7) in the frame #4.
• Select the fotograma and in the bar of Actions – Frame insert, See  Fig 11

gotoAndPlay(“start”);

Fig 11

Last Step

• Create a third layer and to name image.
• Insert an empty key fotograma (F7) in the frame #3.
• Label this fotograma with the start name, Label type Name.
• In this fotograma import an image (ctrl. + R), the dimensions of the image are (350*300 pixels).

If you want to see your project press Ctrl. + Enter, the loader is observed if you press 2 times ctrl. + Intro

Download the project preload.zip

How to preload the main movie with levels all at the same.

Step 1

Put a stop(); action in the first Keyframe of the movie(s) being loaded and nothing else. No movie clip, no graphic, no music or picture but just an empty Keyframe and a stop(); action. Then you load the movies you want. You can load all the movies at once or just a few.

Step 2

This  is the code to preload the movie(s), put this code on your preloader:

onClipEvent (load) {
// Load Three movies
loadMovieNum (“Music.swf”, 1);
loadMovieNum (“Music.swf”, 2);
loadMovieNum (“Music.swf”, 3);
}

onClipEvent (enterFrame) {
// We devide it by 1000 to get rid of the decimal numbers
Total = Math.floor(_level1.getBytesTotal()/1000)+(_level2.getBytesTotal()/1000)+(_level3.getBytesTotal()/1000)+(_root.getBytesTotal()/1000);
Loaded = Math.floor(_level1.getBytesLoaded()/1000)+(_level2.getBytesLoaded()/1000)+(_level3.getBytesLoaded()/1000)+(_root.getBytesLoaded()/1000);
Percent = Math.floor((Loaded/Total)*100);
_root.PercentDisplayTwo = int(Loaded)+” KB “+”  |  “+(Total)+” KB”+”  |  “+(Percent)+” %”;
if (Percent == 100) {
// Have a frame lable inside the loaded movie so you can park it
// and call it when ever you want
_level1.gotoAndStop(“One”);
_level2.gotoAndStop(“One”);
_level3.gotoAndStop(“One”);
_root.play();
}
}

In this toturial We will learn how to make a percentage preloader with Flash MX components.

Things we use:

1. ready-made extension
2. The Loader Extension .mpx file
3. To use the .mpx file, we  need the Extension Manager
   

Download Loader Extension+Extension Manager .zip

What we will do:

• Download the Flash Loader component .

Step 1

After completing the installation of the Extension Manager, and successfully setting up the .mpx loader file, we should be able to see the loader component from the drop-down menu of the Components (Go to  Windows> Components, or press ctrl F7)

Fig 1

And that’s our “percentage preloader” component.

Step 2

We will create two layers as shown in Fig 2 .

Fig 2.

(Go to Control>Test Movie)

Make sure you select “show streaming” in order to see the preloader in action.

Note: If you want to change the preloader text color go On the Actions layer of the loader component, modify the following action on line 31 :

Change this :

this.mTextFormat.color = this.bcolor;

With this:

this.mTextFormat.color = 0×999999;

Today if your flash exceed 700 KB (the size of a larger picture), is if you put a Preloader.

Actionscript 3 is very simple in the first frame put the code

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void{
	var loaded:Number = e.target.bytesLoaded;
	var total:Number = e.target.bytesTotal;
	var pct:Number = loaded/total;
	loaderMc.barMc.scaleX = pct;
}

function onComplete(e:Event){
	play();
}

Where “loaderMc is a MovieClip that contains another MovieClip” barMc. To make things interesting, “barMc” you put on a mask layer in which you can draw like you want to show your progress bar.

Circular Dynamic Preloader Tutorial – Flash ActionScript 3.0 Website Content Loader