Session 7 Flash Cs3 Tutorial Preloader

Flash CS3 Tutorial COMM/CISS 271 Advanced Web Design

Fall 2008 – Class Session #7                      

Instructor: C. M. Sturgeon

P a g e  | 2   

Table of Contents  Preparing Preloader Graphical Assets .......................................................................................................... 2  Coding your Preloader using ActionScript 3.0 .......................................................................................... 5  What you have learned ............................................................................................................................. 8   

  Preparing Preloader Graphical Assets    Before taking any steps in the process, it is best to understand what a preloader is and its  purpose.  In short, a preloader is a scripting, usually with graphics, that gives the viewer  something to look at while the actual swf is being loaded / downloader to assure smooth  animations within the flash site.  This is especially handy for the user that has a low‐end  bandwidth connection.  Without the preloader a viewer will see  a blank page for some time,  depending on the size of the actual moving loading.  The longer one waits, the more likely  they are to leave the site and move on to other areas.      Start off by creating a new Flash movie with the ActionScript version set to 3.0. The  background color, fame rat, and the stage size do not matter for this tutorial.   

          The preloader project is going to have two things only, the content and the ActionScript. We  are going to arrange the layers on the timeline to reflect only these two items. Double‐click  the name of layer1 and rename it Content.   Now go to the lower portion of the timeline and click on the Insert Layer button to add  another layer; rename this one Actions.   

P a g e  | 3   

  The timeline is now read; click once on the Content layer to start adding content. Pick the  Rectangle Tool, set the Pen color to something dark and the Fill color to something darker. I  chose black for the pen and blue for the fill.  These two colors must be distinct from each  other in order that the preloader has a distinguishable outline indicating how much is left to  be filled.  Once you have these selected items, draw your preloader bar on stage.    

 

The bar graphic is now on stage but it is not of any use to you until you convert it to a Movie  Clip Symbol, which in turn allows you to apply ActionScript. Additionally you will need to  separate the outline from the body of the bar because the body of it is the part that will  expand as the loading progresses.  To do both of these things, you will need to sue the  Select Tool (black arrow) to select the bar outline only. Once you do that, press F8 to  convert it to a symbol.  Select Movie Clip as the type and name your symbol Outline.    

  Now you need to do the same thing for the body of the preloader.  Click on the body of the  bar to select it and the press F8 to convert it to a symbol.  Set the symbol to Movie Clip and  name is Bar.  Finally, set the Registration Point of the Symbol to the left side before you  click OK. The registration point is the point from where the bar will expand or grow, if you 

P a g e  | 4   

leave it to the center out bar will start at the center of the outline and will expand from  both sides to fill up the outline. In this tutorial, you want the bar to expand from the left to  the right so you have to click on the little box indicating the left side registration point as in  the screen shot below. 

  In order to be able to refer to our bar through ActionScript we need to assign an Instance Name to it, to do this, while your bar is still selected, access the Properties Inspector and set bar_mc as the instance name of the bar.

You might notice right now that your bar is covering your outline, this might be a little bit problematic, to ensure that our bar does not cover the outline, we are going to send the bar to the back of the stage. To do this, simply go through Modify>Arrange>Send to Back or alternatively press Ctrl+Shift+Down Arrow. You are done working with your bar, but your preloader is also going to have a numeric indicator showing how much in percentage the file has loaded. To create the text field required for this, pick the Text Tool and draw the text field somewhere below the bar, then quickly access the Properties Inspector and set its type to Dynamic Text, this is a type that can interact with ActionScript. Set the font type to _sans and finally set the Instance Name to loader_txt.

You now have your graphical assets ready, click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open the Actions panel. Next step in this process is coding your preloader now.

P a g e  | 5   

Coding your Preloader using ActionScript 3.0  Before you proceed with the actual code of your preloader you must ensure that the movie does not start playing before you tell it to. First it must check and see that all the data is ready. To stop your movie you simply use the stop() method at the start of your code, simply type stop() to do that:

