pic 1 |
I hope you have started Flash. Ok. Press R to get the Rectangle Tool and draw a rectangle
of the size that your progressbar should have. Now click on it's fill and press del. Next doubleclick the border
to select it and F8 to convert it to a symbol, give it a name like bar or something else and press enter. Your screen
should now look like the pic to the left. Look into the Frame Panel under Instance tab and give it the the name bar. Now doubleclick
on the symbol (be sure to doubleclick on the border!) |
|
|
| 2. Step - fill of progress bar |
|
|
pic 2
pic 3
pic 4 |
Here comes the first little tricky part. Ok let's do it step by step. First goto frame
100 and press F5. Then Press K to get the paint bucket Tool. Click on the Fill Color and select the bottom left gradient
now click on  , then fill
the rectangle. Press on 
then on your fill. Rotate your fill 90° clockwise and scale it that it fits perfectly in your bar. Search for your "Fill Panel"
and change there your fill to your whishes, I did it like pic 2. When you're ready select your fill and press CTRL+X select
your 2nd layer and press CTRL+SHIFT+V. Move on to frame 100 and press F6 to generate a keyframe there, now return to frame 0
and select nearly all of your fill (you could hide the 1st layer for easier selecting) and press del to delete it. Your bar
should now look like pic 3. Your're nearly ready with your bar =] Now make a Shape Tween from the 1st to the 100th frame.
If you don't know how to do it go into the frame panel and select the frame tab there under Tweening select Shape. That's
all. Now you can press ENTER and see your bar growing over time. Kewl, right? But a last thing is to do here. We have to add
a stop (); event, that the bar won't start growing without loading :) So doubleclick on the first frame and a new window will
apear. Ok easy step here, Press that "+" and select actions/stop but be sure to have selected the first frame ! Do the same with frame 100 !
Now your timeline will (hopefully) look like pic 4 ! |
|
|
| 3. Step - adding the percent counter |
pic 5
pic 6 |
Huh that progress bar was hard ! Move back to your main scene and press T to get the Text Tool. Click under
your progress bar and type in 0%. Then adjust the color, font size and font to your likes. Next goto Text Panel in the Text Options tab
and change it like I did in pic 5. That's it. Your scene will now look like pic 6. |
|
|
| 4. Step - the Actionscript |
pic 7
| Please add 4 frames to the scene so that it contains 5. Now select the 2nd and press F6 to add a keyframe
then do the same with the 3rd and 5th frame. Now comes the tricky part :) Doubleclick frame 2 to call the actionscript editor. Press CTRL+E
to get in Expert mode and add the following lines: (easily copy and paste)
loaded = int(_root.getBytesLoaded()/_root.getBytesTotal()*100);
if (loaded>=100) {
gotoAndPlay (5);
} else {
tellTarget (bar) {
gotoAndStop (int(_root.getBytesLoaded()/_root.getBytesTotal()*100));
}
percent = loaded add "%";
}
Then add the following code to frame 3
gotoAndPlay ( 2 );
This will loop your preloader until all is loaded. It then jumps automatically to frame 5.
Your timeline should look like pic 7. |
|
|
| 5. Step - new scene |
|
|
Your preloader is ready to use, but to be professional goto Insert/Scene and add a new scene where you put your main movie to this keeps
things more easy when you later extend you preloader.
download the fla file. |
