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.
Help me out by voting for this tutorial
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.
I have made your pre-loader (as above) but I am unsure of how to link it within an entirely flash website? I have a main swf file and I figure the pre-loader goes between that and the other movie files linked to it? How do I do this so that it loads in other movies accordingly? Pretty stumped. Any help is appreciated!!
Dude, please make the source file down-loadable. So much easier to learn / understand.
Hi, Dude.
Thanks for the tutorial.
Here’s what happens when you go to my site- the blank background shows up for a long time. Then, like right before the actual movie plays, the preloader quickly flashes up and goes right into my site.
http://www.pikkuarkki.com
Any suggestions? Have I missed a stop action?
Hello, I need help with alot of different tutorials, would it be a bother to ask for the tutorials I went along. Your website is the only website that I have found to be understandable. I would like to email about some other things that I dont want to be free over the internet yet. It has to do with gaming a other things like that.
HEy dude!! thankz for the tutorial very much, it works fine but i am not being able to put the percentage text…i am confused to where do i insert the code in the enter frame section. could you please show me how the final action script looks like
Hello, just completed the tutorial, and worked nice on its own.. but when adding the pre-loader to the website I’m building, though it works, it shows exactly: 29731% in the percentage field !!!!
what is wrong? how can I fix this?, just needed a nice preloader with a simple code for the opening of the website :-/
thanks in advance
This is a great post and its very creative indeed but if only you people would properly give cubefield a shot. Its a great game. Very addicitve and very entertaining to all age groups.
may be instead of typing this correctly:”percent = Math.floor(_root.getBytesLoaded()/getBytesTotal()*100);” u typed this: percent = Math.floor(_root.getBytesLoaded()/getBytesTotal);? am i right? if i am type the correct text.
Hi there, I have made an html website with a flash intro. I have it sitting in an html page and it loads fine but takes a while to loads so I want to put up a loading bar. What is the best way to do this? I have tried a number of loading bars and either they load when I test the swf files but dont actually load online or the page stays blank for ages then it loads quickly in a flash and plays the intro. I had one that loaded perfect but the coding somehow stopped some of the components of my websites working! Can anyone help?? It would be greatly appreciated! Thanks HEAPS in advance!!
This is by far the most easy-to-follow, easy to understand and highly effective tutorial on AS2 preloader I have encountered. Thank you for doing this man! At first I was hoping to have a downloadable file so I could play with, but then I realized by following the step-by-step instruction, I can understand the concept better. Thanks again.
appreciated lots, I am obliged to announce that your site is brilliant!
Hi Dude, finally a page I can understand - thanks ;0)
I have a problem though. I made a flash site which is supposed to load php text using array and LoadVars. It works fine on some computers, but not on others. I think the problem is that the text loads slowly on some computers, and my question is if this preloader can be made to check if my php text is loaded. I did not make the php myself, and I used tutorials to load it in flash, but I can’t seam to find any tutorial that helps me with this problem in a way I can understand.
I would really appreciate your help!