Advance Preloader

Description:

In this simple tutorial I will teach you step by step how to make a Advance Preloader in Flash.

• Download Source File (.fla) in .rar format
  

Result:

Here is a result of Advance Preloader.

Step 01:

First of all, open Macromedia Flash & make a new document by press (Ctrl+N) & press OK button.

Step 02:

In timeline rename the "layer 1" to "Loader".

Insert a New Symbol go to Insert-New Symbol... or press (Ctrl+F8).

Create New Symbol Dialog Box Appear then follow this setting.

• Name: Advance Preloader
• Type: Movie Clip

In Advance Preloader rename the "layer 1" to "Text".

Select a text tool (T) & make a blank small text box in the right side of the stage then set the properties of the text tool given below.

• Text Type: Dynamic Text
• Font: Verdana
• Font Size: 10
• Var: text

Click on a frame 100 in the timeline & press (F6) or right click and insert a key frame.

Step 03:

In timeline insert a new layer & rename "layer 2" to "Fill Bar".

Click on a frame 1 & Select a rectangle tool (R) & make a rectangle shape in the left side of the stage then set the properties of the rectangle tool given below.

• Stroke Colour: None
• Fill Colour: #990000
• Width: 150
• Height: 50

Click on a frame 100 in the timeline & press (F6) or right click and insert a key frame. Select rectangle shape & drag it in the center of the stage.

Step 04:

In timeline insert a new layer & rename "layer 3" to "Bar".

Select a rectangle tool (R) again & make a rectangle shape in the center of the stage then set the properties of the rectangle tool given below.

• Stroke Colour: None
• Fill Colour: #CCCCCC
• Width: 150
• Height: 05

Step 05:

In timeline insert a new layer & rename "layer 4" to "Border".

Select a rectangle tool (R) again & make a border outside of the "Bar". Then set the properties of the rectangle tool given below.

• Stroke Colour: #000000
• Fill Colour: None

Step 06:

Select the "Bar" layer & right click on the bar layer and select "Mask".

Select "Fill Bar" layer & right click on a frame 1 in the timeline & select Create Motion Tween.

In timeline insert a new layer & rename "layer 5" to "Loading".

Select a text tool (T) again & type "Loading..." text on the stage. Then select the "Dynamic Text" to "Static Text" in the properties of the text tool.

Step 07:

Go back to "Scene 1" & Drag "Advance Preloader" Movie Clip in the center of the stage from library (Ctrl+L).

Step 08:

Select a Advance Preloader Movie Clip & open Action Panel (F9) & type this code in the Action Panel.

Advance Preloader Movie Clip Code:

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

Step 09:

Click on a frame 2 in the timeline-Loader layer & press (F7).

Again go to Action Panel (F9) & type this code in the Action Panel.

Loader Layer Frame 2 Code:

stop();

Step 10:

In timeline Insert a new layer & rename "layer 2" to "Image".

Click on a frame 2 & press (F7).

Press (Ctrl+R) or go to File-Import-Import to Stage... & select any Picture you want to preload.

Final Step:

Now test your movie press (Ctrl+Enter) your flash player appear & you see your picture. Now press again (Ctrl+Enter). The Advance Preloader start preloading your picture.