Kicking off the series, we’re going to talk about the first thing you see in every good flash game you’ve played, the preloader.  Without the preloader your audience will likely leave your game after staring at a blank screen for too long. So the feedback given from a preloader that tells the player, “Hey, the game is loading. Be cool wait a second and we’ll be ready to go” is vital.  Now what type of preloader you make is your business… but make sure it gives the user feedback so they know the game is loading and not sitting in limbo.

As a note, this Preloader tutorial can be used for ANY FLASH APPLICATION so even if you’re not making a game this can be very useful.

Step 1: Understanding the Problem with Single File Preloaders

Preloaders are not a difficult concept. Seriously, you need to keep up with how much data is loaded and how much data we have to load.  Seems like this whole idea of making a preloader should be cut and dry.  But… it’s not. We have things we need to manage in order to make our preloader work correctly.

Why? Well our goal with this game as mentioned in the last section is to make a game that is single file and that’s our problem.  If we had two files… a swf that does the loading and our game then we could just write the preloader code and be done with it. But all the flash portals that I know want you to submit a one file game and there lies our issue.

So, tired of hearing that a one file preloader is a problem and want to know why it’s a problem? Okay let me explain.

Our first issue deals with our classes linkage setup. Remember this screen?

DISCLAIMER:
If you don’t know what this is… well the concept is going to be way over your head. You need to read AS3 Flash Games for Beginners to get familar with AS3.  This is not a series on familiarizing yourself with Flash, As Gamer has other tutorials to help you with that.

See the third checkbox, “Export in first frame”, that’s our problem. If that’s checked then this class will have to load before anything else in our Flash project will.  So if all our MovieClip’s are set to export in first frame then by the time our preloader starts working our game will already be mostly loaded. Your user will have saw that dreaded blank screen for the majority of your game’s loading time.  So the solution may seem simple right… uncheck “Export in first frame” and problem solved? Sadly, it’s not that easy.

Here’s the new problem. If we don’t export our class in the first frame then we don’t export our class. Which means our class never gets exported and we can never call it from the library and use it.  The conundrum is getting pretty obvious now huh? We either have a preloader that has to wait on everything else to load before it starts working (which defeats the purpose) or we stop everything from loading at the beginning and have to figure out another way to export them.

But there is a solution and this tutorial will explain it. That said, I don’t take credit for it. I first saw the solution for setting up a single file preloader at 8bitrocket.  These guys are geniuses and write some brillant tutorials on flash game development. Click here to read the tutorial that I used to build a flash preloader in as3.

Now, if you wish to follow along on As Gamer to setup the preloader feel free to continue reading as I will discuss the same method I learned from 8bitrocket.  My style of explanation is quite a bit different from theirs so whichever helps you the most, use it Plus I’m going to discuss a few more elements that they did not and it’s much easier to discuss the concept as a whole than in part.

Step 2: Making Our Preloader

This is the first game that I will have made the preloader at the beginning of the project. It seems odd because really… what are we loading? At the moment nothing.  But at least once we’ve completed this tutorial we’ll know what to watch out for when developing our game and that it will have a working preloader when it’s finished.

So AsGamer recently released a tutorial on 9-Slice Scaling, if you don’t know what it is then you are going to need to read the tutorial because we’re about to use it. It’s a simple tutorial but it’s important for our preloader that we are about to make.

Alright so open Flash, create a new AS3 Document, set the FPS to 30, and the Dimensions to 550×400.  Good, now we need to build our Preloader screen. Let’s not do anything too complicated. Grab your Rectangle Tool (R) and draw a dark gray box on the stage sized at 550×400. You can resize the box after you draw it in the Properties Window (CTRL+F3). Now right click your gray box and select “Convert to Symbol…”. Make sure the Registration is in the top left, the Type is MovieClip, and the name is Preloader. Now you can delete in the Preloader MovieClip from the stage and select it from the Library to continue editing it.

Using the Rectangle Tool again draw a curved rectangle with curve size of 20 in a slightly lighter gray at a size of approximately 500×50. Then write “GAME IS LOADING” above it. Feel free to use some creativity with all this if you want. My Preloader currently looks like this.

