This preloader will have a loading bar and a percent loaded. You will be making something like this. (except in motion)
Step 1
Like always start with a new document, or if your adding this to a already made movie, move your entire movie down 1 frame which should leave a blank keyframe in frame 1. (1 frame is all that is needed for this)
Step 2
Make a rectangular bar. with a stroke color different from your fill color. this will be your loading bar.
Step 3
Click on the fill part of the rectangle (without the stroke) then hit ctrl+c to copy it. and then convert it to a symbol. Select Movie clip (f8), and set its registration to the left center box and give it any name.
Step 4
Hit ctrl+shift+v (This is the shortcut. The long way is to right click then select paste in place) to paste the fill area we copied before into the same spot as the loading bar. You should see no change.
Step 5
Click on the loading bar movieclip and move it strait down a little bit. you should see the bar that was just pasted behind it.
Step 6
Click on the pasted bar and give it a light greyish color.
Step 7
Now click on the loading bar movieclip and move it back up over the other bar.
**Note**
The bar should now look like it would at 100% loaded. Along with a hidden light grey bar behind it.
Step 8
Change the instance name of the loading bar movieclip to "preloader". (case sensitive remove quotes) ***very important***
Step 9
Create a dynamic text box above the preloader line and give it a var name of: "loadpercent". (case sensitive no quotes)
**Make sure the color of the text for the dynamic text is dif from the bg behind it (this may sound dumb but it can really get to you sometimes.)**
Step 10
Now to Add the actual code to make it work. Click on frame 1 (which needs to be followed by a keyframe in frame 2) and open up the action panel (f9).
Step 11
Add this code
| stop();
preloader._width = 0; gbt = _root.getBytesTotal(); preloader.onEnterFrame = function() { scale = ((_root.getBytesLoaded()/gbt)*100); this._xscale = scale; if (scale == 100) { _root.nextFrame(); } loadPercent = (Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100)) + "%"; } |
Now to break it down into normal words. What happens is first off we stop the timeline, so that the script can run completly through before going to frame 2. Then we set the size of our loading bar to 0 (0%). So that it can "grow" to the size you made it. Then we create a function that will get the total amount of bytes in the movie and divide that by the total amount loaded so far so that our bar can move. It then adjusts the bar to the amount loaded with the "this.xscale = scale" line. Then it checks to see that the movie is 100% loaded and if it is it will leave the loop and play the next frame which would be the movie If it doesnt equal 100% the code will go back to the line that starts with "scale =" and run over and over until it equals 100% (looping). Now during all this every time the code is run though it calculates the percent and changes our dynamic text box. The Math.Floor simply rounds the number we get from dividing the loaded bytes from the total bites and then times 100 to get a whole number. it then addes the character"%" to the end to print the % sign at the end.
Step 12
Add some text saying something like loading or get cable... and your all done.
Well since im not going to make it a huge file size it would be hard to show you it im motion heres a pic of it in progress.
Here is a link to download the .swf and the .fla. The fla is for version MX 2004.
To save the swf right click and save target as or save link as.
More Flash & Swish: 
