What is Flash Preloader

A preloader preloads the whole flash movie or some part of it before playing it. This saves user to see animation in segments and informs him about movie progress so that he may know that how much movie is being loaded and how much is remaining. In absence of preloader any flash movie will be jerky and will not be considered as a good animation. Animation can be referred to a consistent motion. If animation stops again and again after some seconds or so then usually user will get bored and close it very soon. Flash movie loads first and then plays. So its a good idea to build a preloader which will count some parameters and informs user about movie loading progress and when it is 100% it will be played. There are many ways and uses of preloaders depending upon requirement. I will explain here: how to create different kind of flash preloaders and applying these into movies.

Following examples will explain to create all kind of preloaders, from simple to advanced with look and feel customization.

Creating a Custom Preloader In Flash

Simple and Basic Preloader

You might like to use basic loaders in which there is no progress display but these load full movies and then play them.

We take first two frames.
We will check; Are loaded frames equal to total frames in the movie.
If yes then movie will jump from frame 1 to 3.
If frames loaded are not equal to total frames then movie will go to frame no. 2.
At frame no.2, we place action of go back to frame no.1.
By this way when the whole movie will be loaded, preloader will allow the movie to proceed.

Simple preloader method 1

:: Script at Frame 1 ::

ifFrameLoaded ("Scene 1", 160) 
{
gotoAndPlay(3);
}

:: Script at Frame 2 ::

gotoAndPlay(1);

Simple preloader method 2

:: Script at Frame 1 ::

if (_framesloaded >= _totalframes) 
{
gotoAndPlay(5);
}
stop();

:: Script at Frame 2 ::

gotoAndPlay(1);

basic-loader

Simple Percentage Preloader

Look and Feel

40%

This preloader just shows up the percentage loaded for flash movie.

Instructions

Add stop action at first frame.
Create a movie clip.
Double click at movie clip to go in.
In that take a dynamic text and assign it a name such as percentage
Come back outside of movie clip at main timeline.
Single click at movie clip and type the following actionscript in actions panel.

onClipEvent (enterFrame) 
{
percentage = int(100/_root.getBytesTotal()*_root.getBytesLoaded())+"%";
if (percentage == 100+"%") {
_root.Play();
}
}

This will show up a text percentage loader before movie starts and at 100% it will play the movie.

Download Percentage preloader Example

Bar Preloader

Look and Feel

Instructions

Create a movie clip and give it a name i.e. preloader.
In that movie clip create a bar and in other layer its outline.
After creating bar movie clip and type actionscript at it.

onClipEvent (load) {
this._xscale = "0";
}

Remember to name that movie clip as bar because thats going to use in actionscript. Alright and define that bar’s center to left if you want to start filling that bar with color from left and right or center for different requirements.

Finally come back at main time line and at main movie clip type the following actionscript.

onClipEvent (enterFrame) {
percentage = int(100/_root.getBytesTotal()*_root.getBytesLoaded())+"%";
_root.preloader.bar._xscale = siteLoaded;
siteLoaded = int((loaded_bytes/total_bytes)*100);
total_bytes = _root.getBytesTotal();
loaded_bytes = _root.getBytesLoaded();
if (percentage == 100+"%") {
_root.Play();
}
}

Download Bar Preloader

Percentage and Bar Preloader

Look and Feel

Instructions

Same Procedure as in above bar preloader example
Just add a dynamic text and assign it name as percentage in preloader movie clip with bar. All other script is same for bar and main movie clip.

Percentage and Bar Loader Download

Percentage, Bar, Nice Preloader

Look and Feel

Instructions

Add stop action at first frame to stop movie in the beginning.
In new layer create a movie clip at first frame and create interface.
Take dynamic text named as text inside that movie clip.
Inside movie clip add 100 frames in new layer.
Create a bar and give it shape tweening or motion of 100 frames.
Come back at main timeline (outside of movie clip) and type this actionscript at main movie.

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);
}
}

Bar and Percentage Nice Flash Preloader Download

Flash KB Preloader – Total KB, Downloaded KB, Percentage, Loading Bar

Look and Feel

Instructions

Take movie clip named as preloader.
Inside it, take other dynamic text fields and assign them variables names as loadedkb, totalkb, percentage.
These variables are being used in the following script

At bar movieclip same script as in bar loader example and at main movie type following action script.

onClipEvent (enterFrame) 
{
percentage = int(100/_root.getBytesTotal()*_root.getBytesLoaded())+"%";
_root.preloader.bar._xscale = siteLoaded;
siteLoaded = int((loaded_bytes/total_bytes)*100);
loadedkb = int(loaded_bytes/1024) add "KB";
totalkb = int(total_bytes/1024) add "KB";
total_bytes = _root.getBytesTotal();
loaded_bytes = _root.getBytesLoaded();
if (percentage == 100+"%") 
{
_root.Play();
}
}

If you want to just use KB preloader than remove other dynamic text fields and bar and also in main script remove script relating to bar and kb and use it.

Download This Preloader

All In One Preloader 1

Look and Feel

All in One Preloader Example 1 Download

All In One Preloader 2

Look and Feel

All in One Preloader Example 2 Download

Preload External swf Movies – Advanced Preloading

Now here scenario is little bit different. I take two swf movies. One is container in which first movie is located and than other comes from outside and both have same loader files with slight difference and next all other movies which come from outside contain same loader as first one. The point is you place loader withing container and program it to preload and then when you call other swf movie that is outside and is coming on click event of a button. You definitely take some target or level to load that movie. You will place action on button and tell the next movie to come but while loading you will further tell the movie to load in target or level and the loaders will work fine and you are done. When 100% will be completed the movie will play that target and not the container root. I think u got that.

When I first tried this; At external movie loading completion where it tells to play the external movie, it was playing the container movie from the start, because both have same loaders. Then I got the idea of loading the target movie and playing the target movie on 100% loading completion.

Container Main Movie Loader Actionscript

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);
}
}

External SWF Movie Loader Actionscript

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

The base1 is the target in which external movie will reside and when loading will be done base1 will be played hence playing the externally loaded swf movie and not the main root itself.

* Note that you cant check that script in working state in the specific external movie you placed in, because it will search the base1 and when you will play the container it will be working fine. All other movies which will come from outside will contain that second script in loader.
Cheers !!!

Advanced External SWF Movie Preloader Download

Flash ActionScript Preloaders – Tutorials and Downloads is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

• Load External Files Into Flash