Example of Preloader setup.

Now it’s time to use our 9-Slice Scaling knowledge. Create a new MovieClip (CTRL+F8) and make sure you enable 9-Slice Scaling.

Simply create a MovieClip and make sure you enable 9-slice scaling.

Name it PreloaderBar. Now here’s where you need to be careful. We need the registration point to be at the left of our preloader bar. So draw a square (Hold SHIFT and draw to constrain to a square) in a light gray color. Set its x and y to 0. Now your grid will be out of alignment so line it back up. If you want add another white rectangle on top of our gray square to make a highlight.  It could look something like this.

400x magnification of the preloader bar

Now drop this new MovieClip into your Preloader MovieClip and stretch it out so that it fills your loading bar.  It should look something like this.

Our Preloader Bar using 9-Slice Scaling ready to be programmed.

Alright. One more thing left in the setup. Select your Preloader Bar and set its instance name as mcPreloaderBar (We’ll throw mc in front of all our non-coded nested MovieClips for clarity). Okay, and while you are at it… write down the width of your mcPreloaderBar, we’ll come back to it and use it later. Mine’s 474 but yours is likely different, which is completely fine.

Time for code.

Step 3: Writing Our Preloader Class

So I don’t want to write a Preloader class every time I make a game.  Why not write one Preloader class that we can use on any project as long as we maintain the same structure.

Okay so the first thing we need to do is create our Preloader.as file. Our package for this game is going to be “com.asgamer.snipergame” because I have no idea exactly what we want to call this game yet. So in the directory you saved your FLA file just create a com folder, inside it an asgamer folder, and inside it a snipergame folder.  Your structure is now setup, save your Preloader.as in the snipergame folder.  If you don’t understand why we set it up this way, go read the AS3 Flash Games for Beginners series.

Now let’s write some code in this Preloader.as file. Don’t freak out, I’m going to post all the code but it will be fine…  I’ll explain all of it afterwards.

package com.asgamer.snipergame
{
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.events.*;
 
	public class ThePreloader extends MovieClip
	{
 
		private var fullWidth:Number; //the width of our mcPreloaderBar at 100%
		public var ldrInfo:LoaderInfo;
 
		public function ThePreloader(fullWidth:Number = 0, ldrInfo:LoaderInfo = null)
		{
			this.fullWidth = fullWidth;
			this.ldrInfo = ldrInfo;
 
			addEventListener(Event.ENTER_FRAME, checkLoad);
		}
 
		private function checkLoad (e:Event) : void
		{
			if (ldrInfo.bytesLoaded == ldrInfo.bytesTotal && ldrInfo.bytesTotal != 0)
			{
				//loading complete
				dispatchEvent(new Event("loadComplete"));
				phaseOut();
			}
 
			updateLoader(ldrInfo.bytesLoaded / ldrInfo.bytesTotal);
		}
 
		private function updateLoader(num:Number) : void
		{
			//num is a number between 0 and 1
			mcPreloaderBar.width = num * fullWidth;
		}
 
		private function phaseOut() : void
		{
			removeEventListener(Event.ENTER_FRAME, checkLoad);
			phaseComplete();
		}
 
		private function phaseComplete() : void
		{
			dispatchEvent(new Event("preloaderFinished"));
		}
 
	}
 
}

Geez… yeah that’s a lot. Like I said don’t freak out. It’s actually very simple.

