Subtitles of the Movie

Continuing with the Preloader project from the previous movie we're now ready to add the code to get the Preloader working. Select the first frame of the Actions Layer of the Main Timeline. Open up the Actions Panel and add this first line of script. We're going to be creating a URLRequest object including the name of the SWF file whose download we'll be monitoring and then loading once the download is down. In this case we're loading a copy of the menu underscore mouse underscore over underscore end.swf file that we looked at previously. Notice that the file needs that .swf extension. This file also must be in the same folder as this Preloader file that we're working on. On the next line create a new Loader object: var myloader, myloader is all lower case, colon Loader, with an uppercase L on the Loader, equals new Loader, with again, another upper case on the Loader. Open-close parentheses and semicolon. On the next line call the Load method using the URLRequest in its parameter, right there, load myrequest. Again, watch these cases here for the myloader and the load, all lower case. Next add an EventListener for the loader object's contentLoaderInfo property and listen for the ProgressEvent. This is a new one for us, this ProgressEvent. I mentioned this earlier in this Section in the previous movie. Here is the event: ProgressEvent.PROGRESS right there. We now add the EventHandler function called progresshandler with a ProgressEvent event as its parameter right here. There's the ProgressEvent. Here is the function name, progresshandler. Notice that's in black. Then I have an opening curly brace there. Don't forget that. Now in between the curly braces of the function declare a variable and assign the ratio of bytes downloaded to total bytes using the next block of code right here. There is the myevent.target, there's the bytesLoaded, divided by the bytesTotal which will give us our percentage that we're monitoring. The amount of data loaded is defined in the progressevents bytesLoaded property. The total data is defined in this one here, progressEvents bytesTotal, that's another property right there. Dividing these two numbers right here provides the ratio of the overall download progress. Now on the next line, but still within the function add this line: bar underscore mc - that's our movie clip and we're going to scale that in the X direction and we're going to set it to the progress. Remember the progress here is the ratio of bytesLoaded to bytesTotal, so that's going to match the amount of download. In other words when the download is 50 percent the bar will progress 50 percent across its total length. Next, we code the display for indicating the numeric progress of the download. Still within the curly braces of the progresshandler function we're going to enter percentage underscore text, that's the name of our Dynamic Text field,.txt equals Math.round. Here the download percentage is rounded to a whole number using this Math.round method. The percent character, right here, is appended to the end to make this easier to read and the result is assigned to the text property of our text field, percentage underscore text, displaying it on the Stage here. Notice I'm taking my progress here and I'm multiplying it by 100 to get that percentage. That's the text value that will be in our Text field. Finally we're going to close out this progresshandler function with a closing curly brace right there. Next we're going to add a second EventListener to the loader object's contentLoaderInfo property and listen for the Event.COMPLETE event right here. Myloader. contentLoaderInfo addEventListener. Now this time we're going to add an Event.COMPLETE listener so when the event is complete, in other words the SWF file has completely downloaded then we're going to run the finished function, right there. Here's yet another event that you've now learned. When targeted content has completely loaded you'll get this Event.COMPLETE call that you can then listen for. As I stated before, as soon as the Event.COMPLETE event has reported from the loading process the function called finished will be called. On a new line enter the finished function as follows: function finished open parentheses myevent colon Event close parentheses colon void open curly brace to open the function. What the function will do is add the myloader to the Stage using the addChild method right there. In this case this will be an SWF file, but this could be any file including a JPEG or MP3 file. Next, the text field, the background image and the movie clip are all removed using the removeChild method. Notice that I'm removing the percentage text instance name, the bar underscore movie clip right there and then the background movie clip, so everything gets removed so it doesn't get in the way of my loaded SWF file. Don't forget to finish off the function here. The finished function with a closing curly brace right there, that's the last line of this script. Now you're ready to save the file and test your movie. Control, Test Movie. Now the first time you test this it'll jump right to your SWF file, so you'll need to go View, Simulate Download and if this download simulates too fast you'll have to change the download settings to the lowest, probably the lowest value unless you have a very large file there. Simulate Download. Make sure you have no errors and no problems. This bar should move from left to right and show the percentage underneath and then load your SWF file or external file that you've been tracking. So there you have the complete code for creating an animated Preloader for your Flash projects. Let me go ahead and expand this out so we can see all the code all in one spot there without having to scroll. There we go. There's the complete code for getting your advanced Preloader working. That will conclude then, this Section of the tutorial on Communicating with Elements External to the Flash Environment. We're now ready for the next Section of the Tutorial: Manipulating Graphics, where you'll learn scripts for modifying colors and Alpha of graphic objects, how to modify filters, apply blends with ActionScript, how to customize the mouse pointer and detect collisions, import tweens and much, much more.