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.

New Flash Document

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.

Create Screens

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.

Setup the Preloader Scene

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".

Create Bar

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.

Create Bar Frames

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".

Create Bar Frames 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();
Create Bar Frames Bar

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

First Frame Preloader

So at frame 100

First Frame Preloader

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

First Frame Preloader

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);
First Frame Preloader

Download Now

You can download it from here: [preload_tutorial.fla]

If you have any questions, leave a comment below! Enjoy!

About this Article:

Comments (28) - Add yours, or View the replies

Categoy (WebDesign)

Views (58883)

Digg it: Digg this article