Flash Tutorial: Preloader: Progress Bar Component	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Preloader: Progress Bar Component

Free Flash Tutorial

This is a very easy preloader to build and this tutorial will show you how to use Flash MX04 to make your own preloader using the progressBar components.

Cross Ref: There are several other Flash Pre-Loader tutorials on this site. To ensure that you are following the right tutorial for your needs, you may wish to read a brief description of each: Preloader Tutorial Listings

Example: Download the Flash file Int 147a

A photo inside a Flash Movie: Auckland, New Zealand (my home town).

Note: If you didn't see the preloader press Refresh (F5) in your Browser. Once a Flash Movie has loaded, depending on your local settings, the Browser may not wish to re-load it. Therefore if you did not see the above Movie load: Click here

Step One: Setting up the Publish Settings

1. Open up new Movie: File > New > Flash Document > OK
2. Click: File > Publish Setting
3. Under the Formats Tab for Type Select: Flash
   
   
   
   
4. Click the: Flash Tab
5. Select: Flash Player 6 (or higher)
6. Select: ActionScript Version 2
   
   
   Selecting Player 6 and ActionScript 2.
   
   
   If you are using a preloader it is likely that your Flash Movie is large. So I would suggest that you also select Compress Movie. This can make a dramatic difference to the size of the final Movie. I have often seen up to 40% reduction in the file size, depending on the Movie's content. In my experience compressing a Movie makes no difference to the performance.
   
   
7. Select:
   
   
8. Click: OK

Step Two: Creating the Preloader Progress Bar

1. In the TimeLine rename Layer 1 to: Preloader
2. Go to: Window > Development Panels > Components (Ctrl F7)
3. Click on the Expand Button next to the UI Components:

Note: You should now be able to see a long list of UI Components.

4. Drag onto Stage a copy of the Progress Bar:
   
   
   The Progress Bar on Stage.
   
   
5. In the Property Inspector give the Progress Bar the Instance Name: myProgressBar

Step Three: The ActionScript

1. In the Timeline click on the Insert Layer Button:
2. Rename this new Layer: ActionScript
3. On frame 1 of this new Layer add the following ActionScript (if you wish you may leave out the gray code hints):
   
   
   // Create a listener object event function. The progress bar is an object so it needs an object function to work
   myProgressBarListener = new Object();
   
   // When the progress bar is complete and has preloaded this movie, the listener will call and run this code below:
   myProgressBarListener = function (eventObject) {

// Hide the progress bar now as we don’t need it any more
myProgressBar._visible = false;

// In this example I have used the gotoandstop(); command because I want the movie to go to and stop at frame 2
gotoAndStop(2);

// As an alternative remove the line above and un-comment any of the code below:

// This will go to the next frame but may not automatically play beyond the next frame:
// nextFrame();

// This will go to the next scene but may not automatically play beyond the first frame in the next scene:
// nextScene();

// Replace the X with the frame number you want the Movie to go to and stop:
// gotoAndStop(X);

// Replace the X with the frame number you want the Movie to go to and play:
// gotoAndPlay(X);

// When referring to frame labels ensure that the label name is in quotes in the code:
// gotoAndPlay("MyLableName");

// Close the above function
};


// Declares a listener that detects when the progress component has loaded the movie and is complete. Then calls the function above: myProgressBarListener
myProgressBar.addEventListener("complete", myProgressBarListener);

// We are now setting the progress bar component variables
// Set up the progress bar component to polled when loading the movie. In this case it has to be set to polled to work
myProgressBar.mode = "polled";

// Set the location to load as this movie.
myProgressBar.source = "_root";

// Set the conversion to 1. This basically means the component divides the current and total values loaded and to be loaded. Then it floors them (works out the difference between them) and displays the converted value in the label property
myProgressBar.conversion = "1";

// Set the label to display the word 'loading' followed by the percentage value loaded so far
myProgressBar.label = "LOADING %3%%";

// The direction the progress bar moves when loading
myProgressBar.direction = "right";

// The location of the label that displays the percentage loaded so far
myProgressBar.labelPlacement = "bottom";

// Stops the Movie at the current frame until the Movie has been preloaded
stop();

Note: For addition notes on what Macromedia have to say about the Keywords used in the above ActionScript:

• addEventListener
• mode
• source
• conversion
• label
• direction
• labelPlacement

That's it! Easy hey?