• Okay you know what imports are so skip those.
• You know what the class is and the whole extends MovieClip stuff.
• If you don’t know what those are then go read AS3 Flash Games for Beginners before you write me nasty letters.
• private var fullWidth:Number alright. Remember when we wrote down what our mcPreloaderBar’s width was. Well this variable will end up holding it. This way we know what our Preloader Bar should look like when the loading is at 100%.
• public var ldrInfo:LoaderInfo; we’ll get this guy passed into us from the Engine class like fullWidth. Our Engine class will already have a loaderInfo that keeps up with how big our file is and how much of it is loaded. We will just pass that loaderInfo into our preloader and set it as ldrInfo and use it.
• addEventListener(Event.ENTER_FRAME, checkLoad); When we enter the frame… we run the checkLoad function. Simple.
• if (ldrInfo.bytesLoaded == ldrInfo.bytesTotal && ldrInfo.bytesTotal != 0). Our buddy ldrInfo has two variables we want to make use of, bytesLoaded and bytesTotal. It’s pretty obvious but bytesLoaded tells us how much data is loaded while bytesTotal tells us the filesize of our project. So we check to see if the bytesLoaded is as much as the bytesTotal which if true means the swf is loaded. We also make sure bytesTotal doesn’t equal 0. Because if it does either the ldrInfo hasn’t kicked in yet or we got a problem. Either way, we don’t want to run our game if bytesTotal == 0.
• if it does return true we call phaseOut and dispatch our loadComplete event.
• updateLoader(ldrInfo.bytesLoaded / ldrInfo.bytesTotal); We pass into updateLoader a value between 0 and 1. As long as we can’t load more bytes than the total number of bytes then this will always be between 0 and 1. And don’t worry unless something I’ve never seen before happens, between 0 and 1 it will always be.
• mcPreloaderBar.width = num * fullWidth; Here’s why we need a number between 0 and 1. If we get a 0 then our mcPreloaderBar has a width of 0. If we get a 1 then it has a width equal to fullWidth. Makes for a great preloader bar.
• private function phaseOut() Okay so right now… this function is doing next to nothing. it removes checkLoad event listener and calls phaseComplete. But let’s assume you want to use Tweener and animate out your preloader. Well you’ll do that right here in this function. Then when everything is complete just call phaseComplete to remove your preloader for good.
• private function phaseComplete(). Alright, all we do here is dispatch a “preloaderFinished” event. If you set up listeners in the Engine class to catch these events then we can jump to the next phase when the preloader finishes. You’ll see what I mean when we create our Engine class in just a second.

Okay so that’s our preloader class. How are we going to use it?

Step 4: Using our Preloader and Exporting Our Classes for ActionScript

If you remember… earlier in this tutorial I said we need to remove the “Export in first frame” from all our Class linked Library Symbols. Well that’s true for everything but one symbol. We need to export our preloader in the first frame. So right click your Preloader symbol in the library and “Export for Actionscript” make sure to leave “Export in first frame” checked. Then set up the class as “com.asgamer.snipergame.ThePreloader” without the quotes. Now OK it. the reason we export our Preloader is because we want it to export immediately when the swf starts loading. That way it will show up first.

Now our other “Export for ActionScript” Library symbols with classes attached to them need to get exported somehow. We’re not exporting them on the first frame so how will we export them? Well the idea, as presented at 8bitrocket, is to create a MovieClip and name it AssetHolder. In this AssetHolder MovieClip we put all our “Export for ActionScript” symbols simply by dragging them into it. Now what we are going to do with this AssetHolder MovieClip is drop it on Frame 2 of the Main Timeline. Why Frame 2? Because we want to keep frame 1 empty and stop the timeline from playing. Then when everything is loaded, we can play through frame 2 which will have all our “Export for ActionScript” symbols. This will result in exporting our symbols and we can now use them the same as if we had exported them on the first frame. We’ll go ahead a create a frame 3 as well and put a stop on it.

I know this may sound a little confusing so take a look at what my main timeline looks like.

Timeline setup for our Game in order to preload our assets.

Okay so let me quickly explain this once more for clarity.  In the actions layer frame 1 and frame 3 have stop(); wrote in their Actions window (F9). In the AssetHolder layer on frame 2 only we put our AssetHolder MovieClip. This setup will allow us to load everything up with our main timeline not leaving frame one. Then once everything is loaded we will call play() and run to frame 3 and stop again. When Flash runs through frame 2 our assets are ready to be used in ActionScript 3.

Okay… so now we need to setup our Engine Document Class.  If you don’t know what a Document class is, guess what, AS3 Flash Games for Beginners will teach you what a Document Class is. So goto your Properties Window (CTRL+F3) and set your document class to “com.asgamer.snipergame.Engine”.

