HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

Flash Basics IV: A Preloader for Flash 

(maybe a bit more advanced)

 

Most of our Flash projects are going to be large enough that they aren't going to load in the browser immediately. So, we need a Preloader—a function to download all the material into the browser before we are able to see and interact with it. Usually, a preloader includes just enough eye candy to keep our attention while all the loading takes place. 

 

We haven't really used Scenes in Flash, except that the Main Stage (or Scene 1) is where everything of importance takes place. Scenes function similarly to all other timelines in Flash—they will loop until they are told to stop. Also, the scenes in the scene window will play sequentially, so how you arrange scenes impacts the order in which they play. 

 

Scenes are, however, useful as a means of creating a preloader - the preloader function will reside on one scene, and the actual interface (the material we're loading) will live on the next scene (Scene 1, which we will rename shortly).

 

OK, let's start.

 

* * * * 

 

Open this file to begin. It's where you left off at the end of the last tutorial. We will build everything in this file until we are need to import the preloader (from another file). Under the Window menu, select Other Panels and then Scene to pull up the Scene window.

 

 

This is your Main Stage/ Scene 1/ Main Timeline.

Rename it 'interface' by double-clicking on the name. Press Return.

Press Return.

Click on the '+' on the bottom of this window to create a new scene.

Double click on the new scene and rename it 'preloader'.

Press Return.

Click and drag the icon for the preloader scene above the interface scene, so they play in the right order.

Now, double-click on the preloader scene. Notice that the scene level is the highest one in the Flash movie hierarchy. You'd see the main stage of the Interface scene in the same position if you double-clicked on the interface scene.

 

 

Rename the single layer in the preloader timeline Actionscript and open the Actions window.

 

 

Type the following script into the Actions window (or, to make sure everything is correct, open the finished preloader movie and copy and paste it into the windows frame of this movie).

 

 

Add three more layers to our preloader movie, and name them arrow indicator, text loading, and loading bar.

 

 

Click on the playback head on the timeline, and press the F5 key (add frame), so we have two frames.

 

 

I'm going to copy all the preloader elements from this .fla file (a random music notation generator that's not quite ready for prime time). Click and select the first two frames of the three layers that have the same name as the layers you just created.

If you keep holding down the mouse (or if you press the right button on a PC), the contextual menu for copying and pasting multiple frames and multiple layers. This is the only way you can copy and paste multiple frames and layers in Flash.

 

 

In our tutorial movie, select the same three layers in the preloader scene.

 

 

Again, click and hold on the selected frames (or right-click on the PC), and select Paste Frames.

 

The loading elements are maybe a little small for our interface project, so click on the transform tool (third one from the top) on the toolbar . . .

 

 

. . . and, while holding down the shift key to constrain proportions, click and drag one of the corners, out.

 

 

Double click on the progress bar shape until you see the Shape icon in the Properties bar, and the bar has polka dots (meaning it's editable now). Select white in the color swatch selector for Fill (paint bucket icon).

 

 

Repeat this step with the arrow pointing to the progress bar.

 

 

 

Almost done. Make sure you've got these two scenes in the right order by clicking and holding down the Scene icon (clap board) on the right side of the Flash interface. Now, go to the interface scene by double clicking on 'interface'.

 

 

One last thing: in the interface scene, select the Actionscript layer, and in the Actions window, type

 

stop(); 

 

 

Test your movie. Since you're only loading material locally, you probably won't see the preloader scene or progress bar, but when you upload your Flash movie to your website, it will make all the difference in the world!