Flash percentage preloader with Load Bar

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