Alright time to write our Engine class. We don’t need it to do much yet, just manage our Preloader. So this will be a quick and easy class to write. Like before I’m going to show you the code then explain it afterwards.

Engine.as

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class Engine extends MovieClip
	{
 
		private var preloader:ThePreloader;
 
		public function Engine()
		{
			preloader = new ThePreloader(474, this.loaderInfo);
			stage.addChild(preloader);
			preloader.addEventListener("loadComplete", loadAssets);
			preloader.addEventListener("preloaderFinished", showSponsors);
		}
 
		private function loadAssets(e:Event) : void
		{
			this.play();
		}
 
		private function showSponsors(e:Event) : void
		{
			stage.removeChild(preloader);
			trace("show sponsors");
		}
 
	}
 
}

Okay. Time for the breakdown.

• private var preloader:ThePreloader; The instance of our preloader class.
• preloader = new ThePreloader(474, this.loaderInfo); Okay, time to make a new ThePreloader. If you remember we needed to pass in two parameters. The first is the full width of our loading bar. In my case it was 474, yours is probably different so make sure you update it. Second we have to pass in the loaderInfo so we just take the loaderInfo from the document class and pass it into our preloader.
• stage.addChild(preloader); add our Preloader to the stage.
• preloader.addEventListener(”loadComplete”, loadAssets); Remember the two events we dispatched from our ThePreloader class? Well here is where we use them.  When the preload is complete we dispatched “loadComplete” so we will run the loadAssets function. Then when the phaseOut() function in ThePreloader is complete we dispatch “preloadFinished” and catch it here in Engine to run showSponsors.
• private function loadAssets(e:Event). This function is crucial. I know it doesn’t do much but it does exactly what we need it to. As we noted before, loadAssets is called when the SWF is preloaded. At this point we need to play the main timeline so we can run all the assets that have been exported for ActionScript. So our main timeline will play at frame 1, move through frame 2 and load our game assets, then stop again on a blank frame 3. At this point all our assets will be completely “Exported for Actionscript”
• private function showSponsors(e:Event). This does nothing at the moment. Well it removes our preloader but in the next tutorial we’ll discuss making it work to show our sponsors.

Step 5: Testing your Preloader by Simulating a Download

Alright. Seriously by now we are all probably ready for this tutorial to end. It’s a behemoth, I know.  But we really need to test our preloader out and make sure it works. Don’t worry it’s a pretty simple and painless process.

To test it out we are going to need a big image. So you can hit up your Documents and find the biggest image you have or just grab this one I threw together.

Just a big image with a decent filesize so we can test our preloader.

Right Click, Save As, all that good stuff. Then just import it into your Flash Library. Now I dropped mine into my AssetHolder MovieClip.  We’ll delete it back out soon enough, we just need something with some file size so we can test our preloader. I mean if our SWF is 1 kb, then we don’t really have anything to preload.  This image will make it big enough to run a preloader test.

Once you have your image in there Test your Movie (CTRL+ENTER). Now at first it isn’t going to work. You’ll see a white screen like nothing happened. So to test our Preloader, on our SWF file that we just rendered goto View > Simulate Download or press (CTRL+ENTER)
again. Now you should see your SWF simulate preloading.  If your SWF preloads too fast you can always adjust the simulation speed under the View > Download Settings navigation.

Now one more thing you can do with simulating the download is watch the Bandwidth Profiler, press (CTRL+B) or select it under the View tab. It looks like this:

A screenshot of the Bandwidth Profiler and our Preloader in action

Notice the Bandwidth Profiler tells you how much of the SWF is loaded. This will help you to assess if your Preloader is working correctly. Especially if you are creating a preloader that does something different after so many percent have loaded.

Anyway, this pretty much covers our tutorial on the preloader for our game. I’ll bring it up time to time as we develop the game so you remember how to setup your other game assets to be preloaded correctly.

Here’s the final source code:
Creating & Understanding the Preloader Source Code Zip Archive

Tags: ActionScript, as3, Game Development, gamedev, preloader, Tutorial

This entry was posted on Tuesday, April 7th, 2009 at 9:41 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.