How to Create a Preloader Using Flash and ActionScript 3.0
Greetings all,
Any book is usually judged by its cover. If the book’s cover is perceived to be attractive or compelling then most likely people would want to delve more into the book and in return help them decide to acquire or obtain the book. The same is true when it comes to Flash web design, a preloader is what precedes any flash content and therefore we usually continue to preview a Flash site depending on how good or stimulating the preloader is. In this tutorial we are going to explain to you in details how a preloader is first designed in flash authoring tool and then use ActionScript 3.0 to animate and make the preloader fulfill its duty.
Lets start by opening a new file in Flash (ActionScript 3.0). Using a brush, draw a shape similar to what is shown below. You can, if you want, draw any shape you want or use a pre-designed animation of your own. In our case we are more interested in the functionality of the preloader more than the animation, which can be substituted with any animation as long as it’s a movieclip.
Convert the created shape into a movie clip symbol named shape. Then create a new movie clip symbol and name it animation. In this movieclip create two layers. One named circle and the other shape. In the circle layer and in the first frame, draw a circle of any color that has a width and height between 60 – 70 pixels, this will act as our guide to position the shape. Then center it in the stage and convert the layer to guide layer.
On the shape layer, grab the shape movieclip from the library and drop it on the shape layer. Place the shape as shown in the illustration below:
Apply some glow filters to the shapes in both key frames. The setting for the glow filter are as follow:
Now we need to create a new movieclip symbol which will be our preloader animation. So go ahead and create a new movieclip symbol, call it preloader. Select export for actionscript and call the class PreloaderAnim.
Click enter and then drag an instance of our previously created animation into frame one of preloader movieclip and then on frame 25 hit F6 to make a copy of the animation. On this frame, rotate the animation 180 degrees clock-wise and then right-click anywhere in between the two key frame and select Create Shape Tween. If you test the movie now you will notice the animation is not smooth, to remedy that we hit F6 before the last frame (frame 24) and then delete frame 25 altogether. We are done with the animation and you should have something like this.
Additionally, create a Font symbol and name it PreLoaderFont and give it any font you want in our case the font chosen is Arial with bold style and size 14. Right-click the font symbol in the library and select Linkage and select export for actionscript and Capitalize the first letter to make it distinguishable from the instance. This class will be called by the PreLoaderClass as will be explained in the actionscript file.
Now create a new flash actionscript file and copy the following code, which is self explanatory and fully commented in every step, and paste it to your actionscript file. You will need to save this actionscript file in a folder name fj. see image below.
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | // Author: Twin-Link // Date: 18/09/2009 // Version: 1.0 // Indicate that the PreLoderClass is a member of the fj package package fj { // Make externally defined classes and packages available import flash.display.MovieClip; import flash.display.Stage; import flash.events.*; import flash.display.Loader; import flash.display.LoaderInfo; import flash.net.URLRequest; import flash.text.TextField; import flash.text.TextFormat; // Define the PreLoaderClass class public class PreLoaderClass extends MovieClip { // The a variable to hold the url with the name of the file to be loaded public var loadedFile:String; // The percentage value that is displayed while loading the file public var percentageText:TextField = new TextField(); // The pre-defined font to be used for the percentageText text field public var preLoaderFont:PreLoaderFont; // The text formatting for the ercentage text field public var textFormat:TextFormat = new TextFormat(); // The Loader instance that is used to load our SWF file or image (JPG, PNG, GIF) files public var loader:Loader; // An instance of the PreLoaderAnim movie clip that is // found in the SimplePreLoader flash document library public var preLoaderAnim:MovieClip = new PreLoaderAnim(); // A variable that is used to store the calculated percentage value public var percent:Number; // PreLoaderClass constructor public function PreLoaderClass(fileName:String) { // get file name loadedFile = fileName; // set the font-family, font-size and color for th percentage text preLoaderFont = new PreLoaderFont(); textFormat = new TextFormat(); textFormat.font = preLoaderFont.fontName; textFormat.size = 12; textFormat.color = 0xFFCC00; percentageText.defaultTextFormat = textFormat; percentageText.embedFonts = true; // add the preLoaderAnim Movie Clip and percentageText Text Field to the stage addChild(preLoaderAnim); addChild(percentageText); // start loading the targeted file (SWF or image [JPG, GIF or PNG]) loader = new Loader(); loader.load(new URLRequest(loadedFile)); addChild(loader); // Use the displayFile function to display the file, once loading is complete loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayFile); // Use the showProgress function to display the progress of the loading process loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress); } public function showProgress(event:ProgressEvent):void { // calculate the percentage of the downloaded bytes against the total file size percent = Math.round((event.bytesLoaded / event.bytesTotal ) * 100 ); // display the percentage as text with the % sign next to the value percentageText.text = "% " + percent; // display the movie clip and the percentage text in the center of the stage percentageText.x = stage.stageWidth / 2 - percentageText.textWidth + 14; percentageText.y = stage.stageHeight / 2 - percentageText.textHeight + 6; preLoaderAnim.x = stage.stageWidth / 2; preLoaderAnim.y = stage.stageHeight / 2; } public function displayFile(event:Event):void { // remove both the movie clip and the percentage text from the stage removeChild(percentageText); removeChild(preLoaderAnim); } } } |
Back to flash authoring tool and in the first scene; name the first layer actions and enter the following code:
1 2 3 4 5 | import fj.PreLoaderClass; // The Automn Leaves.jpg can be replaced by any swf file or image of your choice // as long as this file exist in the same folder as your preloader flash file var preLoaderClass:PreLoaderClass = new PreLoaderClass("Autumn Leaves.jpg"); addChild(preLoaderClass); |
Now when you test the movie clip and in the menu select simulate download and you should be able to see the preloader doing it’s magic. Thank you for reading and remember you can have your own animation and the code will still work. Please send us a link of your creation if the animation is different. We would like to see how creative you can get.
Want to stay updated with more great posts link with me on twitter here 
This article has been shared on favSHARE.net. Go and vote it!
Did anyone like this tutorial or disliked it?
I’m new to flash and Actionscript, so this is a great tutorial. I especially love the focus on the custom design element with it!
Thanks for stopping by Kayla, we tried to make it simple and to the point. We are going to have more Flash/ActionScript 3.0 posts in the comming weeks. So stay tuned. We will be focusing more on AS3 OOP approach.
I’m glad you liked the design element of the tutorial that’s what We’d like to hear. There is another tutorial that we did earlier that also combines the power of actionscript with an elegant design to create an mp3 player you can check it here Creating an mp3 Player from Design to Finish.
Howdy that
Some interesting posts on this blog and a load of great knowledge. If you happen to have time, visit me and come and take a look at my efforts available at sandiegowebdesign-seo.com and give me a comment.
This is one nice tutorial, I just started learning flash, so it might seem naive to you my question,
How do you give shape tween to a movie clip? I dont understand this step “Click enter and then drag an instance of our previously created animation into frame one of preloader movieclip and then on frame 25 hit F6 to make a copy of the animation. On this frame, rotate the animation 180 degrees clock-wise and then right-click anywhere in between the two key frame and select Create Shape Tween”.
please solve my problem
You can’t shape tween a movie clip. Only shapes can be shape tweened
As for the second part of your question. What I meant is that after you have created your new movie clip the “PreloaderAnim” we create a new key frame on the first frame and add to it the previously created movie clip “animation”. Then on frame 25 of the PreloaderAnim hit F6 which will make a copy of the animation movie clip. To make the animation movie clip rotate we select the animation movie clip on frame 25 and rotate it 180 degrees clock-wise. Then select any frame between frame 1 and 25 and right-click and choose Create Shape Tween. You are now done with the settings and can add the code where specified in the tutorial and it should work.
By the way I’m still a newbie at this myself, so there is no such thing as silly questions
I dont understand this step either:
“To make the animation movie clip rotate we select the animation movie clip on frame 25 and rotate it 180 degrees clock-wise. ”
If we can’t shape tween a movie clip, then how would this work?
It’s an animated movie clip symbol, my bad
do you have the source file available for download? It would be very helpful to me in understanding how this preloader works.
thanks!
Yes JJ if you click the big “Download” green key on top, you will get the full source code.
the “download” button doesn’t work. It leads to a page that says:
“ERROR 404
We are sorry, the page you are looking for does not exist”
Really sorry to know that the link gives an error. I’m currently abroad and don’t have the file with me. I’ll try to ask my brother and partner to fix the link.