In this tutorial we are goin to expand on the previous preloaders tutorial by adding a loading bar and percentage counter. If you have not completed the previous tutorial, please click here! Your end result will be something like this:
STEP 1
Create a new actionscript 2 file, change the framerate to 30 and rename layer 1 to ’stuff’. First off we will draw our loading bar. Select the rectangle tool and set the fill colour to your liking, with an outline of an alternative colour (black / dark grey recommended!). Select all of this shape and press f8 to convert to a movie clip called MC_loadBar. Give this an instance name of MC_loadBar.
STEP 2
Doubleclick on this movieclip to enter it’s timeline. Rename the first layer to ‘bar’. Double click on your outline to select it, then cut. Create a new layer called border, and paste the outline in place here. Lock this layer. Select frame 100 on both layers and create a new keyframe (f6). These 100 frames represent the percentage loaded of your clip, so on frame 1 select the bar and shrink it from the right so there is just a slither showing on this first frame. Add a shape tween then hit enter and you should see the bar going up. The last thing to do on this clip is to select the last frame, press f9 to enter the actions panel and put:
stop();
This will stop the movie clip timeline once it reaches this point. Add a stop command to frame 1 also.
Your stage should now look like this:
STEP 3
On the main timeline create two new layers above the ’stuff’ layer called ‘actions’ and ‘frames’. Select frame 10 on all layers and enter a new frame (f5). This will give you some space to work with. On frame 1 on the actions layer, press f9 and add the following code:
percent = Math.floor(_root.getBytesLoaded()/getBytesTotal()*100);
On the actions layer create a new keyframe on frame 8, press f9 and enter the following code:
if (percent == 100){
gotoAndPlay("complete");
}else{
gotoAndPlay("loop");
}
If you are unsure what this code means, please see the basic preloaders tutorial found here.
STEP 4
On the frames layer, rename frame one to loop. Create a new keyframe on frame 10 and apply the frame label ‘complete’. Add a new keyframe on frame 10 of the actions layer, press f9 and add:
stop();
We are now ready to add the code to control the loadBar. On frame 1 of the actions layer, press f9 and add the following code under the percent variable:
onEnterFrame = function(){
MC_loadBar.gotoAndStop(percent);
}
This is telling the movie that on entering this frame (everytime the loop runs), gotoAndStop on the frame equal to the percent value. For example if percent is 80, it will go to frame 80. This will update each time the loop runs, so a visual representation of the percentage is now available!
STEP 5
This is all well and good, but there are many things you can use the percent variable for now.
For example, you can create a text box to display the value of percent. To do this draw a dynamic textbox on the stage and give this the instance name of percentage. Then add the following code to the onEnterFrame function on frame 1:
percentage.text = percent + "%";
this displays the value of percent, plus the % symbol in the dynamic text box.
Have a go! Create your own preloaders and animations, there is no limit to what you can do, just your imagination! Enjoy!
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
How do I ad this to my website fot loading external swf
Hi Thomas,
The best thing to do is look at this tutorial for loading external files - HERE.
This can be used to import external swf’s into flash by entering the url.
Basically you need a new flash file to create the pre-loader,and import the swf into it, then embed this new file on your page.
The Dude
Hi, Dude.
I need some help here, I try to follow each step carefully, but obviously I keep missing something. I can get the percentage-text to work, but the loadbar thingy just stays at frame 1 all the time. What have I missed?
Hey Dude,
I’ve been looking for a good preloader tutorial for a while now, as i’ve seen various uses of this type of coding, but like The Arm, I tried your tutorial and got the dynamic text to work, but the loadbar sticks to frame 1 as well….
@The Arm + @Ben -
Hi guys, are you sure you have set the instance name of the loadbar to ‘MC_loadBar’? If not, on the main timeline select the loadBar movieClip and in the properties panel at the bottom of your screen there is a box called ‘Instance Name’. Set this to ‘MC_loadBar ‘ otherwise the Actionscript cannot call the movieclip, therefore the bar will not move from frame one
Try this, if your still having probs let me know!
The Dude
Ah, I missed that instance name part.
But hey, another question. Where do i put this new flashy preloader of mine in order for it to load the rest of the movie? In a new scene, or what?
This is SO awesome, thanks so much!
I don’t know what is wrong but i did it and it just comes up with the loading bar full at the sand that is it it won’t do anything ….
Sounds like you have not set the instance name on the MC. Read comment 5 and see if that helps
The Dude
my preloader can work but the percentage and the loading bar does not load together. the percentage loads first. any ideas?
is there something wrong with my code for the onEnterFrame
here’s my code:
percent = Math.floor(_root.getBytesLoaded()/getBytesTotal()*100);
onEnterFrame = function(){
loadBar_mc.gotoAndStop(percent);
percentage.text = percent + “%”;
}
Thank you - I’ll be sure to check back later for more of your posts.