Mikey:)
28th June 2007, 09:29 PM
In this post I'll try to explain how to make a preloader showing a progress bar and percentage using flash and actionscript.
1. Open Flash and create a new Flash document
2. On the stage draw a rectangle, this will be your progress bar.
3. Right click the rectangle and choose convert to symbol, turn it into a movieclip and name it loaderbar_mc. Then enter the name loaderbar as the instance name in the properties panels. This means that the instance of the rectangle on the stage can now be referenced in our actionscript as "loaderbar" and allow us to control its properties.
4. Change the width and height of the loaderbar to 500 wide and 50 high and center it on stage
5. Create a text box on the stage and type 00 into it, then change this from static to dynamic text in the properties box. Give this the instance name percentage and variable name percentage.
6. Create a keyframe in frame 2 of the timeline and import a jpg into this frame, this is just something for flash to load up so we can see the preloader working.
7. Create a new layer on the timeline and name this actions. Make a keyframe in frame 1 of this new layer and open the actions panel (F9) then add this script
stop();
8. Repeat this in frame 2, these are stop commands to tell flash to stop playing the main timeline when it reaches that frame.
9. Select the loaderbar and open the actions panel then add this actionscript
onClipEvent(enterFrame){
var percent= _root.getBytesLoaded()/_root.getBytesTotal()*100;
this._xscale=percent;
_root.percentage=percent;
if (_root.getBytesLoaded()==_root.getBytesTotal()){
_root.gotoAndPlay (2);
}
}
Ill break that down a little.
onClipEvent(enterFrame) This is telling flash to keep running the script in a loop for as long as the loaderbar is in the frame. The script runs between the { and } symbols.
var percent= _root.getBytesLoaded()/_root.getBytesTotal()*100; Here we declare a variable named "percent". Basically we're telling flash to divide the total amount of data to be loaded by the current amount loaded to create a percentage and to store that percentage in a variable called percent.
this._xscale=percent; Here we are saying the saying that the width (xscale) of this loaderbar is equal to the value of our percent variable.
_root.percentage=percent; This is saying that the text box value is equal to the value of the percent variable, this will display our percentage in the dynamic text field.
if (_root.getBytesLoaded()==_root.getBytesTotal()){
_root.gotoAndPlay (2); Finally we tell flash that if the total and loaded data amounts match to play the next frame on our main timeline and show the picture.
Test the movie, you wont see much as it loads too quickly! If you click on the view menu and change the download settings to 56k or lower then select simulate download you will see it working.
Good luck, if you have any questions I'll try to help.
1. Open Flash and create a new Flash document
2. On the stage draw a rectangle, this will be your progress bar.
3. Right click the rectangle and choose convert to symbol, turn it into a movieclip and name it loaderbar_mc. Then enter the name loaderbar as the instance name in the properties panels. This means that the instance of the rectangle on the stage can now be referenced in our actionscript as "loaderbar" and allow us to control its properties.
4. Change the width and height of the loaderbar to 500 wide and 50 high and center it on stage
5. Create a text box on the stage and type 00 into it, then change this from static to dynamic text in the properties box. Give this the instance name percentage and variable name percentage.
6. Create a keyframe in frame 2 of the timeline and import a jpg into this frame, this is just something for flash to load up so we can see the preloader working.
7. Create a new layer on the timeline and name this actions. Make a keyframe in frame 1 of this new layer and open the actions panel (F9) then add this script
stop();
8. Repeat this in frame 2, these are stop commands to tell flash to stop playing the main timeline when it reaches that frame.
9. Select the loaderbar and open the actions panel then add this actionscript
onClipEvent(enterFrame){
var percent= _root.getBytesLoaded()/_root.getBytesTotal()*100;
this._xscale=percent;
_root.percentage=percent;
if (_root.getBytesLoaded()==_root.getBytesTotal()){
_root.gotoAndPlay (2);
}
}
Ill break that down a little.
onClipEvent(enterFrame) This is telling flash to keep running the script in a loop for as long as the loaderbar is in the frame. The script runs between the { and } symbols.
var percent= _root.getBytesLoaded()/_root.getBytesTotal()*100; Here we declare a variable named "percent". Basically we're telling flash to divide the total amount of data to be loaded by the current amount loaded to create a percentage and to store that percentage in a variable called percent.
this._xscale=percent; Here we are saying the saying that the width (xscale) of this loaderbar is equal to the value of our percent variable.
_root.percentage=percent; This is saying that the text box value is equal to the value of the percent variable, this will display our percentage in the dynamic text field.
if (_root.getBytesLoaded()==_root.getBytesTotal()){
_root.gotoAndPlay (2); Finally we tell flash that if the total and loaded data amounts match to play the next frame on our main timeline and show the picture.
Test the movie, you wont see much as it loads too quickly! If you click on the view menu and change the download settings to 56k or lower then select simulate download you will see it working.
Good luck, if you have any questions I'll try to help.