Join Todd Perkins for an in-depth discussion in this video Showing load progress, part of Flash CS4 Professional: Building UI Elements.
The last thing we have to do for our progress bar is actually show the progress of the file loading. So we'll do that in this movie. The first thing I'm going to do is scroll down to the bottom of my code and above all the other event listeners in the Set Loader method, I'm going to add one more event listener to my _loader property. So _loader.contentLoaderInfo. addEventListener and the event is going to be the pre-loading event, which is ProgressEvent.PROGRESS. Then we'll run a method called fileLoading.
Now, we'll define the fileLoading method. I'll do that right above the set loader method. So private function fileLoading, receive an event with the datatype of ProgressEvent, call in void, no return data and then here we'll create a variable called percent. It's going to be a number. It's going to be a value between 0 and 100, will reflect the progress of your loaded file. Now, the progress is held in this event object. So it has one property called bytesLoaded and one called bytesTotal. So you divide bytesLoaded by bytesTotal and you get the percentage. That's just the number between 0 and 1. To get the whole number between 0 and 100, we just multiply that value by 100 and round it.
Here's what that code looks like. I'm going to start by writing Math.round on the outside, some parentheses. So we're going to take this whole number and round it. So the first thing we're going to do is take event.bytesLoaded and divide it by event.bytesTotal. I am going to wrap that in parentheses. So event.bytesLoaded / event.bytesTotal. Then after the closed parenthesis so I'm still inside of Math.round but outside of event. bytesLoaded / event.bytesTotal. Then I'm going to multiply that value by 100. It's going to give me my whole number between 0 and 100. That will show the percentage that's loaded. And we'll use that variable on the next few lines.
So go down to the next line and we'll put it inside the text field first. So prog_txt.text. That's our text field inside of that Progress Bar movie clip. I'm going to set it equal to percent +, and then I'm going to put the percent string after that. It's a little percent symbol. So we'll say 0%, 1%, 2% and so forth. So the next line. We'll gotoAndStop, and pass in percent in the parentheses. So we'll take that value between 0 and 100, translate to a frame number, and go to that frame. So if it's 0, it's just going to go to Frame 1. So we'll go to each one of the frames and as the file loads, it will show the percentage in our Progress Bar. So save this file, test the movie, remember that you have to test it again to see the load progress, and there you have it.
Now, it's important to note that occasionally you might have an error. So if I keep testing the movie here like really fast, over and over again, I get this weird error that says Load never completed. Now, I just want to tell you here that you don't need to worry about that. That's just some error that happens only in the Flash Player when you're testing it in Flash. This is not going to create a problem when it goes online. This is just some kind of glitch in the Flash Player that's installed in the Flash. So totally disregard that and you'll be fine. If you absolutely do not want to see any kind of error, what you need to do is listen for this IOErrorEvent. You can look up information on that in Flash Help.
So with that code written, that completes our Progress Bar. So remember that you can listen for that Event. ProgressEvent and you can get that amount that's loaded by dividing bytesLoaded by bytesTotal and multiplying that by 100, taking that number and rounding it. That's how we get the percentage, simply put it in the text field, and then go to that frame to create the Progress Bar.
- Applying OOP to real-world projects
- Creating customizable elements for a unique look
- Learning efficient workflow practices with ActionScript 3.0
- Developing new programming skill sets with OOP
- Reusing custom codes across several applications