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. Retrieve the amount of data that has already loaded and the total amount of data of the file. 
2. Resize the bar in accordance to these values. 
3. Display the percentage of how much data has loaded. 
4. 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.