{CODE} stop( ); Your preloader code is going to retrieve the amount of data which has loaded and compare it with the total file size of your SWF. This preloader code will have to be repeatedly checked until the movie stops loading. To make your code repeatedly execute, create an event listener that will be attached to the main timeline and then call a loading function using that listener. The ENTER_FRAME event is executed repeatedly in accordance with the frame rate specified for the Flash movie.

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                     } You now need to write your loading() function, this function will have the following tasks: 1. 2. 3. 4.

Retrieve the amount of data that has already loaded and the total amount of data of the file.  Resize the bar in accordance to these values.  Display the percentage of how much data has loaded.  Check if the amount of loaded data has completed so that the movie is played. 

Do these one by one. In order to first retrieve the byte information of your movie clip, use the new loaderInfo property that does just that. You are going to retrieve the values you need and assign them to two variables:

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                     Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       }

P a g e  | 6   

You are now going to use these two variables to perform the second task, which is to resize the bar in accordance to how much data has loaded; we can do that by simply dividing the loader amount by the total amount and then assign that value as the scaleX property of the bar.

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       bar_mc.scaleX = loaded/total;                       }

That was easy, now the next task is to display the amount loaded as a percentage, we can do that again by dividing the loader amount by the total and then multiplying that by a 100 and setting this value as text property of our loader_txt text field.

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       bar_mc.scaleX = loaded/total;                     loader_txt = (loaded/total)*100;                       }

What we just wrote will actually generate a messy number with loads of decimal places, in order to make it look nicer we can clean it up by using the Math class to round it down using the Math.floor method:        

P a g e  | 7   

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       bar_mc.scaleX = loaded/total;                     loader_txt = Math.floor( (loaded/total)*100);                       } If you want to add a percentage sign at the end of this text you can do that by using the plus sign operator: 

{CODE}

stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       bar_mc.scaleX = loaded/total; 

                   loader_txt = Math.floor( (loaded/total)*100)+ “%”;                       }   The last task for the preloader is to check if the file has fully loaded, do this by using the comparison operator "==" with a conditional. If that value is true, the movie wll play: 

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       bar_mc.scaleX = loaded/total;                     loader_txt = Math.floor( (loaded/total)*100)+ “%”; 

                                        if (total == loaded) {                     play();                     }                       }

   

P a g e  | 8   

Good practice requires also removing a listener when it is no longer need, this helps improve performance:

{CODE} stop( );                     this.addEventListener(Event.ENTER_FRAME, loading);                      Function loading(e:Event): void {                                           var total: Number = this.stage.loaderInfo.bytesTotal;                     var loaded: Number = this.stage.loaderInfo.bytesLoaded;                       bar_mc.scaleX = loaded/total;                     loader_txt = Math.floor( (loaded/total)*100)+ “%”; 

                                        if (total == loaded) {                     play();                     this.removeEventListener(Event.ENTER_FRAME, loading);                     }                       }   That's it! We are done. You can close the Actions panel now, but in order to test your preloader you will have to put something large in your movie now to see it preloader. Access your timeline, right-click the second frame and select Insert Blank Keyframe to allocate a place for your object. You can now go through File>Import and just import any large image in this frame. You can add as many frames and objects in there as you wish. Once you are done you can go through Control>Test Movie and then go through View>Simulate Download to see how your preloader works (Or just press Ctrl+Enter twice to do the same thing). You will see it working. If you have a single frame in your movie the image might flicker at the end because it will keep on looping along with the preloader. To avoid this you can put a simple stop() method at the last frame of your movie to prevent it from going back to the preloader.

What you have learned    By working through this tutorial, you have discovered the value of knowing  ActionScript as well as some beginning points in applying the script language to  practical use when using Flash CS3:  Assignment:   Based on this tutorial, create a page on your website that is loaded with enough files to  require a preloader.  Setup your preloader as covered here and send the URL via ANGEL to  professor Sturgeon.