Black and white preloader

Date: 12.6.2007, 0:26 Total views: 27711

In this tutorial, you will see how to create a black and white preloader with percent. To create this tutorial, you have to use a little Action Script code. You will also learn How to design a preloader, How to animate it and more.

Example:

Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to130 pixels and the height to 80 pixels. Select #252525 as background color. Set your Flash movie's frame rate to 22 and click ok.

Step 2

Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose black color and draw a "rectangle" about 105x45px.

Step 3

While the rectangle is still selected, go to the Align Panel (Shortcut key:Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Now, you have aligned the rectangle with the background.

Step 4

Take the Text Tool (A) and go to the Properties Panel below the stage. Then, choose the following options:

1. Select a Static Text field.
2. Select MGI Archon as font
3. Choose 13 as font size.
4. Select white as color.
5. As the rendering option, select Anti-alias for readability.

Then, type within the black rectangle, on the left side "LOADING.....". See the picture below.

Step 5

Take the Selection Tool (V) and select the text ("LOADING...") and black rectangle. Then, press F8 key (Convert to Symbol) to convert this rectangle and text into a Movie Clip Symbol.

Step 6

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.

Step 7

Click on frame 100 and press F5 key. After that, create a new layer above the layer 1 and name it percent.

Step 8

Select perecent layer and Take the Text tool (T). Then, go to the Properties Panel (Ctrl+F3) below the stage, and select the following options:

a) Select a Dynamic Text field.
b) Select MGI Archon as font.
c) Choose 13 as font size and bold it.
d) Select white as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "perc1"

Then, type after "LOADING....." 99%. see the picture below.

Step 9

Go back on the main scene (Scene1).

Step 10

Take the Selection Tool (V), click once on the "preloader" to select it and open the Action Script Panel (F9). Then, enter the following Action Script code:

onClipEvent (load) {
total = _root.getBytesTotal();
}

onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
perc1 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

We're done with the prelaoder. To see how it works, click on the first frame and go again to the A.S.panel. Then, enter this script inside the Actions panel:

stop();

After that, create a new layer above the prelaoder layer. click on the second frame and press F6 key. After that, Import, place, create any animation, image, movie on the second frame.Then, click again on the second frame and type again:

stop();

inside the Actions panel.

Enjoy!

Download source file (.fla)