upuaut8
02-13-2002, 01:24 AM
Well, I finaly got to it. :) sleep helps.
Ok, there are two things that the uninitiated needs to know about preloaders right off the bat. They are A) the loop, and B) get properties functions.
Every time you need to check for something over and over in flash, the best way is to make a loop, out of the action script. Frame loops are the most common, so I'm going to cover them in this post, then we'll move on to onClipEvent (enterFrame) loops.
If you don't have a blank layer, just for action script, then I suggest that you make one. Nothing annoys more than having to search through FLA files for the action script.
1) Create a blank layer, and create a second frame on that layer.
2) With the second frame selected, open the "Action" panel, and insert the following action script.
gotoAndPlay(1);
There you have it.. that's a loop. The play head will reach frame one, go on to frame two, and when it reaches the action script, it will loop back to frame one again.
Now we need some script in frame one to get some properties of the movie. Alot of people like to use framesLoaded. I do not. framesLoaded might be useful if you are trying to test to see if a particuar frame is loaded, but most of us are interested in the total killobytes, and the number of killobytes that have loaded. I use the getBytesTotal();, and the getBytesLoaded(); commands.
3) With frame one selected, enter the following code. I've added "//" in some of these lines. They will show up pink in your action script panel. They are comments and are not important to the Flash player, but should help you to understand what is happening in the code.
//here we are getting the total bytes and the number of
//bytes that have been loaded so far, of the movie, and
//dividing it by 1000 in order to come up with killobytes.
//we set two variables to be equal to these two statements
//like so
totalK=getBytesTotal()/1000;
loadedK=getBytesLoaded()/1000;
//remaining K is just the first variable, minus the second.
remainingK=totalK-loadedK;
//percentage of K loaded is just the second variable divided
//by the first, and then mutliplied by 100.
percentageK=(loadedK/totalK)*100;
//here we set the bar movie clip to scale, left/right by the
//amount of the percentage variable.
setProperty("bar",_xscale,percentageK);
//here is our break out.. if the amount of K loaded is greater
//than the total K of the movie, AND (that's what && means..
//both conditions have to be true) the total K is NOT equal to
//0, then goto the third frame.
if(loadedK>=totalK&&totalK!=0){
gotoAndPlay(3);
}
we need to create a percentage bar
4) Create a new layer.
4a) On the main stage, create a square of fill, with no stroke.
4b) Click on it once to select it, then open your "info" panel. In the height and width fields, enter 20 for height, and 200 for width. Hit enter after making each entry.
4c) With the rectangle still selected, hit F8, and in the dialogue box that opens, select Movie Clip. The name can be anything.
4d) Double click on the bar movie clip to edit it in place. When you're inside the movie clip, select the fill and move it to the right, until it's left side is flush with the small cross hair, representing the middle of the clip.
why go through this step? Because we are scaling the bar movie clip, we don't want it to expand from the middle to either end, but rather from one side out to the right. It just looks better, though I've also had some that expanded from the middle outwards. It's really your choice.
4d) Go back to the main stage, select the movie clip, open your "instance" panel, and enter "bar" in the instance name field.
4e) You may wish to create some text that says 0%, 50% 100% or what ever, and place these near the bar, with 0% on the left side and 100% on the right. See my example.
some people like to have text fields display the different K amounts
5a) Select the text tool. Open the "text" panel and select "Dynamic text" from the pull down menu. The variable name field, will now allow you to enter something into it. Enter "totalK" in this field.
5b) Repeat step 5a, two more times, naming each "loadedK", and "remainingK".
5c) If you like, create some plane text labels for these, and possition to your liking. I usually stack them with totalK on top, loadedK in the middle, and remainingK on the bottem.
That's really all there is too it.
The preloaderBar files are located, for download, as open source, here
www.centerspin.com/downlo...derBar.fla (http://www.centerspin.com/download/preloaderBar.fla)
www.centerspin.com/downlo...derBar.swf (http://www.centerspin.com/download/preloaderBar.swf)
Ask your questions. :)
Ok, there are two things that the uninitiated needs to know about preloaders right off the bat. They are A) the loop, and B) get properties functions.
Every time you need to check for something over and over in flash, the best way is to make a loop, out of the action script. Frame loops are the most common, so I'm going to cover them in this post, then we'll move on to onClipEvent (enterFrame) loops.
If you don't have a blank layer, just for action script, then I suggest that you make one. Nothing annoys more than having to search through FLA files for the action script.
1) Create a blank layer, and create a second frame on that layer.
2) With the second frame selected, open the "Action" panel, and insert the following action script.
gotoAndPlay(1);
There you have it.. that's a loop. The play head will reach frame one, go on to frame two, and when it reaches the action script, it will loop back to frame one again.
Now we need some script in frame one to get some properties of the movie. Alot of people like to use framesLoaded. I do not. framesLoaded might be useful if you are trying to test to see if a particuar frame is loaded, but most of us are interested in the total killobytes, and the number of killobytes that have loaded. I use the getBytesTotal();, and the getBytesLoaded(); commands.
3) With frame one selected, enter the following code. I've added "//" in some of these lines. They will show up pink in your action script panel. They are comments and are not important to the Flash player, but should help you to understand what is happening in the code.
//here we are getting the total bytes and the number of
//bytes that have been loaded so far, of the movie, and
//dividing it by 1000 in order to come up with killobytes.
//we set two variables to be equal to these two statements
//like so
totalK=getBytesTotal()/1000;
loadedK=getBytesLoaded()/1000;
//remaining K is just the first variable, minus the second.
remainingK=totalK-loadedK;
//percentage of K loaded is just the second variable divided
//by the first, and then mutliplied by 100.
percentageK=(loadedK/totalK)*100;
//here we set the bar movie clip to scale, left/right by the
//amount of the percentage variable.
setProperty("bar",_xscale,percentageK);
//here is our break out.. if the amount of K loaded is greater
//than the total K of the movie, AND (that's what && means..
//both conditions have to be true) the total K is NOT equal to
//0, then goto the third frame.
if(loadedK>=totalK&&totalK!=0){
gotoAndPlay(3);
}
we need to create a percentage bar
4) Create a new layer.
4a) On the main stage, create a square of fill, with no stroke.
4b) Click on it once to select it, then open your "info" panel. In the height and width fields, enter 20 for height, and 200 for width. Hit enter after making each entry.
4c) With the rectangle still selected, hit F8, and in the dialogue box that opens, select Movie Clip. The name can be anything.
4d) Double click on the bar movie clip to edit it in place. When you're inside the movie clip, select the fill and move it to the right, until it's left side is flush with the small cross hair, representing the middle of the clip.
why go through this step? Because we are scaling the bar movie clip, we don't want it to expand from the middle to either end, but rather from one side out to the right. It just looks better, though I've also had some that expanded from the middle outwards. It's really your choice.
4d) Go back to the main stage, select the movie clip, open your "instance" panel, and enter "bar" in the instance name field.
4e) You may wish to create some text that says 0%, 50% 100% or what ever, and place these near the bar, with 0% on the left side and 100% on the right. See my example.
some people like to have text fields display the different K amounts
5a) Select the text tool. Open the "text" panel and select "Dynamic text" from the pull down menu. The variable name field, will now allow you to enter something into it. Enter "totalK" in this field.
5b) Repeat step 5a, two more times, naming each "loadedK", and "remainingK".
5c) If you like, create some plane text labels for these, and possition to your liking. I usually stack them with totalK on top, loadedK in the middle, and remainingK on the bottem.
That's really all there is too it.
The preloaderBar files are located, for download, as open source, here
www.centerspin.com/downlo...derBar.fla (http://www.centerspin.com/download/preloaderBar.fla)
www.centerspin.com/downlo...derBar.swf (http://www.centerspin.com/download/preloaderBar.swf)
Ask your questions. :)