While most smaller Flash projects do not really need a preloader due to the today\u2019s Internet speed, it is still good practice to always include a preloader in all your Flash projects. In this brief tutorial, I will demonstrate how to preload your Flash assets using AS3.<\/p>\n\n\n\n
Preloading in AS3 is a more streamlined process due to the new & improved event handling structure that AS3 brings to the table. You have more control over what gets preloaded and when it gets preloaded.<\/p>\n\n\n\n
Like most things in Flash, there are many ways to preload your content into your Flash projects. How you create your preloading animation will be totally up to you. In this example, I will be dynamically resizing a preloader\u2019s fill based on the progress percentage of the content being loaded. It is a simple way to demonstrate a preloading action.<\/p>\n\n\n\n
\/\/Define a loader\nvar imageLoader:Loader;\n\nfunction loadThisImage(url:String):void {\n \/\/Show Preloader\n preloader.visible=true;\n imageLoader=new Loader();\n imageLoader.load(new URLRequest(url));\n \/\/Add a listener to update the preloader on the image's progress\n imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,imageLoading);\n \/\/Adding a listener that will update the preloader once the image has been loaded\n imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoaded);\n}\n\nfunction imageLoaded(evt:Event):void {\n \/\/ Load Image by adding it to the display list\n imageLoaderClip.addChild(imageLoader);\n \/\/ Hide Preloader\n preloader.visible=false;\n}\n\nfunction imageLoading(evt:ProgressEvent):void {\n \/\/ Get the current download progress\n var loaded:Number=evt.bytesLoaded\/evt.bytesTotal;\n \/\/ Send progress info to \"preloader\" movie clip\n updateProgress(loaded);\n}\n\nfunction updateProgress(value:Number) {\n preloader.progress.width=value*preloader.bar.width;\n}\n\n\/\/Loading the image defined in the parameter\nloadThisImage(\"image-loaded-large.jpg\");\n<\/pre>\n\n\n\n
As you noticed this example loads an image, but you can very well use it to load you main SWF content or even multiple images. By creating multiple loaders, you can then define the asset in which you choose to load. This will allow you more control over your content being loaded.<\/p>\n\n\n\n
As you can see, preloading content using AS3 is actually pretty easy. Have fun migrating over into AS3!<\/p>\n\n\n\n
Download Source<\/h2>\n\n\n\n