Well, this is the first tutorial in a long time. Mostly because I’m still using CS3 and all CS4 and CS5 users are having a hard time understanding my tutorials. That’s okay, we’ll keep mostly in the code and everyone will be able to understand it (I hope).

Alright so what’s this tutorial about? Well let’s say your game has enemies that on death splat blood all over the place… sounds wonderful. So maybe these enemies are aliens with green blood, but a couple of them need to have blue blood, and well, maybe,  another one should have yellow. What do you do? Copy the same movieclip over and over each time changing the color of the blood? No… there’s a much easier solution for handling color changes in ActionScript. (If you don’t like the blood reference, imagine a cutesy dress up game where you want to change the colors of the outfits)

The beautiful thing about code based colour (for our ‘u’ loving friends) changing is it is incredibly simple in as3. As long as you understand the basics, you’ll have no problem colour changing with your eyes closed.

Step 1: Get the starting FLA and get Ready to Code

Alright, so to get started with this tutorial I ask that you download this zip file. There is a colorme.fla, colorme.swf, and a folder containing a ColorExample.as file in the archive.  You will not need to make any changes to colorme.fla during this tutorial. But feel free to look over the fla as the setup of the file is important to how we write our code. You’ll notice in the library that there are two objects.  There names don’t matter and neither have an linkage attached to them. I have simply placed the sphere movieclip on the middle of the stage. I gave it the instance name of “button”.  Inside of button you’ll notice a few layers that make up the artwork. I locked all the layers but one. This one layer has our movieclip that we wish to color in it. I gave that button the instance name of “colorMe”.

Very simple, so all we will have to do to access our colorMe clip from our code is call button.colorMe in our Document Class. (BTW, if any of this sounds confusing, please go read AS3 Flash Games for Beginners as it should make sense of most everything) Which brings me to the point that I’ve already set the Document Class to be colorMe.ColorExample (our file in the colorMe folder).

Step 2: Understanding some Hexadecimal

Hopefully you understand hexadecimal. But if not let me make it really simple. Instead of counting 0-9, you’re counting 0-F (16 different characters instead of 10). Normally we’d count 1,2,3,4,5,6,7,8,9,10. In hex we’d count 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10. Hex 10 is equal to a 16 in decimal. Anyway, we don’t have to fully understand it, we just need to know how to use it.  If you can understand that 0 is low and F is high, then you are good to go.

Second, colors in hex form are six characters long, two for each color. And it’s always in the order Red, Green, and Blue.  So an example hex value would look like this #43A72F. So is this color (#43F72A) mostly red, green, or blue? Green, of course. Why? Because A7 is greater than 43 and 2F both. For some clarity the numbers A7, 43, and 2F in hexadecimal are equal to 167, 67, and 47. The larger the number the more of that color is in the combination. Also, #000000 is black and #ffffff is white and equally important ff is equal to 255.

If you are looking for a specific color, the eye dropper in most all graphics software will tell you the hex value, so really there is no need to worry about it.

Step 3: What is this ColorTransform Awesomeness?

Okay so your code (in ColorExample.as) looks like this:

package colorme
{
	import flash.display.Sprite;
	import flash.display.DisplayObject;
 
	/**
	 * ...
	 * @author AsGamer.com
	 */
	public class ColorExample extends Sprite
	{
 
		public function ColorExample()
		{
 
		}
 
	}
 
}

Alright, First thing I want to do is write our function to change the colors. You are going to need to import an additional class, flash.geom.ColorTransform, so go to your imports at the top and import it now. Great! let’s write a function.

Now let’s write a function that takes two parameters, our movieclip that needs a color change and the color we want to change it to be. I’ll name it colorClip and it will look as follows.

		public function colorClip(mc:DisplayObject, val:Number)
		{
 
		}

Of course, this isn’t the finished code, we need to write the insides that make this thing function. But to break it down, we are accepting a DisplayObject and a number. DisplayObject is pretty much the base class of all things visible in Flash. I’m not absolutely sure that’s true but I know Sprites and MovieClips are definitely extended from our DisplayObject friend. This means we can pass anything thats extended from a DisplayObject through to this function. Then we accept a number which will be our hex color value. Now let’s write all the code for our function… don’t worry it’s only three lines.

		public function colorClip(mc:DisplayObject, val:Number)
		{
				var colorTransform:ColorTransform = new ColorTransform();
				colorTransform.color = val;
				mc.transform.colorTransform = colorTransform;
		}

Alright Breakdown:

