Articles

Navigation ( archives ›› 2006 ›› June ›› 20 ›› Flash Preloader Loading Bar )

Flash Preloader Loading Bar

Posted on June 20, 2006, 4:45 pm EST

About

This preloader will consist of two scenes. The first scene will contain the preloading area and will be called "Preloader", and the second scene will contain your introductory main flash content and will be called "Main". I will explain to you step by step.

1 - Create the flash document

We have to create a flash document. What you should do is setup the workspace to fit your recommendations. I just left it as default.

2- Add the scenes

As I said earlier, we will need a scene (first scene) to be dedicated for preloading. And we need another scene which will be linking the preloading scene to it after completion, which we will call "Main". So lets create it.

3- Modify the Preloader Scene

We need to create two layers, "pre_script" and "preloader". The pre_script layer must have 2 key frames, and the preloader must have 1 keyframe spanned two 2 key frames.

4- Create the preloader Movie Clip

4.1- Create a new symbol

( CTRL + F8, choose Movie Clip >, and name it "bar". So double click the "bar" symbol from the "Library".

4.2- Create frames

Now we need to extend the "frame" layer to 100 frames. So select the 100ths frame of the "frame" layer and "insert frame". Now for the "bar" layer, goto the 100ths frame and "insert key frame" It should look like this.

4.3- Name the Frame bar

Now we need to add the action scripting to the frame. So click on the "bar" layer, and in the properties window, name the frame "bar".

4.4- Insert Action script

Remember the Movie Clip is what you will see while the flash movie is preloading. So we don't want the preloader movie clip to run automatically because we want the preloader (prescript) to control it directly. We named it 'bar' here. So we need to somehow stop the movie clip from playing at first, hence we add a stop action script right at the beginning:

CODE:
bar.stop();

4.5- Create the bar

Notice that I should have renamed 'bar' to be 'preloader-movie', but for the sake of this tutorial, I named it bar. So here is what the user will see while the Flash Application is preloading. You can technically put any movie you wish here. We are doing a horizontal loading bar, you can do a loading circle, or even a nice animation which resembles completion. At this point you could add any animation you would choose over the 100 time units within the "Bar" Frame! For example, this movieclip MUST be 100 frames since the pre_script depends on the frames in this animation. So lets just make a simple Shape Tween from Frame 1 to Frame 100. So in the first frame, create a small strip of graphic and just make a bar at the other end. Experiment.

So at frame 1

So at frame 100

Copy the Shape from Frame 100 that you just created to the layer "frame" of frame 1. So you would have a background.

Shape Tween it

So now we are done with the bar movieclip. Lets continue to work on the workspace.

5 - Place Preloader in Workspace

Now lock the layer "pre_script", and select the "preloader" layer. Now DRAG the "bar" symbol from the library to the workspace! And name that symbol, "bar" similar to step 4.3. Now this object you dragged represents the movie that will be played while preloading. The instance of this movie is called "bar"

5.1- Action script for the first frame of pre_script

Here is the main core of the preloader, this should be in the exact first frame of the pre_script frame. Basically what is does is it retrieves the Current Loaded bytes from the flash stream and the Total Flash Size in bytes. It calculates the percentage of the current loading stats, then checks if it is a 100 yet, if it isn't a 100, it plays the "Preloader Movie Clip Object" upto the percentage we retrieved. Then it goes on to the next fram which repeats tells it to go back to frame one, like a loop. If it reached a 100, it will move to the Movie Scene.

CODE:
// Initializations
loaded_bytes = _root.getBytesLoaded();  //Loaded Bytes already
total_bytes = _root.getBytesTotal();  // Get the total bytes of the swf
loadpercent = (loaded_bytes/total_bytes)*100; // The current exact percentage done

// Lets check if it reached 100..
if (loadpercent != 100) {
	// OPTIONAL: Place the percentage on some textfield
	//percentageTextField.text = int(loadpercent) + '%';
	// Goto respected load percentage since not done
	bar.gotoAndStop(int(loadpercent));
} else {
	// Goto the "Main" Scene since its done
	gotoAndPlay("Main", 1);
}

I place that in my first frame in the preloading scene and that scene has two frames. It loops (1 -> 2, then repeat).

5.2- Action script for the second frame of pre_script

This is mainly for letting to loop back to the first to recalculate the bytes loaded with respect to the bytes total.

CODE:
gotoAndPlay(1);

Mohamed Mansour's Personal Website