Flash Tutorial Links:
Play Games: HTML5 Tutorials:

Flash Preloader

A good flash preloader keeps your audience entertained while you load your awesome game or animation behind the scenes. Learn to make a basic Flash preloader from scratch using AS3.

Creating a Flash Preloader

In this tutorial, we will learn how to create a preloader for your game.

Why Do We Need Preloaders?

Despite the small size of a flash game, most of them still amounts to about 1 MB or more. Even though most net surfers are starting to get more decent bandwidth, the Flash game will still take a while to load.

If you were to just deploy the game as it is (without a preloader) online, visitors will see a Blank screen while the game is loading. This is definitely a big NO NO since then they would be wondering if this game is playable or not. There is no feedback about the progress of the loading, and this uncertainty will inevitably cause them to wander off to other games.

The other advantage of having a preloader is that you can start interacting with the players even before the game begins. Some interesting graphics can be used to spice up the boring wait time. I've seen some flash games which include a minigame in the preloader to entertain the player while waiting. These are good ideas if done right. The last thing you want is to overload your preloader such that it needs yet another preloader!

How the Preloader Works

In the tutorial, you'll see a setup like below.

preloaderDiagram

MakeFlashGames_A.swf is the preloader file, whereas testPreloader.swf is the actual game you have coded. When the player visits your game, your website should be loading this MakeFlashGames_A.swf instead. The screenshot below it shows the progress bar that will act as a feedback to the player that the game is loading well.

When the game is fully loaded, the preloader components will be removed, and the game runs as per normal as shown in the screenshot.

Download the Preloader Files

The files you need to create this preloader can be downloaded from here.

Preloader Components

After you open up MakeFlashGames_A.fla, you should be able to find 3 components already placed on the Contents layer.

PreloaderComponents

mcPreloaderFrame, acts as a boundary around the loading bar to allow the user a sense of how long the downloading of the game is going to take.

mcPreloaderBar is the actual bar that grows from the left to the right according to the % amount of data downloaded thus far.

txtPreloader is the textual representation of the % amount of data downloaded thus far.

Creating These Preloader Components

RectangleTool RectangleSettings

Use the rectangle tool to draw a rectangle on the stage. With these settings of the rectangle tool, you should create a frame as well as an inner fill of the rectangle. The inner preloader bar is of length 100 pixels here for easy demonstration of the loading percentage. You are free to choose any length you want. More on this will be mentioned later.

Select the outer frame only, and convert it into a MovieClip (Modify -> Convert to Symbol). Give it an instance name of mcPreloaderFrame. Likewise, select the filled bar and convert it into another MovieClip. Give it an instance name of mcPreloaderBar.

FreeTransformTool

You need to do an additional step with the preloader bar because you want it to grow from left to right. Using the Free Transform Tool, move the center registration point to the leftmost point.

MoveCenterA

moveCenterB

Next, create the text field by using the Text Tool. Then name it txtPreloader.

Code for Preloader

Now that our UI assets are in place, let's move on to the actual code needed for the preloading to work.

import flash.display.*;
import flash.net.*;
import flash.events.*;

We first import in the necessary components from the default flash libraries. I am using an * here as a wildcard to import all the classes from these 3 libraries. Since it doesn't cause any significant performance overhead to do this, I think this easier than importing each individual file. Of course, if you want, you can just import the necessary classes as you'll see later on.

//****************
//Form the request
//****************
//Specify the exact URL here.
//For testing on local, use this:
//-------------------------------
var myRequest:URLRequest = new URLRequest("testPreloader.swf");

For the preloader to know which game file to load, you need to specify a url request first. If you are testing it on your local server, you can set it to testPreloader.swf. Do make sure that these files are in the same directory. But take note that when you are testing it locally, the preloader effectively loads your file almost instantly.

Flash provided a way to simulate your preloader testing. Go to View and set the appropriate download settings. You may want to test out the download speed for users from a variety of bandwidth. Once it's set, press Ctrl+Enter again to simulate the download. Now, the preloader bar will slowly grow to simulate the downloading of game data.

simulateDownload

When the game goes live, your preloader should be downloading from an online URL, so modify it accordingly. It should look something like below.

//****************
//Form the request
//****************
//Specify the exact URL here.
//On actual server, use this:
//-------------------------------
var myRequest:URLRequest = new URLRequest(
		"http://www.yourdomainname.com/yourswf.swf");

After you have created this request, you need to create a loader to load the request.

//****************
//Create a Loader
//****************
var myLoader:Loader = new Loader();
myLoader.load(myRequest);

function showProgress(evt:ProgressEvent):void 
{
	//Text Version of Preloading
	//--------------------------
	txtPreloader.text = Math.round((evt.bytesLoaded/evt.bytesTotal)*100)+"%";
	
	//Bar Progress Version of Preloading
	//--------------------------
	mcPreloaderBar.width = Math.round((evt.bytesLoaded/evt.bytesTotal)*100);
}

function showLoaded(evt:Event):void 
{
	myLoader.contentLoaderInfo.removeEventListener(
    		ProgressEvent.PROGRESS,showProgress);
	myLoader.contentLoaderInfo.removeEventListener(
    		Event.COMPLETE,showLoaded);
	removeChild(txtPreloader);
	removeChild(mcPreloaderBar);
	removeChild(mcPreloaderFrame);

	mcPreloaderBar = null;
	mcPreloaderFrame = null;
	txtPreloader = null;
	
	addChild(myLoader);
}

myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showLoaded);

Lines 3 and 4 creates a Loader object and gets it to load the urlRequest we created earlier on to point to the actual game swf file.

Next, we create 2 functions, showProgress and showLoaded. showProgress does exactly what its name suggests --- it will handle the display each time data is loaded into the preloader. It grows the preloader bar according to the % of data downloaded. The formula Math.round((evt.bytesLoaded/evt.bytesTotal)*100) will work since the preloader bar is 100 pixels. If the length of the bar is changed, modify and multiply it accordingly by the length of the bar.

The function showLoaded is triggered only when the loading is fully complete. The function firstneeds to clean up and remove all the components used during the preloading phase. This is handled in lines 20 to 30. After they are removed, we add the loaded object (contained within myLoader) to the stage in line 32.

Lines 35 to 36 adds the listeners to monitor for the progress and loading completion.

Basic Preloader Completed

With this, you have created a very simple preloader which you can code independently from your own game swfs. And the best part is this preloader is mostly reusable. You just have to change the url link as well as some of the graphics to suit your game.

If you want, you can now try experimenting to add nicer effects to the preloader, or incorporate some mini activity the players can engage in.

Download the Preloader Files

The files you need to create this preloader can be downloaded from here.

Flash Resources
Preloader FPS Display Sounds & Music
Keycodes Name Generator
Game Development Resources
Sprite Sheets

Flash Tutorial Links:
Play Games: HTML5 Tutorials:
gaming tools download on app store now!
Home | About Us | Contact Us
Powered by Make Flash Games. All Rights Reserved.
By Joseph Tan