• var colorTransform:ColorTransform = new ColorTransform(); Let’s see, create a variable and an instance of the ColorTransform class. Simple.
• colorTransform.color = val; So we take our hex number and pass it into the color property of our colorTransform variable.  Just to let you know val will equal a number like this 0x0000FF, 0x00FF00, 0xFF9944, or 0x1A4BB6. (Instead of using # as before we use 0x to establish the number is hex)
• mc.transform.colorTransform = colorTransform; Transform that DisplayObject. All done.

Step 4: Let’s Make Color Changes.

Okay, we could end this now with one line of code. Go in the constructor and simply add:

colorClip(button.colorMe, 0xFF0000);

Guess what? We just made our button red. Example below.

Step 5: More Color Transformation Fun

Okay, you can quit with the above example and be happy with your life. You made a red button, the Nobel peace prize is definitely right around the corner.  But if you’re one of those learning types, we’ll try something else

I simply want to make the color change each time I click the Stage. So erase everything in your constructor and add this:

stage.addEventListener(MouseEvent.MOUSE_UP, changeColor, false, 0, true);

This is an event listener. We ask the stage to watch out for someone releasing a click on the stage so when they do we can call the changeColor function. changeColor function doesn’t exist? Let’s write one.

		private function changeColor(e:MouseEvent) : void
		{
			var red:int = int(Math.random() * 255);
			var green:int = int(Math.random() * 255);
			var blue:int = int(Math.random() * 255);
 
			var hex:Number = Number("0x" + red.toString(16) + green.toString(16) + blue.toString(16));
 
			colorClip(button.colorMe, hex);
		}

Confused? Don’t be. Remember a few steps and paragraphs up when I said FF = 255. Well, I hope that makes sense of what is happening when we define the red, green, and blue variables. If not, let me explain. Math.random() is selecting a random number between 0 and 1. We then times that number by 255. Which means the number is now something between 0 and 255. Then we make it an integer, which will just get rid of any decimals. Excellent, so our red, green, and blue variables should all have a whole number between 0 and 255 stored in them.

I almost LOL at the next line because it’s kinda funny. We’re taking three number… making them strings… concatenating them together… then making them all a number again. Why? Well flash has a nice function we can run on our integers to convert them to hex.  Simply use .toString(value) where value is the base. Since hex is base 16, we used the number sixteen.  Last we need to throw the 0x in front of our string and convert it back into a number. Once done, we are ready to send it off to our color clip function which will do all the magic.

Oh yeah, did I mention we are done? Test it out below. Here’s the final source code.

package colorme
{
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.ColorTransform;
 
	/**
	 * ...
	 * @author AsGamer.com
	 */
	public class ColorExample extends MovieClip
	{
 
		public function ColorExample()
		{
			//colorClip(button.colorMe, 0xFF0000);
			stage.addEventListener(MouseEvent.MOUSE_UP, changeColor, false, 0, true);
		}
 
		private function changeColor(e:MouseEvent) : void
		{
			var red:int = int(Math.random() * 255);
			var green:int = int(Math.random() * 255);
			var blue:int = int(Math.random() * 255);
 
			var hex:Number = Number("0x" + red.toString(16) + green.toString(16) + blue.toString(16));
 
			colorClip(button.colorMe, hex);
		}
 
		public function colorClip(mc:DisplayObject, val:Number)
		{
				var colorTransform:ColorTransform = new ColorTransform();
				colorTransform.color = val;
				mc.transform.colorTransform = colorTransform;
		}
 
	}
 
}

Okay okay, this isn’t a review site it’s a tutorial site right? Well actually it’s a flash game development website and there’s a lot about this software that is good for a flash game developer. Let me clear some things up before we begin. Whatever I write is my honest opinion, that you can trust I’m not paid to do anything on this site. This is simply a good bit of advice for flash developers wanting to know exactly how good or bad a product is.

Today, the fine folks at Eltima Software have provided me with their cool new version of their product SWF & FLV Toolbox 4. At first when they came to me asking me to review it, I kindly turned them down. I mean, what’s this product going to do for a game developer. I couldn’t see it. How in the world am I going to use this? They quickly responded telling me some of the features in more detail. And at that point I was sold.

You see I have a flash game coming out soon and I’d really like to make a video of it so sponsors at FGL can see how it works long before they play the game. And according to Eltima, I can actually load up my flash game’s swf, press the convert interactively button and play my game while it records it. Awesome!

Screenshot of the SWF & FLV Toolbox in action

So needless to say I’m excited to put this thing to the test. The first thing that impressed me is that this product actually installs like normal software. I know, that’s not impressive. But a lot of software like this just seems to extract and run, Kindisoft’s secureSWF for example. I like having my software appear in the Start Menu on my Window operated machine.

Okay, so I have the software installed and it’s test time.  I look at my options: convert to video, images, scr, exe, swf. Well, I don’t need to convert to swf, it’s already a swf that I am using. Images? lol, definitely not. Screen saver, nah don’t really want that either.  So there are two options that I actually care about, converting to video and converting to exe.

The EXE conversion didn’t excite me either at first. I told Eltima this, and that the Flash IDE does a very nice job of doing that by itself.  However, I was told it converts to an advanced Projector EXE. By advanced, they meant that I can have more control over a variety of things associated with the exe file.  I can select a custom cursor, setup a splash screen as the game loads, change menu items, and even control the number of times the application can be ran.  In a sense this could be very useful for sending out beta versions of your game for reviewing before releasing it. If you think this would work well for you then this product is definitely worth a buy at the current price tag ($39.95).

shots of the multiple tabs for converting a swf to exe

Now, the part that I really was looking forward to writing about when I first heard about the software, interactively converting my game’s game play into a video. So I loaded up my game and like the screenshot above I clicked convert interactively and immediately clicked CONVERT.

I was greeted by a new screen with my game loaded and convert options to choose from. See below:

So far so good… I press record… I select a level… it lags. It lags quite badly

I couldn’t believe it lagged! At first I thought it had to be my game’s fault. So I tried another one of my games and it lagged equally as bad.  But let’s be fair, both of the game’s I tested are pretty intensive on the flash player.  So I opened up the last tutorial from asgamer and tested it. To my surprise, it ran pretty smoothly. Which is awesome, this convert interactively thing isn’t all bad after all.  I’m going to upload two videos so you can get a feel for how well it converts. They’re below:

My upcoming game Fly Away Rabbit:

The last tutorial:

I do not recommend the interactive conversion to video for anything other than a basic flash game.  However, if you have a point and click adventure or something relatively simple on the ActionScript, I think it will work fine.  I contacted Eltima Software about the issue and they kindly said:

“Difficult Flash files can be slow due to lack of hardware resources. We will optimize this process in the future conversion will be better and faster. We will continue to test and improve our product.”

I like that response, they didn’t deny it, they just promised to work on it.  That doesn’t make me want to buy their product for swf to video conversion of my games but it does give me some faith and trust in the company. So if you are a flash game developer, it’s definitely worth weighing some of the things I’ve talked about when promoting your game.  SWF & FLV Toolbox 4 may be the perfect product for you or it may not, at this point I’ll let you decide.

A few months ago I wrote a series on character movement. As a part of that series we discussed developing the movement for a spaceship shooter like Asteroids. Since then I’ve had multiple requests for how to make the ship fire bullets. No problem! This one is simple, super simple, you may smack yourself to the head repetitively with an iron stick for not thinking of it.  But if you don’t have an iron stick, no problem, we’ll get this all squared away and you’ll be on your way to solving this sort of issue with ease from now on.

Okay so why is this super simple? Well,  in the last tutorial we made our ship move in the direction it’s pointing. So wouldn’t that mean making a bullet move in the direction the ship is pointing would be pretty much the same thing? Guess what… it is.  The awesome thing is that it’s a lot easier than making the ship move because we just create the bullet and let it go.

Since this is a pretty simple project, here’s the final source with the FLA and the new Laser.as class.
Asteroids Style Movement… Now with Firing Lasers source code

1. What’s in the Source Archive? Lasers? Guns? Nuclear Bombs?

Sorry guys, we’ll save nuclear bombs for next time. The FLA is pretty much the same as the end of the previous tutorial. I simply added the laser graphic from a previous tutorial. Otherwise there is a minor adjustment to the ship.as class and a new laser.as class. Alright, quickest step in AsGamer history is complete.

2. Altering the Ship.as file to fire our laser

This may be the second quickest step in history. In order to fire lasers we only need to do one thing. Check when a key is pressed and create our laser. So our alterations to the ship class is literally only two lines

Here’s the two lines.

			if (key.isDown(Keyboard.SPACE))
				stage.addChild(new Laser(x, y, rotation));

The breakdown:

• if (key.isDown(Keyboard.SPACE)). This almost reads like english. “If the keyboard’s space key is down”. See what I mean? Pretty simple.
• stage.addChild(new Laser(x, y, rotation)); Here we add our new laser to the stage… we pass through the ships x, y, and rotation so we can apply all that to our laser.

So our new completed Ship.as looks as follows:

package com.asgamer.directionalmovement
{
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
	import com.senocular.utils.KeyObject;
	import flash.ui.Keyboard;
 
	public class Ship extends MovieClip
	{
 
		private var key:KeyObject;
		private var speed:Number = 0.3;
		private var rotateSpeed:Number = 5;
		private var vx:Number = 0;
		private var vy:Number = 0;
		private var friction:Number = 0.95;
 
		public function Ship () : void
		{
			key = new KeyObject(stage);
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		public function loop(e:Event) : void
		{
 
			if (key.isDown(Keyboard.UP))
			{
				vy += Math.sin(degreesToRadians(rotation)) * speed;
				vx += Math.cos(degreesToRadians(rotation)) * speed;
			} else {
				vy *= friction;
				vx *= friction;
			}
 
			if (key.isDown(Keyboard.RIGHT))
				rotation += rotateSpeed;
			else if (key.isDown(Keyboard.LEFT))
				rotation -= rotateSpeed;
 
			if (key.isDown(Keyboard.SPACE))
				stage.addChild(new Laser(x, y, rotation));
 
			y += vy;
			x += vx;
 
			if (x > stage.stageWidth)
				x = 0;
			else if (x < 0)
				x = stage.stageWidth;
 
			if (y > stage.stageHeight)
				y = 0;
			else if (y < 0)
				y = stage.stageHeight;
		}
 
		public function degreesToRadians(degrees:Number) : Number
		{
			return degrees * Math.PI / 180;
		}
 
	}
 
}

And now for step 3.

3. Writing our Laser Class so we can fire Blue Awesomeness

Okay, in order to make Blue Awesomeness(our laser) we gotta fire out what class variables we may need. As you can see from the ship class we are passing in the x, y, and the rotation of our ship  Since our laser is established at creation and doesn’t alter it’s direction or speed after creation we don’t need to save these details. The only thing our ship needs to know at every frame is where it is going. So we need to store it’s velocity in x and y. So technically we need two class variables vx and vy. While it’s not needed I’m going to add a speed variable as well so I can change it easily later if needed.

So the start of our laser class looks something like this:

package com.asgamer.directionalmovement
{
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Laser extends MovieClip
	{
 
		private var vx:Number = 0;
		private var vy:Number = 0;
		private var speed:Number = 12;
 
		public function Laser (x:Number, y:Number, shipRotation:Number) : void
		{
 
		}
 
	}
 
}

Not much of a breakdown here… we just created the class variables and gave them a starting value and added the code for our constructor.  Let’s start filling in our constructor now.

So what do we need to do? What needs to be set to start off our laser? Well, let’s see. We need to place it at the correct x and y coordinates, set it’s rotation, find it’s velocity, and setup a listener so we can update the laser on every frame.

Let’s look at some more code… our now filled in constructor. (Plus our degreesToRadians function from the ship class)

		public function Laser (x:Number, y:Number, shipRotation:Number) : void
		{
 
			this.rotation = shipRotation;
			vy += Math.sin(degreesToRadians(shipRotation)) * speed;
			vx += Math.cos(degreesToRadians(shipRotation)) * speed;
 
			this.x = x + vx*2;
			this.y = y + vy*2;
 
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		public function degreesToRadians(degrees:Number) : Number
		{
			return degrees * Math.PI / 180;
		}

Alright source code breakdown time.

• this.rotation = shipRotation; point our laser in the same direction as our ship
• vy += Math.sin(degreesToRadians(shipRotation)) * speed; vx += Math.cos(degreesToRadians(shipRotation)) * speed; Remember this? You should. It’s the same thing we did to the ship to make it more in the direction it was pointing. I’d explain it with more intelligence and detail but I’m not a mathematician. Let’s just say we are taking the speed of our laser and applying it to the x and y based on the laser’s rotation.
• this.x = x + vx*2; this.y = y + vy*2; Why +vx*2 you ask? Why not just x? Well, our ship’s x is at our ship’s center. If we add the laser at the same place it will appear in the center of the ship. Not attractive in my opinion. So we know if our laser is shooting in the right direction and continues moving in the right direction when we add vx and vy on each frame then we can just add a little extra vx and vy to the creation and move the laser on away from our ship’s center when it is created. Awesome huh? Simple yet works.
• addEventListener(Event.ENTER_FRAME, loop, false, 0, true); You know what this is… seriously. Calls loop every on every enter frame.  So what’s that tell you? Next we’re writing a loop function.
• public function degreesToRadians(degrees:Number) : Number {…} This is the exact same function from the Ship.as class. Simply converts degrees to radians. Now to be honest with you, adding degreesToRadians to every class that needs it is probably a very bad way of programming. I mean, save yourself some time and create a static class and add your common functions to it so you can use them when necessary. Hmm…. static classes, I may have to discuss that in the next tutorial. For now, know that adding degreesToRadians to every class you’ve ever wrote won’t destroy your game or project, it’s just tedious and there is an easier way. But don’t worry about that, we’ll get to it another time.

So what are we doing with each loop? Not much. Just adding our velocity to x and y. Then, of course, making sure our laser is still on screen because if not, we need to remove it. So here’s the last two functions in our laser class.

		public function loop(e:Event) : void
		{
			y += vy;
			x += vx;
 
			if (x > 520 || y > 420 || x < -20 || y < -20)
				destroy();
		}
 
		public function destroy() : void
		{
			if (parent)
				parent.removeChild(this);
 
			removeEventListener(Event.ENTER_FRAME, loop);
		}

Simple huh?

• y += vy; x += vx; Pretty self explanatory. Add our velocity to x and y and move our ship! Awesome, I love Flash and its simplicity.
• if (x > 520 || y > 420 || x < -20 || y < -20) destroy(); If our laser runs off the game screen… kill it. Well call our destroy function and it will kill it.
• if (parent) parent.removeChild(this); If the laser has a parent then remove the laser from the parent. Woah! what is a parent? Well when a MovieClip (or in general any DisplayObject) is inside another MovieClip then that Movieclip is the child and the other is the parent, respectively. So when in our Ship.as we did stage.addChild(new Laser(…)); the parent of our laser became the stage. So all we are doing is saying if the parent isn’t null then it has a parent and we need to remove it from the parent. This way garbage collection can grab it.
• removeEventListener(Event.ENTER_FRAME, loop); This stops the laser from calling loop every time we enter the frame. Once removed we have no way to access our laser anymore so garbage collection upon it’s next run will grab our laser and get rid of it from memory.

Last here’s the full source code for our laser class.

package com.asgamer.directionalmovement
{
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Laser extends MovieClip
	{
 
		private var vx:Number = 0;
		private var vy:Number = 0;
		private var speed:Number = 12;
 
		public function Laser (x:Number, y:Number, shipRotation:Number) : void
		{
 
			this.rotation = shipRotation;
			vy += Math.sin(degreesToRadians(shipRotation)) * speed;
			vx += Math.cos(degreesToRadians(shipRotation)) * speed;
 
			this.x = x + vx*2;
			this.y = y + vy*2;
 
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		public function loop(e:Event) : void
		{
			y += vy;
			x += vx;
 
			if (x > 520 || y > 420 || x < -20 || y < -20)
				destroy();
		}
 
		public function destroy() : void
		{
			if (parent)
				parent.removeChild(this);
 
			removeEventListener(Event.ENTER_FRAME, loop);
		}
 
		public function degreesToRadians(degrees:Number) : Number
		{
			return degrees * Math.PI / 180;
		}
 
	}
 
 
}

Alright guys and gals, we’re finished!!! You should have something that looks like the below.

What good is smoke? Let’s think for a second. What produces smoke? Failing mechanical equipment, grenades, guns, volcanoes, factories, fires, vehicles, and probably a million other things. So does your Flash game need smoke, well, that’s for your to decide. But the fact of the matter is we can produce some rather convincing smoke with a very simple bit of code and a little Adobe Photoshop. So let’s make some smoke.

Creating Our Smoke Graphic Texture in Photoshop

Open up Photoshop and create a new document 40×40. Now go to your brushes window (F5) and select the brush in the image below.

and change a few of the settings on this brush as in the image below.

Now simply go in the middle of your canvas and make a smoke puff. Set the opacity down a little maybe 20% and start drawing. Make a little texture to it.

It should look a little something like the above. Take your puff and save it as a png. If you don’t like how your puff looks then you can feel free to copy mine above. Just save it, it’s a png and will work well.

Setting Our Smoke Puff up in Flash

Okay. Very simple, Import from the Library your smoke puff. File > Import > Import to Library…

Now just drop the image of your smoke puff dead center in the middle of a new MovieClip, name is SmokePuff.  Your stage should look like the image below:

Okay so one more thing left to do and you are set. Right click your SmokePuff MovieClip from the Library(CTRL+L) and select Linkage… Now just copy what you see below and click okay.

One last thing… set your document class to Main. Nice. Flash is ready, let’s start writing some code.

Writing the Actionscript to make some Smoke

Okay guys, this has been a super quick tutorial so far. Lots of images and little to say. Let’s get into the code that will say everything we need to make our smoke fly beautifully. Honestly guys this code is so straight forward, let me just post the Smokepuff.as class at once and explain it later. Make sure you save it to com/asgamer/graphics

package com.asgamer.graphics
{
 
	import flash.display.BlendMode;
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Smokepuff extends MovieClip
	{
 
		public var vx:Number;
		public var vy:Number;
 
		public function Smokepuff() : void
		{
			alpha = Math.random();
			vx = Math.random() - Math.random();
			vy = Math.random() * 3 - 5;
			scaleX = scaleY = Math.random();
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		private function loop(e:Event) : void
		{
			alpha -= 0.01;
			y += vy;
			x += vx;
			scaleX = scaleY += 0.02;
 
			if (alpha < 0)
				removeSelf();
		}
 
		private function removeSelf() : void
		{
			removeEventListener(Event.ENTER_FRAME, loop);
			parent.removeChild(this);
		}
 
	}
 
}

Let’s break it down:

• We have a vx(velocity x) and vy(velocity y) class variable. Both are numbers and will hold the velocity of our smoke puff.
• In our constructor we set up some basic information we need to use through our smoke puff.
• alpha = Math.random(); We need some diversity with our puffs, let’s make them all start at a random alpha.
• vx = Math.random() – Math.random(); Set the vx to something randomly between -1 and 1
• vy = Math.random() * 3 – 5; We need a negative vy so our smoke will move upward. This line will give us a number between -5 and -2 and some diversity in the speed of our smoke.
• scaleX = scaleY = Math.random(); Choose a random value to start our smoke’s size. Once again to add some diversity.
• addEventListener(Event.ENTER_FRAME, loop, false, 0, true); each time we enter a frame… call loop.
• alpha -= 0.01; Make the alpha go down with each frame.
• y += vy; x += vx; Apply our velocity to our smokepuff.
• scaleX = scaleY += 0.02; Make our smoke spread out as it travels.
• if (alpha < 0)  removeSelf(); If our smoke is no longer visible… let’s get rid of it.
• removeSelf() no need to fully explain this. It simply removes our event listener and removes the smoke puff from the display stack.

Alright, so that makes our smoke move.  Let’s write the code for the main class.

package
{
 
	import flash.display.Stage;
	import flash.display.MovieClip;
	import flash.events.Event;
	import com.asgamer.graphics.Smokepuff;
	import flash.display.Sprite;
 
	public class Main extends Sprite
	{
 
		public function Main() : void
		{
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		private function loop(e:Event) : void
		{
			var smokepuff:Smokepuff = new Smokepuff();
			smokepuff.x = 250;
			smokepuff.y = 250;
			stage.addChild(smokepuff);
		}
 
	}
 
}

Okay breaking this down is extremely simple. We’re just creating an event listener to call loop on every enter frame like we did in Smokepuff. In the loop class we simply are creating a Smokepuff and positioning it at (250, 250) and adding it to the stage. From here our Smokepuff code will do everything on it’s own with a little help from garbage collection in the end.

Ready to see what it looks like?

Awesome we’re done. Here’s the final source:
Making Smoke in Flash Source Code Zip Archive

So you just finished your first flash game, it’s excellent, at least you think so. I mean you put hours on top of hours into it. Your eyes have been bloodshot and you’ve pulled your hair out more than once. Needless to say, you’ve worked hard and you are incredibly proud of it (But your ego is in check, you’re not arrogant or anything ). So you send your game off to be spread virally around the internet and it’s doing amazing!!! You’re making all kinds of money on your advertising, then a week later some guy comes out with your game and new graphics… better graphics. But it’s the same game, seriously to the last detail it works almost the exact same way. You’re the victim of someone decompiling your game and stealing your source code! You’re game loses popularity and you just lost a lot of hard work and money!

Okay, that’s a fictitious example but it happens and it’s easier than you may think. For $79.99 you can purchase Sothink SWF Decompiler and you will be on your way to decompiling any and every swf you can get your hands on. Does it work? Yes. And let’s be honest, if someone is shady enough to steal your flash game’s actionscript code, they probably illegally downloaded SWF Decompiler meaning anyone can decompile your swfs for free!

What is Flash SWF Encryption?

Encryption is what is going to save your game from falling into the wrong hands.  It allows you to scramble your source code to the point that it will be completely unreadable by the person trying to recover your source code. The good is most, if not all, encryption software works on a compiled swf file so you don’t have to worry about it messing up your actual as2/as3 source code. The one thing I need to clear up though is all SWF Encryption software that I know of is not really encryption. Encryption requires decryption in order to make the encrypted application work. Since that’s not very reasonable in a public distributed viral flash game, it’s not a good option. Flash Encryption software actually works via code obfuscation methods.

Obfuscation you say? Yes, if your wondering. Obfuscation simply is the scrambling and renaming of your code to make it difficult to manage and interpret. So from now on when we call in encryption software as it is popularly called, we really mean obfuscation software.

Okay okay how do I encrypt my game?

Simple! There’s quite a few encryption software products on the market.  A simple search for flash encryption software on google will return plenty of possibilities.  The two games I’ve released to the public were encrypted and I wouldn’t have considered releasing them without it.

Encrypt my Game Now with Kindisoft secureSWF

I’ll be honest, I’ve researched flash game encryption for quite a while and when I finally decided who to use, I chose Amayeta SWF Encrypt 5.0. This was over a year ago. However, after a lot of reading at the Flash Game License forum I’ve seen it to be a pretty heated battle between whether SWF Encrypt or Kindisoft secureSWF is the better encryption software. That said, I highly doubt most of the people in the discussion have used both products, as of now, I have.

A  few weeks ago I asked Kindisoft if I could have a copy of their software to review. Full knowing that I could give them a bad review they handed over license and linked me to their download page to test the software. If I had developed their software, I would have done the same thing. It is without a doubt the most superior flash encryption software I have seen to date, it’s something to be proud of developing.  You can’t go wrong with this product, it’s simply amazing. Compared to secureSWF, SWF Encrypt options pale in comparison. Don’t get me wrong, SWF Encrypt is a solid product and it works (most of the time) but secureSWF is a lot more effective.

Once I got secureSWF loaded on my machine, my first goal was to fix a problem I’ve had with encrypting all my games with SWF Encrypt. Every time I encrypt a game on Kongregate with the API added I get a weird API Bootstrap error that messes up my game. I tried everything with SWF Encrypt to make it work but it never did. I ended up uploading my games with no encryption. SCARY! I know. secureSWF’s endless options helped me take care of everything I needed, now my Blueberry: Escape from Chaos Factory game is up on Kongregate and encrypted. Needless to say I am very happy and Kindisoft’s secureSWF is the reason why.

How to Use Kindisoft secureSWF to Encrypt your Game

Now you may or may not want to use secureSWF, that’s fine. But if you do, and I think the next few lines will convince you, here’s a look at all the features that the software has to offer and how you can use it to encrypt your next flash game.

The secureSWF main loadup screen. Here you can pick which swf files you want to encrypt and setup some basic information

Okay so first things first, the main screen when you load up the application.  All you do is click add and select your swf file that you want to encrypt. Once done it will pop up a little information about your swf in the bottom right corner. As you can see Blueberry is a pretty detailed game (220 classes).  Another cool thing here is your have a dropdown of “Protection Presets” these let you choose how you want your swf file to be encrypted. There’s a few options from Aggressive to Testing, which you choose depends on how you developed you game. Certain programming choices you make will determine what options you can use and where. I’ll give an example later. Anyway, I chose custom with Blueberry because I wanted full control of what was encrypted. An extremely valuable feature that I have only seen with secureSWF. let me know if you know of a product with as much customization. I don’t know of any.

The Identifiers Renaming Tab. Here you pick what you want secureSWF to rename in order to make reading your source code more difficult.

This made me very happy. Every class I used in Blueberry appeared in the tree list on the left. I could go through all the classes and choose which I wanted to be renamed and which I didn’t. At the same time when I clicked on a class it’s functions and variables would appear on the right. I could also select which of them I wanted to be renamed. Like before, I have a drop down that allows me to choose how aggressive I want the renaming to be.  There’s also an advanced option at the bottom that allows me to quickly control what classes, functions, variables, and labels will be renamed.

Now if you are wondering why you need to be in control of what’s renamed, let me explain. There are times when renaming certain functions or classes can cause your application to not work. Remember the tutorial about using strings to call functions? Well, imagine if our encryption software names our jumpUp function “id_loc_3″ but our string still keeps the data “jumpUp”.  We’ve got a problem. So to fix this we can simply tell secureSWF to not rename our jumpUp function. This is awesome, the other software I have used required me to disable all renaming in order to fix the issue.

The labels tab. Here you can choose which labels to rename.

Like the class renaming list the above picture is the label renaming list.  Here you can select what labels you want to rename and which you would like to leave alone. This is valuable for the same reason as I mentioned above.

An example, if you use gotoAndPlay(frame label); in your code, you don’t want your frame label to be changing. In the above case I’m deselecting vats because I want to be able to use gotoAndStop(“vats”); in my game’s sourcecode.

The protection options. Make a few changes here and there and set your flash file as encrypted as possible.

Here you can do a lot of work to encrypt your game. Everything for the most part is controlled by sliders which you can move in order to find the highest level of encryption that will work well with your game.  I’ll be bluntly honest with you, I don’t fully understand the details but I know what it does works as you can see from how mangled the source code is after an encryption occurs.

There is also the option to encrypt strings.  This works really well; however, not really needed unless you are wanting to hide the text inside the string from a decompiler. Which could definitely be useful on occasion, and it’s great to be able to access this feature if needed.

One of the handiest features on this tab is the domain locking feature. With domain locking you can control what websites the game can be played on. This works great when you have a site-locked sponsorship of your game that you want to make sure only works on that website. All you have to do is enter the url of the website the game is playable on and you are all set

There’s also a few optimization features that will increase the speed and filesize of your game. Definitely an excellent feature to have around.

Final Note and examples of secureSWF and SWF Encryption

Currently my flash development arsenal consists of four very solid applications.

• Adobe Flash
• Adobe Photoshop
• Flash Develop
• and now Kindisoft secureSWF

With the first three apps I can program and design a solid flash game. With the last application, I can make sure my flash game stays mine and out of the hands of would be thieves. It’s the perfect mix.

I’d love to show you a before and after of some of the code from Blueberry but secureSWF’s encryption worked so well I couldn’t get my decompiler to actually decompile the code without crashing. Here’s an example from secureSWF’s website of what their encryption does to actionscript source code:

Before secureSWF:

private function getNeighbours(i:int, j:int):Array{
  var a:Array = new Array();
  for (var k = 0; k < 8; k++){
    var ni = i + int(neighbour_map[k][0]);
    var nj = j + int(neighbour_map[k][1]) ;
    if (ni < 0 || ni >= xsize || nj < 0 || nj >= ysize)
      continue;
    a.push(Cell(cells[ni][nj]));
  }
  return a;
}

after secureSWF:

private function getNeighbours(_arg1:int, _arg2:int):Array{
  var _local3:Array = -(((null - !NULL!) % ~(undefined)));
  var _local4:*;
  var _local5:*;
  var _local6:*;
  _local3 = new Array();
  _local4 = 0;
  for (;//unresolved jump
  , _arg2 < 8;_local4++) {
    _local5 = (_arg1 + int(!NULL!));
    _local6 = (_arg2 + int(!NULL!));
    if (true){
      _arg1 = (((//unresolved nextvalue or nextname << !NULL!) + !NULL!) 
<< undefined);
      _arg1 = (!(!NULL!) ^ !NULL!);
      (!NULL! instanceof !NULL!);
      var _local1 = (((!NULL! as !NULL!) + !NULL!) == this);
      if (!(!NULL! == !NULL!)){
        -((true << !NULL!)).push(Cell(cells[_local5][_local6]));
      }
    }
    if (!true){
      (_local6 < 0);
      (_local6 < 0);
      (_local5 < 0);
    }
  }
return (_local3);
}

I hope this gets you excited about encrypting your flash games. If you want more information you can find secureSWF at http://www.kindisoft.com/secureSWF/. Enjoy and if you want to test out some of their products you can from their website or FlashGameLicense. FGL has partnered with Kindisoft to offer encryption for all flash files hosted on their website. So make sure to check out FGL and use a basic version of Kindisoft’s encryption and site-locking.

If there’s one game that’s came out lately that I have really liked… it’s Death vs. Monstars.  It’s an exciting simple little flash game with lots and LOTS of bullets. If you haven’t played it, you definitely should. The graphics are simple yet beautiful, and the gameplay is just fun.

Here’s the game if you want to play it. (after the jump)

Anyway, I didn’t write this tutorial but it’s a good graphics one.

Here’s the link to the tutorial by the game’s author:
http://www.gamereclaim.com/2009/04/how-to-make-death-vs-monstars-style-explosions/

Enjoy!

Whatever you want to call it, a complete Flash game is going to need an user interface that kicks off the game. A place where the user can get more information about the game, see the credits, save the game, load the game, whatever needs to be done. The Menu the starts the game provides this functionality. So how are we going to do it? Well, you’re probably thinking this is a simple task, and it is. We’re going to make it a step simpler by creating a base menu class that we will extend in all our other menu classes. This base class will keep some of our core functionality so we don’t have to write transitions for each class uniquely.

Now, you are going to need to download a new zip file to start this project.  If you have been keeping up with the last two tutorials in this series, you will still need to download this zip archive.  The code in this zip is the same as we left it at the end of the last project. However, the fla contains a new folder called Menus with a few graphic files and MovieClips setup to be used in this tutorial. The reason I am doing this is because, I really don’t want to keep explaining the same things over and over, if you are having problems understanding then you need to go back and read AS3 Flash Games for Beginners.  Anyway make sure you grab the zip file from the links above so you can get started.

Step 1: Explaining the new FLA File

Okay here’s the deal. The FLA file you downloaded in the zip has a new folder called Menus in the Library. Under Menus we have Credits and MainMenu folders.  Each have some graphic files in them and buttons for our Menu pages. The main file in each is titled Credits and MainMenu. These two MovieClips have linkage set to com.asgamer.snipergame.CreditsMenu and com.asgamer.snipergame.MainMenu respectively. They are both set to Export on Frame 1 and are not in our AssetHolder MovieClip.  So you will need to turn export on frame 1 off and drop them in the AssetHolder MovieClip.  I could have done this for you but this is good practice because you’ll need to do it with any asset your create in your game. (At least with the preloader method we are using)

Step 2: Our Menu Design Goals

Okay, so you have already seen our menus. But what is my user interface goal? Well, in the few games I have made, I’ve learned a thing or two to be consistent. One of those things is that pretty much every user interface menu you design will need to appear and disappear as the user jumps between them. And of course we’d like our menu to transition gracefully so we need a way to animate it in and out.  Since this is always consistent in our UI, let’s make a base class for our menus that does the animate in and out.

Whoa, base class you say?

I may have talked about this before and maybe you know what it is but if not I’ll explain.  Let me explain it in a simple manner.  A Base Class is a class that when extended we can use all the public or internal functions and parameters of that class.  So we can write our animate in function once in our menu base class then have all our other classes extend it.  It’s like when I talked about MovieClips and DisplayObjects in AS3 Flash Games for Beginners

Step 3: Let’s Make It (Our Base Class) Happen.

Alright so here’s the deal. In our com/asgamer/snipergame directory let’s create our base class with a new AS file called BaseMenu.as. I want this base class to do two things:  Load (add to stage and animate in) and Unload (animate out and remove from stage).  Add while we are at it, let’s just have some fun with it. Let’s make it so that if we send it our next Menu to unload, it will go ahead and load it when our current Menu unloads. That’s a lot of load/unload talk. Let’s make it work.  So here’s our BaseMenu.as code.

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import caurina.transitions.Tweener;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class BaseMenu extends MovieClip
	{
 
		public var stageRef:Stage; //the stage
		public var loadNext:BaseMenu; //instance of next Menu to load
 
		public function BaseMenu()
		{
			alpha = 0;
			y = 400;
		}
 
		public function unload(loadMe:BaseMenu = null) : void
		{
			if (loadMe != null)
				loadNext = loadMe;
 
			Tweener.addTween(this, { alpha: 0, y:-400, time: 0.7, onComplete:remove } );
		}
 
		public function remove() : void
		{
			dispatchEvent(new Event("menuRemoved"));
			if (stageRef.contains(this))
				stageRef.removeChild(this);
 
			if (loadNext != null)
				loadNext.load();
		}
 
		public function load() : void
		{
			stageRef.addChild(this);
			Tweener.addTween(this, { alpha: 1, y:0, time: 0.7} );
		}
 
	}
 
}

And the breakdown:

• First of all, imports and our BaseMenu extends MovieClip.  We have two class variables: stageRef (Stage Reference) and loadNext(an instance of the next Menu to load, if we have one)
• In the constructor we set the alpha to 0 and the y to 400. This is so we can animate it fading in and moving up into position when we call load.
• public function unload(loadMe:BaseMenu = null) : void. Our unload function. It excepts a parameter called loadMe which is an instance of a BaseMenu (meaning it’s one of our menus we will create that extends BaseMenu).  The loadMe parameter is the new menu that we are going to load when we unload our current Menu.  Now if we don’t pass a new Menu into unload then loadMe will store as null.
• if (loadMe != null) loadNext = loadMe; So if loadMe gets something passed into it, then we will store it in loadNext (our class variable).
• Tweener.addTween(this, { alpha: 0, y:-400, time: 0.7, onComplete:remove } ); A simple animate out and move up tween using Tweener. If you need to know how to use Tweener or what it is then you should read Using Tweener in AS3 to Move Objects.
• public function remove() : void. When our tween completes this function is called. This function does three simple things. First it dispatches the event “menuRemoved” which we may need to use at sometime in the future, currently we have no need for it. Then if our menu is on the stage we remove it from the stage. And last if loadNext is not null then we go ahead and call load on the loadNext menu instance.
• public function load() : void. Simple function that adds our BaseMenu to the stage and Tweens it up into position while fading it in.

Alright that covers the BaseMenu. Let’s make our MainMenu and our CreditsMenu pages.

Step 4: Making the Main Menu and the Credits Menu Work

Oh this is simple. We already have everything setup in our FLA so we just have to code it.  And coding these two is so simple I’m just going to drop off the code for both of them then explain it real quickly.

MainMenu.as

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.display.Stage;
	import flash.events.MouseEvent;
 
	public class MainMenu extends BaseMenu
	{
 
		public function MainMenu(stageRef:Stage = null )
		{
			this.stageRef = stageRef;
			btnPlay.addEventListener(MouseEvent.MOUSE_DOWN, playGame, false, 0, true);
			btnCredits.addEventListener(MouseEvent.MOUSE_DOWN, credits,  false, 0, true);
		}
 
		private function playGame(e:MouseEvent) : void
		{
 
		}
 
		private function credits(e:MouseEvent) : void
		{
			unload(new CreditsMenu(stageRef));
		}
 
	}
 
}

CreditsMenu.as

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.display.Stage;
	import flash.events.MouseEvent;
 
	public class CreditsMenu extends BaseMenu
	{
 
		public function CreditsMenu(stageRef:Stage = null )
		{
			this.stageRef = stageRef;
			btnReturn.addEventListener(MouseEvent.MOUSE_DOWN, returnMainMenu,  false, 0, true);
		}
 
		private function returnMainMenu(e:MouseEvent) : void
		{
			unload(new MainMenu(stageRef));
		}
 
	}
 
}

Okay Breakdown Time:

• First thing you notice is that both have imports and extend BaseMenu. So they both have all the functionality of our BaseMenu class.
• Both constructors except the stage reference. We add = null so during preloading when the menus try to load from inside our AssetHolder they won’t complain about not getting a parameter sent in to them.
• Then also in the constructor we set event listeners on our buttons that our inside our Menu Movieclips.
• the playGame function is currently empty. We will use it in the next tutorial.
• unload(new MainMenu(stageRef)); This unloads our menu(by calling unload from our BaseMenu class) and loads the instance of MainMenu that we are passing into it.

See I told you it was simple! This tutorial is finished. Here’s the final SWF & source:

Menus, UI, Screens, or Windows Complete Source Zip Archive

This is a super valuable tip that has saved me a lot of time and headaches when starting a new project. Do you often find yourself copying frameworks like Tweener, Papervision, Box2D, as3CoreLib, and all the many others into the directory of your latest project? It get’s annoying eh? Well there is a quick and very easy way to solve this problem so you don’t have to always copy them every time you start a new project.

Okay so here’s the deal, you are going to want to create a folder somewhere on your hard drive that you will put all your most used frameworks. Once it’s created put the frameworks in there and you are ready to go.

All you have to do now is inside Flash go to Edit > Preferences (CTRL+U) and click on ActionScript. You’ll get this little window:

Now if you’re class is Actionscript 3.0 then under language select the ActionScript 3.0 Settings… button. If your class is ActionScript 2.0 then select that button instead.

Now you get this screen:

List of Class Paths that can be accessed from any Flash Project.

Alright. So you can see that I make use of this little feature extensively. I’ve added practically every AS3 Project that I use here.  Why? Because I hate copying  Tweener to every project that I write, this universal classpath idea is awesome.

So here’s how you use it, if you can’t tell already, press the little + sign and paste the url to your class here.  You can also click the crosshair symbol and use a GUI to get to the directory you want to add.  Notice that most of my directories end in an src file. This is because the majority of Projects that you will download will start the base directory of the current version with src… particularly if they use subversion.

If you use Flash Develop you can do the exact same thing with it under Project > Properties > Classpaths > Edit Global Classpaths.

Anyway, you’re all set! Happy coding.

One of the number one ways you can make money off your Flash game is to get a sponsor. One of the number one ways to get a sponsor is http://flashgamelicense.com.  That said, if you get a sponsor they are going to want their advertisement at the beginning of your Flash game.  Now honestly, this is probably one of the simplest things you can do with Flash. I mean all we are doing is showing their advertisement, which is likely a MovieClip, and then jumping on to our game.  But the thing is, you could sell your game to multiple sponsors. You are going to need a quick and easy way to show of the sponsors advertisement and your advertisement without having to change your whole game every time. So today we are going to write a quick simple class to go through and play all our sponsor and credit MovieClips before our game starts.

This tutorial is apart of a series on Flash game development and how to make a complete Flash game from the ground up.  Below is the Table of Contents for this series. If something in this article is confusing please return to the first article to progress from there. If you want to start this tutorial without reading the previous one, here is the source from the previous tutorial.  This series is for intermediate Flash users. If you are a beginner and the information in this series is too advanced please read, AS3 Flash Games for Beginners.

Step 1: Why our Preloader has a PhaseOut Function that we need to use

If you are following along from the previous tutorial you should remember that our ThePreloader class has a function called phaseOut that we run when our file is completely preloaded.  Also if you remember from the previous tutorial, we can’t use any of our game’s assets until our main timeline reaches frame 3.  Well if our phaseOut function immediately calls phaseComplete and jumps to loading our sponsors preroll then we are in trouble. Why? because our sponsors preroll hasn’t loaded yet since we are still on frame one. So just open your ThePreloader.as file and inside our phaseOut function add:

Tweener.addTween(this, { time: 1, alpha: 0, onComplete:phaseComplete } );

Alright, of course you will need to import Tweener and add it to your directory so flash can use it. But now it will take one second for our Preloader to fade out(plenty enough time for us to reach frame 3), then we can start loading our sponsors.

Step 2: Organize your Preroll MovieClips

Okay, First let me state the obvious, we are using Flash. Flash is great 2D animation software. Therefore most of your sponsors will probably do their animated logo as a MovieClip. So we are going to assume that all your sponsors will use MovieClips for their logo. Don’t worry, if they use a video file you can import it and tell Flash to embed it in a MovieClip. And if they just send you a JPG you can throw it in a MovieClip to solve that problem as well.

So here’s what you need to do. Download my FLA for this project. I have two MovieClips ready to be used. I’ll discuss how they are setup once you look at them.

Here’s the FLA: CompleteGame.fla

If you want to keep using your FLA from the previous project, just copy and paste Sponsors Preroll folder from my FLA file into your FLA file.

You’ll notice there are two MovieClips prefixed with Preroll under the Sponsors Preroll folder.  Doubleclick PrerollEchodrop, you’ll notice the timeline is 130 frames long.  In those frames we animate in a still rastor image of the Echodrop logo then we fade it back out. At the end, on the very last frame, we write in the actions:

gotoAndStop(1);
dispatchEvent(new Event("finished"));

So when our Preroll is finished, we dispatch “finished”. All we have to do is listen for “finished” in our class and we will know the animation is over.

One more thing, right click on PrerollEchodrop in the Library and goto Linkage…  Your’ll notice the class is PrerollEchodrop and the Linkage… has “Export for ActionScript” but not “Export on First Frame”. So we need to make sure our PrerollEchodrop Symbol is in the AssetHolder MovieClip in order for it to export. (If you are using my FLA, it will already be in the AssetHolder MovieClip).  You’ll want to do the same with the PrerollGameSponsor and any other Preroll clips you use.

Step 3: Let’s Code our Preroll Sponsors Manager Class

Okay, this is actually a very simple class. Here’s what we need. A class that will create our preroll clip, animate through it, call the next clip, animate through it, and so on until all our prerolls are finished.  We’ll call our classPrerollSponsors. So make the as file and let’s write the code. It’s super simple, here it is.

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.display.Sprite;
 
	public class PrerollSponsors extends Sprite
	{
 
		private var stageRef:Stage;
		private var prerollList:Array; //keeps up with our Movieclip prerolls
		private var currentPreroll:int = 0; //the current preroll we are on
 
		public function PrerollSponsors(stageRef:Stage)
		{
			this.stageRef = stageRef;
			prerollList = [new PrerollEchoDrop(), new PrerollGameSponsor()];
		}
 
		public function preroll() : void
		{
			if (currentPreroll == prerollList.length)
				return prerollComplete();
 
			var clip:MovieClip = prerollList[currentPreroll];
			clip.x = (stageRef.stageWidth - clip.width) / 2;
			clip.y = (stageRef.stageHeight - clip.height) / 2;
			clip.gotoAndPlay(1);
			clip.addEventListener("finished", nextPreroll);
			stageRef.addChild(clip);
		}
 
		private function nextPreroll(e:Event) : void
		{
			e.currentTarget.removeEventListener("finished", nextPreroll);
			stageRef.removeChild(e.currentTarget as MovieClip);
			currentPreroll++;
			preroll();
		}
 
		private function prerollComplete() : void
		{
			dispatchEvent(new Event("prerollComplete"));
		}
 
	}
 
}

Okay, let me break this down:

• imports, extends, stageRef. You should know what all this is (stageRef is just a stage reference holder). If not you should be reading AS3 Flash Games for Beginners
• prerollList = [new PrerollEchoDrop(), new PrerollGameSponsor()]; Here we create instances of our two preroll classes and drop them in our prerollList array.
• public function preroll() : void. The function we call every time we want to start the next video in the list.
• if (currentPreroll == prerollList.length). So in the case of this example, currentPreroll should be 0 on the first run and prerollList.length should be 2. So if currentPreroll equals 2 then this will evaluate TRUE.
• return prerollComplete(); If the above evaluates true then we run this line.  Here we are telling flash to return the result of prerollComplete. If you look at prerollComplete quickly you’ll see it only returns void so we are actually returning nothing. But we will dispatch our event in prerollComplete which is all we want to do anyway. We could have wrote this in two lines: prerollComplete(); followed by return; But it’s just simpler this way.
• var clip:MovieClip = prerollList[currentPreroll]; Just grabbing the current preroll and dropping it in the variable clip. This way we don’t have to write prerollList[currentPreroll] every time we want to access it.
• clip.x = (stageRef.stageWidth – clip.width) / 2; clip.y = (stageRef.stageHeight – clip.height) / 2; This will center our MovieClip, no matter it’s size, in the middle of the stage. One thing is required for this to work. The movieClip’s registration point MUST BE in the top left corner of the movieClip.
• clip.gotoAndPlay(1); Simply reset and play our movieClip.
• clip.addEventListener(“finished”, nextPreroll); Remember we dispatch the event “finished” at the end of our preroll MovieClip. Well we catch it here and call nextPreroll when it occurs.
• stageRef.addChild(clip); uhm we add it to stage. Don’t even know why I am explaining this.
• e.currentTarget.removeEventListener(“finished”, nextPreroll); Alright nothing complicated. e.currentTarget will let us grab whatever dispatched the event. In our case, it was our preroll MovieClip. So we remove the event listener because we are finished with it.
• stageRef.removeChild(e.currentTarget as MovieClip); Remove the currentTarget.  as MovieClip let’s Flash know that the currentTarget is a MovieClip so it doesn’t give us a hideous error, 1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject., when we compile.
• currentPreroll++ increment the currentPreroll by 1
• preroll(); since currentPreroll is now 1 greater let’s run preroll again and show the next preroll advertisement or sponsor.
• dispatchEvent(new Event(“prerollComplete”)); We’re done! Dispatch “prerollComplete”. Now we just need to make something catch it.

Alright, so what’s going to catch the prerollComplete? The same thing that is going to create an instance of our PrerollSponsor class, the Engine.

Step 4: Using our PrerollSponsor Class

Okay. Open your Engine class. Inside the showSponsors class change it to be this:

			stage.removeChild(preloader);
			var ps:PrerollSponsors = new PrerollSponsors(stage);
			ps.addEventListener("prerollComplete", showMenu);
			ps.preroll();

Nice, I really shouldn’t need to break this down but I will.

• first we remove the preloader. (Which was already in our class from last time)
• we create a new instance of PrerollSponsors passing stage into it as a parameter
• we add an Event Listener that waits for prerollComplete to be called, once called we goto the showMenu function.
• Then we kick off the PrerollSponsors class by calling the function ps.preroll();

Last you just need to create a private showMenu function that receives an event. It doesn’t need to do anything but needs to exist so flash doesn’t crash.  Anyway, here’s our new Engine class with these new updates.

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);
			var ps:PrerollSponsors = new PrerollSponsors(stage);
			ps.addEventListener("prerollComplete", showMenu);
			ps.preroll();
		}
 
		private function showMenu(e:Event) : void
		{
			trace("showMenu");
		}
 
	}
 
}

Alright. We’ve completed the second part of Making a Complete Flash Game.

Here’s our finished source:
Prerolling Sponsor Ads and Your Logo Source Code Zip Archive

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