Preloader With Percentage In Flash

Tutorial Flash ActionScript

Tutorial by The Mixer from adobeflashtutorial

Read this tutorial and see how to create a preloader bar with percentage in flash 8. In this tutorial you will also learn how to use Action Script code and apply it on the preloader.

Preloader Bar With Percentage

Read this tutorial and see how to create a preloader bar with percentage in flash 8. In this tutorial you will also learn how to use Action Script code and apply it on the preloader.

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

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

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

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

5. Place the Name now (bar) and Type Movie clip.
5.1 Select the part indicated in Registration.

6. Write like Instance name (bar).

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

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

9. Now return to the scene and change the name of the Layer 1 (preload).
9.1 Click on the symbol (preload) in the Library window, and drag it onto the scene.
9.2 Place the symbol in coordinated X = 170.0 y Y = 190.0.
9.3 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;
}

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

11. Insert an empty key fotograma (F7) in the frame #4.
11.1 Select the fotograma and in the bar of Actions – Frame insert.
gotoAndPlay(“start”);

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

With this step the tutorial is concluded I hope it is of a lot of help. The End.

Press Ctrl. + Enter and see the final result. The loader is observed if you press 2 times ctrl. + Intro. Until very soon.@----- ;)

Download FLA File

SWF File Example