Home Flash & Swish Flash Tutorials Flash Preloader

Flash Preloader

Author: Chad Freiling More by this author

Added: Jul 03, 2006 Rating:

Level: Beginner Software: Flash

First things first, the Stage. Set the stage to 450 x 250, Stage color doesn't matter for this.

Next, We need to create another Layer. So, you should have 2 Layers Nows. Make Sure each Layer has 2 Frames in it, then Name them as follows:

Actions - (Top Layer) - This layer will be used to place the actions for the preloaded.
Loading Bar - (Bottom Layer) - This layer will be used to place the Loading Bar for the preloaded.

Now on to the Loading Bar. Select the Loading Bar layer and go to Insert > New Symbol (Shift+F8), Create a new MC and name it 'bar'.

Next, Create Two new layers inside the 'bar' MC. Each with 10 Frames, Then name them as follows:

Actions - (Top Layer) - This layer will have a Stop Action on it.
Outline- (Middle Layer) - This Layer will have the Outline for the loading bar
Fill - (Bottom Layer) - This layer will have the fill color for the Loading bar. This layer will also have a few different KeyFrames on it for the motion of the bar loading.

Select the 'Outline' layer and then select the Rectangle Tool (r) , and Create a Wide but short rectangle with the Outline color Black and a fill color of your choice.

Next, Select the Fill Color, and Copy it then Delete it. Then Select the 'Fill' layer and Press CTRL+SHIFT+V or EDIT > Paste In Place. Now you have a Full Loading Bar. With the Fill Color still selected, Go to Insert > Convert to Symbol (F8) and name it fill.

Next, Insert a KeyFrame on Frame 10 of the 'Fill' layer. After that, go back to frame one of the 'Fill' Layer and Resize the fill bar to 50px x 16px. And Place it
to the left of the Outline. (See Images below for this part)

Resize info Box

Resized Fill Bar

After you have resized the fill bar your will need to add a Motion Tween to Frame 1. So it tweens to frame 10.

Lastly on the Loading bar. Select the 'Actions' layer, Then place a Stop() action on the First Frame.

Now go back to the Main Stage. With Layer: Loading Bar selected we need to place 4 Text Fields. Two will be Static Text and the other Two are Dynamic Text.

Create the two Static Text Fields. Have one read "Bytes Loaded" and the Other read "Total Bytes".

Next Create the two Dynamic Text Fileds. Allow these to be able to fit at least 12 characters in length on a Single line.

Name the First one "tbytes" with a var name of the same name, then align it to the Static Field that reads "Total Bytes".

Then name the Second one "bloaded" with a var name of the same name, then align it to the Static Field that reads "Bytes Loaded"

Or arange them any way you wish, Just as long as bloaded is with "Bytes Loaded" and like wise with tbytes and "Total Bytes".

Example for Dynamic Text Field

Click to enlarge

Now, Lock the Loading Bar Layer, then select the Actions Layer. Select Frame 2 and Go to > Insert > KeyFrame (F6) or right click on frame 2 and Select Insert KeyFrame.

On Frame 2 Insert a gotoAndPlay(1); action.

The following Action script will be for Layer: Actions Frame: 1.

Copy and Paste the Following Script into Frame 1 on the Actions Layer:

// tbytes = Total Bytes
tbytes = getBytesTotal()
// bloaded = Bytes Loaded
bloaded = getBytesLoaded()
/*
Basically the code below takes the Total bytes for the swf
the multiplies them by a percentage.
Example = .25 = 25% Loaded, 50 = 50% loaded. .75 = 75% loaded ect...
It then checks the Bytes Loaded to the Total Bytes, If it is Higher
than the current statement it then executes the tellTarget actionscript
*/
if (bloaded >= Number(tbytes * .25)){
tellTarget(box){
gotoAndStop(3);
}
}
if (bloaded >= Number(tbytes * .50)) {
tellTarget(box){
gotoAndStop(5);
}
}
if (bloaded >= Number(tbytes * .75)) {
tellTarget(box){
gotoAndStop(7);
}
}
if (bloaded >= Number(tbytes * .90)) {
tellTarget(box){
gotoAndStop(9);
}
}
if (bloaded == tbytes) {
tellTarget(box){
gotoAndStop(10);
}
gotoAndPlay(11);
}
// end of Script

Final Timeline

Text Fields

The fla I made available [coming soon in the flash downloads section] has an added Scene that I did not tell you to add. This Scene Was added to allow for the movie to load. Otherwise it would load to quick and not have been able to view when tested. I placed a few Images and text in the Second scene to add to the size of the file. After adding a new scene with some images the next thing to do is Test the Movie. When testing the Movie, Go to View > Show Streaming. this Starts the movie over and simulates the movie loading as if it were being downloaded.

Author's URL: Chad Freiling