How to make a flash preloader
Difficulty: Beginner
Download fla Source
Building a preloader with flash is pretty simple, but a lot of flash animators are still struggling with the code. In this flash tutorial, you will learn how to make a flash preloader from scratch.
Step 1
Create a new MovieClip with Insert > New Symbol. Name it preloader
Step 2
Within preloader, add a dynamic textfield and name it pc_txt
Step 3
Add a progress bar movieClip
and
name the instance progressBar
Add the code
below to a frame within the preloader movieclip
var pc = 0;
this.onEnterFrame = function(){
pc = Math.floor((_root.getBytesLoaded() /_root.getBytesTotal()) *100);
this.pc_txt.text = pc+"%";
this.bar._xscale = pc;
if (pc == 100 && !isNAN(pc)){
delete this.onEnterFrame;
_root.play()
}
}
The flash preloader code explained line by line
var pc = 0;
Declare pc variable which will hold the loaded percentage of the movie.
this.onEnterFrame = function(){
The onEnterframe function will execute its code every passing frame, therefore if your movie fps (frames per second) is set to 24, the preloader will do a check on the loading progress 24 times per second.
pc = Math.floor((_root.getBytesLoaded() /_root.getBytesTotal()) *100);
Calculate the loading progress of the movie and put it in the pc variable. Math.floor() rounds the percentage loaded.
this.pc_txt.text = pc+"%";
Display the loading progress by updating the text in of the pc_txt textfield.
this.bar._xscale = pc;
Update the width of the loading bar the reflect the preloader progress.
if (pc == 100 && !isNAN(pc)){
Verify if the variable pc is equal to 100 and that it is a valid number.
delete this.onEnterFrame;
Delete de onEnterFrane event, we don't want to continue asking about the loading progress since it is done.
_root.play()
Play the _root timeline since the movie is loaded completely and ready to run.
Once you have your preloader MovieClip containing all the code and elements it needs to preload a flash movie, all you have to do is drop it on the first frame of any flash project, and start preloading!
|
