Flash Preloader Tutorial

Author: Salman Awan Difficulty Level: Intermediate Flash Version: Flash MX 2004 Sources to Download: flash_preloader_tutorial.zip Prerequisites: MovieClips, ActionScript Panel, Basic ActionScripting Introduction: When a flash movie is published for web it is uploaded to web server through ftp, and accessed by a visitor using browser. When visitor opens the page first time, flash movie is first downloaded completely to visitor’s computer and then played from there.

In case published swf file size is larger, visitor has to wait before swf file is completely downloaded and then played. In the meantime all he sees is a blank box in place of flash movie. The situation get worse for visitors having slower internet connection.

To prevent them from getting bored and leaving your page, we use flash loader, also commonly known as flash preloader, which shows a progress bar that keeps visitor informed how much time is left. This can be accompanied with some basic yet engaging animation to encourage visitor to wait for the final content.

In this tutorial we will develop such a preloader and see what different things we can do with it.

First of all we will setup required layers and frames. Create two layers with two key frames each. Name first layer as Actions and second one as Content.

Select second blank key frame on Content layer, and using File > Import > Import to Stage menu option, impart a large sized image file. This is just to increase the size of our resulting movie, so that we can actually see the download progress.

Select second blank key frame on Actions layer and using Window > Actions open up actions panel for this key frame. Keeping second key frame selected, add this stop code in actions panel.

the movie timeline and actions panel will look like this now

What has happened is, first blank frame showed blank spot in movie and then stop() action stopped movie from looping, thus displaying image.

If you check the properties of published loader.swf, its size should be relatively larger due to image imported. When we compiled this swf it played without any delays because we are running it from local machine. If we were accessing this swf file over the internet, there would have been some delay because it would have been first downloaded completely to local system, and then played.

Bandwidth Profile provides basic information about swf file in focus, including dimensions of stage, movie’s frame rate, total file size of compiled swf etc.

It provides another powerful feature that helps testing swf’s behavior when its published on web. Select View > Simulate Download, movie will start over, but this time some additional numbers are displayed which indicate progress of the download as if user were accessing it on a dial up connection.

Since our main content is on second frame, we want our visitor to wait on first frame till complete movie is downloaded, there we will show them the progress of download.

Select first frame on Actions layer, open Actions panel if not already opened, and add stop() action again.

Create an empty Movie Clip using Insert > New Symbol. Name this new symbol as preloader,select Type to be Movie Clip. On pressing Ok button you will be drilled into preloader movie.

Add three layers in preloader movie’s Timeline, naming Actions, Animation and Texts having 4 frames each. Texts layer will be holding some dynamic text fields, Actions layer will hold logic for calculating total bytes downloaded and updating it in text fields on Texts layer. Animation layer will hold some very basic animation to keep visitor involved.

Select fourth frame on Actions layer and add a blank Keyframe. Open Actions panel and add following code for this frame.

In Animation layer, select first frame and add text Loading. Select third frame on same layer and convert it to Keyframe, by right click and selecting Convert to Keyframes, here add two dots at the end of Loading text.

You will see first frame of movie (that holds only preloader movie clip) is downloaded almost instantly, and while frame two’s content is downloading, our Loading text animates.

Note that although main movie is stopped at first frame, but preloader movie’s timeline is constantly looping while rest of the movie downloads.

So far we have developed a very basic form of a preloader. It still lacks the information of indicating how much bytes of total file size are downloaded, in next steps we will add script to show this in two ways.

Drill down into preloader movie clip by double clicking on Loading text. Click on first frame of Texts layer and create two dynamic text fields. Set name of first dynamic field as current_txt, and second one as total_txt.

In fourth frame of Actions layer, add these two lines of code

Add some static texts so that stage looks like this

Another common way to show progress is in percentages, which can be achieved by simply adding another line of code in our existing script and a dynamic text field.

percent_txt.text = Math.round((loadedBytes / totalBytes) * 100);

And stage will be now like

Now if you simulate download, you will see progress in bytes as well as in percentages. Flash movie is now ready to be published on web.

Exercises:

1. Modify the above script so that bytes loaded and total bytes are displayed in round figures i.e. without decimal parts.
   
   
2. Try adding some smooth animation in Animation layer instead of “Loading” text.
   
   
3.  Why if you double click published swf file from outside Flash authoring environment, preloader is not displayed and image is displayed instantly?
   
   
4. Will preloader behave same if we remove else part of our check?
   
   
5. Explain how come preloader timeline is playing beyond first frame while second frame on main time line is still downloading.