I wanted to write a basic tutorial on creating a simple flash AS3 (actionscript 3) preloader. Also, I am going to talk about some of the issues that I came across during the process that might help out other designers and developers. You can see the preloader in action by clicking the image below and the code is below that. The comments in the code should help explain exactly what I am doing and be a basic tutorial for any beginner. This preloader is easy to use, just change one line of code, the line defining the name of the swf you want to load, and you can easily change the color too. The download link is below the code, but please give me credit when using it.
One of the first problems I encountered is when I add the url loader with this line of code, “addChild(loader);” Most other tutorials will tell you to put this in your eventlistener complete function, but I have come across several problems when doing that such as the ugly “1009 cannot access a property or method of a null object reference” error.” The reason you get this is because you are trying to do something with the loader before its actual loaded into memory. So I just add the “addChild(loader)” outside of any eventlistener and it resolves it. Then, I add another function inside of the eventlistener complete function to handle any tweens or effects on the preloader itself after its done loading.
Another problem I come across is the text field not fading away when tweening it. This is a textfield problem, I can’t explain why its doing it, it just is, so the work around there is to make it a movie clip and change that movieclip’s blend mode to anything but normal and then the tweens will handle it correctly.
Make sure to check out some of my advanced preloaders for sale on my activeden portfolio and please buy one if they spark your interest. A nicely designed preloader can really impress your client and its only costs a few bucks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | //import tweening libraries import fl.transitions.Tween; import fl.transitions.easing.*; //stop command stop(); //initalize percent, loaded, and total variables for preloader var percent:Number = 0; var loaded:Number; var total:Number; //intialize loader variable var loader:Loader = new Loader(); //set up the listener for the loader object to get the progress of the download loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, getBytesLoop); //set up the listener for the loader object to call loadingDone function when loading is done loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingDone); //set up the listener for the on enterframe event, this is called all the time mypreloader.addEventListener(Event.ENTER_FRAME,preloaderMotion); //load the swf you want //***change this swf name to the one you want to load**** loader.load(new URLRequest("testContent.swf")); //add the loader to the stage addChild(loader); //getbytesloop function sets the info of the loaded swf during the progress of the load function getBytesLoop(e:ProgressEvent):void { //set the total and loaded variable for the progress of the preloader total = e.bytesTotal; loaded = e.bytesLoaded; percent = Math.floor((loaded / total) * 100); //make the text on the screen show how much is loaded textMC.myText.text = percent.toString(); } //loadingDone function hides the preloader when its done function loadingDone(e:Event):void { hidePreloader(); } //preloader motion function give motion to the preloader, add effects here to make your preloader move function preloaderMotion(e:Event):void { mypreloader.rotation += 5; } //hidepreloader function, fades away all the objects in the preloader and shows the loaded content on the screen function hidePreloader():void { var myTween2:Tween = new Tween(mypreloader, "alpha", Strong.easeOut, 1, 0, 1, true); var myTween3:Tween = new Tween(textMC.myText, "alpha", Strong.easeOut, 1, 0, 1, true); } |
Cya
