Custom Preloader in Flash CS3 and AS3

http://monkeyflash.com/tutorials/custom-preloader/

Posted January 21st, 2008

The ability to create a custom preloader is a must in any Flash developers toolbox, but the process is very different in ActionScript 3.0. External files are no longer loaded into a waiting empty movie clip on the stage like you might have done in earlier versions. Instead images, SWF files, and any other external content are loaded using the Loader class. The process is different, but not difficult. Lets put together a basic custom preloader that can be used in a Flash movie for loading external images or other SWF files. Since I want to focus on the code, Ive provided an example file to get you started. Download the example files, and open preloader.fla. Getting started 1. Open preloader.fla and review its contents. Inside preloader.fla, youll notice that the stage is empty. Thats because were going to load an external file and display it here. Were also going to use code to dynamically place the preloader on the stage and to remove it when loading is complete. Press Ctrl-L to open the Library. Inside youll see two movie clips. The first, barMC, is a simple green rectangle that will be used to create a visual progress bar while our file is loading. Notice that the registration point of this shape is on the far left side. This shape will scale from that point as it grows. Preloader is a movie clip that will contain all of the pieces of our preloader. If you right-click (Ctrl-click on a Mac) on the Preloader movie clip in the Library and select Linkage you will see that the checkbox for Export for ActionScript has been selected. This means that when the file runs, we can access this movie clip dynamically by its class name, Preloader.

The Linkage properties for the Preloader movie clip. Double-click on Preloader in the Library to open it. There are three layers in this timeline. The text layer contains the Loading text that will tell the user what percentage of the file has been downloaded. Notice that the text box has an instance name of loading_txt. The bar layer contains an instance of the barMC movie clip that will expand to visually indicate how much of the download has completed. The green bar has an instance name of bar_mc. The frame layer simply contains an open box shape. This is an extremely simple preloader - feel free to create your own graphics that will better match your project.

Custom Preloader in Flash CS3 and AS3

http://monkeyflash.com/tutorials/custom-preloader/

Posted January 21st, 2008

The barMC movie clip has an instance name of bar_mc in the Properties inspector. 2. Add ActionScript to load the external file. Return to the main timeline by clicking Scene 1 under the timeline. Click in the first frame of the actions layer and press F9 to open the Actions panel. Begin by telling Flash what file you want to load. This can be any image or even another SWF file. Ive included an (intentionally rather large) JPG file in the example files for you to use as practice. The Loader class expects to receive a URLRequest pointing to the file you wish to load, so well need to start by creating a new URLRequest for to the external file. Well also need to create an instance of the Loader class to begin. Add the following code to the Actions panel. (If youre loading a different file that the example, replace large_image.jpg with the name of your file.) var myRequest:URLRequest = new URLRequest("large_image.jpg"); var myLoader:Loader = new Loader(); 3. Begin loading the external file. Tell the myLoader instance of the Loader class that we just created to begin loading the file with the next line: myLoader.load(myRequest); 4. Create listeners to monitor the progress of the file. At this point in the code, Flash will begin loading the file. We want to create a few event listeners to monitor the progress. The first will run a function called showPreloader() that will place the Preloader movie clip on the stage. The second listener will run a function called showProgress() that will visually update the preloader bar and text to reflect the download progress. The third listener will run the function showContent(), which will remove the preloader and show the content once the download is complete. The Loader class has a property called contentLoaderInfo that contains information about the file being loaded. Adding the listeners to this property allows us to monitor the download as it happens. Add the following code to the Actions panel:

Custom Preloader in Flash CS3 and AS3

http://monkeyflash.com/tutorials/custom-preloader/

Posted January 21st, 2008

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader); myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress); myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent); 5. Create an instance of the Preloader movie clip. Before we can display the Preloader on the stage, well need to create an instance of it in ActionScript, so that we can refer to it by name. Well call this new instance myPreloader. Add the next line to the Actions panel. var myPreloader:Preloader = new Preloader(); 6. Create the showPreloader function to display the preloader. The first event listener above will run a function called showPreloader(). This function will place the myPreloader instance on the stage using addChild(). Then it will position the preloader in the center of the stage by modifying its x and y properties. (If youd like your preloader to appear someplace else on the screen, you can modify these properties here.) function showPreloader(event:Event):void { addChild(myPreloader); myPreloader.x = stage.stageWidth/2; myPreloader.y = stage.stageHeight/2; } 7. Add the showProgress function to update the preloader as the download progresses. The function that handles the visual updates to our preloader is called showProgress(), and is called from the second listener each time the ProgressEvent PROGRESS is triggered, which is when additional data from the download is received. This function will calculate the percentage completed by dividing the number of bytes downloaded so far by the total number of bytes. It will update the text display to reflect that amount, multiplied by 100 and rounded to a whole number. Then the function will update the width of the progress bar by setting its width to the maximum width multiplied by the percent loaded. (The maximum width in this case is 198 pixels - you might need to adjust this value if you created your own custom graphics.) function showProgress(event:ProgressEvent):void { var percentLoaded:Number = event.bytesLoaded/event.bytesTotal; myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%"; myPreloader.bar_mc.width = 198 * percentLoaded; } 8. Add the showContent function to display the file after it has been loaded. The last listener above will run the showContent() function once all of the bytes of the external file have been completely loaded. The showContent() function simply removes the preloader from the stage, and then adds the myLoader instance, making the loaded content appear. function showContent(event:Event):void { removeChild(myPreloader); addChild(myLoader);

Custom Preloader in Flash CS3 and AS3

http://monkeyflash.com/tutorials/custom-preloader/

Posted January 21st, 2008

function showContent(event:Event):void { removeChild(myPreloader); addChild(myLoader); } 9. Test the preloader by simulating a download. To test the preloader, we will use Flashs built-in bandwidth simulator. Previewing the file from our local drive will cause the content to be loaded almost instantly, and you will only see the preloader for a fraction of a second. By simulating a slower download speed, we can test the functionality of the preloader. First test the movie by pressing Ctrl-Enter. If you do not have any errors, you will see your loaded content appear immediately. To simulate a download, and to test the preloader, press CTRL-Enter a second time. Flash will reload the test movie, and then simulate a download of the content at a controlled speed. The default setting is a 56kbps modem, and will give you time to study the behavior of the preloader. It should slowly count up the percentage in the text box, and the progress bar should slowly grow. When the download is complete, your loaded content will display.

The preloader in action. What about loading the entire movie? How can you use this same technique to load the entire SWF file and not an external asset? One way is to create a wrapper swf that only contains your preloader and the code above. You can then load your main SWF file into this wrapper container, and avoid the need to add a preloader to an already-completed Flash file. This is a very efficient and easy way to add a preloader to any site. As with all things in ActionScript, there are other methods as well, but some are more difficult and best saved for a future tutorial. :) Heres the completed code: var myRequest:URLRequest = new URLRequest("large_image.jpg"); var myLoader:Loader = new Loader(); myLoader.load(myRequest); myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader); myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress); myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent); var myPreloader:Preloader = new Preloader();

Custom Preloader in Flash CS3 and AS3

http://monkeyflash.com/tutorials/custom-preloader/ function showPreloader(event:Event):void { addChild(myPreloader); myPreloader.x = stage.stageWidth/2; myPreloader.y = stage.stageHeight/2; }

Posted January 21st, 2008

function showProgress(event:ProgressEvent):void { var percentLoaded:Number = event.bytesLoaded/event.bytesTotal; myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%"; myPreloader.bar_mc.width = 198 * percentLoaded; } function showContent(event:Event):void { removeChild(myPreloader); addChild(myLoader); }