I’ll soon post extra info on using AS3 commands especially for AIR, and other features you can use to create a good application. For now, keep experimenting and see what you can come up with.

View the example here.

Create a circle on the stage and convert it to an MC, instance name ball. Add the following code to the main timeline:

var xspeed:Number = 0;
var yspeed:Number = 0;
var fric:Number = 0.9;
var ease:Number = 10;
function EF(event:Event) {
	xspeed += (mouseX-ball.x)/ease;
	yspeed += (mouseY-ball.y)/ease;
	xspeed*=fric;
	yspeed*=fric;
	ball.x+=xspeed;
	ball.y+=yspeed;
}
addEventListener(Event.ENTER_FRAME, EF);

The variables we set are xspeed, yspeed, fric (friction) and ease. Alter these later if you want.

Each frame we add the difference between where the ball is and where it needs to go divided by ease on to the speeds. We then multiply the speed by friction, in other words friction has an effect on the ball. Finally we relate this speed to the ball’s properties, and the effect is complete.

Say at first, xspeed = 0, the difference from the mouse to the ball is 100. This means the resultant speed is (0+100/10)*0.9=9
The next frame, xspeed = 9, difference = 91 so resultant speed is (9+91/10)*0.9=16.29
As you can see, as the ball gets closer (difference gets smaller), the speed increases. Now lets see what happens when the ball passes the target:

xspeed = 20, difference = 0, so resultant speed is (20+0/10)*0.9=18
Then xspeed = 18, difference = -18 (the ball has passed to the other side), resultant is (18-18/10)*0.9=14.58

Now that the ball has passed the target, it starts to slow down.

Websites want to do this because they know (or assume) they can earn more money from your game than they paid for the sponsorship. When people click on their link in your game, they get more traffic and more people click on their ads, earning them money. This is like Kraft hoping the viewers of that TV show will buy their product. The amount they pay you depends on how good your game is, and the agreement you make with them. This can be anywhere from $200 to $2000, even higher in some cases.

What you should never do is sell ownership of your game. Most portals respect your right to be the owner and creator of your Flash game, and they can’t force you to say something like ‘Game created by (sponsor)’. There are different types of sponsorship, too. Exclusive sponsorship is when you have to domain lock your game (so it can’t be shown on other sites) to the sponsor’s site either for a given period of time or forever. In this case, the payment will be more but you won’t have as much exposure of your game, and you can’t have it on your own site either.

Some common sponsors (and one’s that I’ve dealt with) include Armorgames, Hallpass, and Maxgames. FlashGameSponsorship is a site that is all about this developed by Adam Schroeder, It’s worth a look. It has details on sponsorship, a list of sponsors and other information.

This set of tutorials with take you through the basics of how to create a simple shooter game. Note that this is the way I do it, not the only way, and feel free to change things as you read as every game maker has a different style. The first part of the tutorial will show you how to make the main player and how you can control it. This tutorial is done completely is Actionscript 3.0, so if you only know AS2, see this post and if you don’t know actionscript at all, go here.

The first step is to draw the main character. We’re going to be controlling him using the WASD or UP, LEFT, DOWN, RIGHT keys to move him, the mouse to aim and mouse click will fire bullets. This is what you’ll be able make after you do this part. After you’ve drawn the character, put it on the stage and give it an instance name of ’ship’.

Now add this code to the main timeline:

var effects1_mc:MovieClip = new MovieClip();
addChild(effects1_mc);
addChild(ship);

var rad:Number = Math.PI/180;

var xspeed:Number = 0;
var yspeed:Number = 0;
var speed:Number = 0;
var maxspeed:Number = 3;
var angle:Number = 0;
var acc:Number = 0.3;
var friction:Number = 0.9;
var mouse_angle:Number = 0;

//KEYS
var left_key:Boolean = false;
var right_key:Boolean = false;
var up_key:Boolean = false;
var down_key:Boolean = false;
function key_down(e:KeyboardEvent) {
	if (e.keyCode == 37 || e.keyCode == 65) {
		left_key=true;
	}
	if (e.keyCode == 39 || e.keyCode == 68) {
		right_key=true;
	}
	if (e.keyCode == 38 || e.keyCode == 87) {
		up_key=true;
	}
	if (e.keyCode == 40 || e.keyCode == 83) {
		down_key=true;
	}
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
function key_up(e:KeyboardEvent) {
	if (e.keyCode == 37 || e.keyCode == 65) {
		left_key=false;
	}
	if (e.keyCode == 39 || e.keyCode == 68) {
		right_key=false;
	}
	if (e.keyCode == 38 || e.keyCode == 87) {
		up_key=false;
	}
	if (e.keyCode == 40 || e.keyCode == 83) {
		down_key=false;
	}
}
stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
function EF(event:Event) {
	if (left_key) {
		xspeed-=acc;
	} else if (right_key) {
		xspeed+=acc;
	} else {
		xspeed*=friction;
	}
	if (up_key) {
		yspeed-=acc;
	} else if (down_key) {
		yspeed+=acc;
	} else {
		yspeed*=friction;
	}
	speed = Math.sqrt(Math.pow(xspeed,2)+Math.pow(yspeed,2));
	angle = Math.atan2(yspeed, xspeed)+90*rad;
	if (speed>maxspeed) {
		speed = maxspeed;
		xspeed = Math.sin(angle)*maxspeed;
		yspeed = -Math.cos(angle)*maxspeed;
	}
	ship.x += xspeed;
	ship.y += yspeed;
	mouse_angle = Math.atan2(ship.y-mouseY, ship.x-mouseX)-90*rad;
	ship.rotation = mouse_angle/rad;
	//
	if (speed>0.1) {
		var trail:Trail = new Trail();
		effects1_mc.addChild(trail);
		trail.x = ship.x+Math.random()*10-5;
		trail.y = ship.y+Math.random()*10-5;
	}
}
stage.addEventListener(Event.ENTER_FRAME, EF);

Skip the first few lines, I will talk about this later. The first variable I set is ‘rad’ short for radians. This helps me convert angles quickly between radians and degrees. If you don’t know what radians are, don’t worry - you just have to know that they’re another form of representing angles and AS3 uses them for calculations. So if a times an angle in degrees by ‘rad’, I will get radians, and if I divide ‘rad’ into radians, I will get degrees.

The other variables are xspeed, yspeed, speed (absolute value of both xspeed and yspeed), maxspeed, angle (of direction), acc (acceleration), friction, and mouse_angle.

The next stage is creating the key listeners so we can see what keys are down, and what keys aren’t. As you can see, I set left, up down and right_key to false to indicate no keys are being pressed. Then I add the KEY_DOWN and KEY_UP listeners. The ‘keyCode’ corresponds to the code of the key that is pressed. 37 and 65 are the keys for A and the left arrow key. In English, the code reads ‘if the keycode is 37 or 65 (if A or the left arrow key is pressed), set left_key to true’. The same goes for the next 6 keys. We duplicate this for the KEY_UP listener, except change the values to false to show the keys are no longer down. We are going to use these booleans (true/false) in controlling the ship later in the code.

Next we create the ENTER_FRAME function which I named ‘EF’. The next part of the code asks, ‘If the left key is down, make the xspeed go down by the acceleration, or if the right key is down, make xspeed go up by the acceleration. If neither key is down, friction will cause the xspeed to come to 0.’ The same goes for the yspeed.

The next part of the code aims to limit the speed so it never goes pass ‘maxspeed’. I use the following technique, which calculates the combined speed value of the x and y speed’s, checks if it’s too fast and then adjusts xspeed and yspeed accordingly. The reason I do this, instead of checking the xspeed and yspeed individually is because the overall speed will end up being faster at a 45°. For example, if the maxspeed was 10, and it was travelling right at full speed, the overall speed would be 10. If we were going straight up, the overall speed would be 10. However, if we were going diagonally left and up, the xspeed would be limited to 10, as well as yspeed, meaning an overall speed of about 14 (using Pythagoras’ thereom). My technique ensures the overall speed is always limited to the same number (maxspeed).

Firstly we calculate this speed by using Pythagoras’ Thereom:

Where speed = the square root of xspeed squared plus yspeed squared.
At this stage we also calculate the angle, as shown in the diagram. I add 90° worth of radians on just because this is right through trial and error. If the speed is greater than the maxspeed, then we calculate the xspeed and yspeed based on this angle. We say xspeed is the sine of the angle times the speed, and yspeed is the cosine of the angle times the speed (we use negative because the flash plane is the normal cartesian plane flipped upside down).

Next we relate the x and y speed’s to the actual ship, so we add xspeed to the ship’s x and yspeed to the ship’s y, just like you would add the speed of a car to it’s distance travelled every hour. We then calculate the angle between the mouse and the ship with the same technique as we calculated the other angle. Then, the ship’s rotation will be this angle in degrees, so we divide by ‘rad’.

The next part handles the trails that come out of the ship at it moves. First you’ll need to make the trail animation. I made a simple shape tween of a white dot fading away. On the last frame, when you want the trail to be removed, place this code:

stop();
parent.removeChild(this);

First we stop the animation so it doesn’t continue playing. Then we remove the trail from it’s parent, which basically just removes the trail from view. Now go into the library, select your trails MC and right/control click on it and select properties, or press the tiny blue ‘i’ icon at the bottom of the library. Click ‘Advanced’ if you haven’t already and select ‘Export for Actionscript’. Where is says ‘Class’ type ‘Trail’. This creates a new class for AS and you can now grab the trail MC from the library using just code.

For a trail to to be put there each frame, speed must first be over 0.1, as there shouldn’t be any trails appearing when the speed is very small or 0. To bring an MC from the library to the code, we use the same format as other classes, like Number or MovieClip except we use the class name we gave the MC in it’s properties. At the start of the code, I created a new MC called ‘effects1_mc’. This was the MC where all the ‘under’ effects would go (effects that are shown below other things in the game). I then had to add the child, which makes the MC visible to the viewer. So that the ship MC appeared on top of the effects, I then added the ship child after the effects. After I made the trail MC I also had to add the child, this time to the effects1_mc who is the parent. This means the trails will appear below the ship. With the trail, I make the x and y positions equal to the ship’s position plus or minus a bit more.

Now you can export your movie and see what you came up with. Next time I’ll cover how to shoot bullets from the ship.

Firstly the properties are represented differently, there is no more underscore when you are setting properties:

//AS2
this._x = 100
//AS3
this.x = 100

The next thing you need to notice is that you can no longer add code to movieclips directly on the stage, all coding is now done from the timeline. Also, no more using ‘_root’.

If you are not already into defining variables or classes properly, AS3 forces you to do this or an error occurs. This is the correct format:

var name:Class = value;
//eg
var i:Number = 0;

A big difference in AS3 for game development is the use of event listeners. Now, instead of calling a function like ‘onEnterFrame’, you create a custom function that will execute on the event, then add an event listener to the MC you want the event to listen to. Here’s a quick example with the enter frame event:

var i:Number = 0;
function EF(e:Event) {
	i++;
	trace(i);
}
addEventListener(Event.ENTER_FRAME, EF);

First we set ‘i’ to 0 in the correct format, and as you can see the function name is custom so it can be whatever you want, however in the parameters you must have: “name:Event” to show that it will be part of an event. Then we add the event listener with ‘ENTER_FRAME’ as the event type and ‘EF’ was the function we created.

A big difference in game making in AS3, especially for me, was the use of depths and linking from the library. It doesn’t let you ‘attach a movie’ anymore, rather you have to add a class name to a MC in the library and then create a class with the same name in the code. Firstly, click on the properties for the MC in the library, click on ‘Advanced’ then ‘Export for AS’. You can no longer give an identifier. Instead, put a class name in with no spaces. For example, call it ‘MyMC’. Then add this code to grab the MC from the library and drag it onto the stage:

var mc:MyMC = new MyMC();
addChild(mc);

As you can see, instead of a default class name, we use ‘MyMC’, or whatever you named it in the properties. You then always have to make sure to ‘add the child’. This makes the MC visible on stage, without it the MC would be there but the viewer won’t be able to see it. Also, there’s no more ‘removeMovieClip’. Instead, you have to use this code to the MC (not on the main timeline):

parent.removeChild(this)
stop();

The ’stop’ isn’t necessary, I put it in there in case you have a looping mc, in which case if you didn’t stop it, the MC will still be there (just not visible) and it would loop back to the same code which will cause errors because it will try removing the child that isn’t visible anymore. You’ll also have to remove event listeners you put on the MC, or more errors will come up. To do this, use this format:

this.removeEventListener(type, function);

This should be all the basics covered. I’ve missed a lot of things out, so if you need more help see the Flash Help Documentation.

This new blog will make it tons easier for me to keep you posted on news from Kabomb, as well as flash related news from around the web. I’ll also be able to post open source tutorials, prototypes, and flash experiments that you can follow. You’ll be able to comment on all my posts and I’ll try to reply to the ones that need a reply, if not just email me.

If you have no idea what flash is or you want to get into it, you can download a free trial from the Adobe Website where you’ll also need flash player (you should already have it) to see all the examples on your web browser.

Okay, let’s get down to business - my first tutorial - Cursor Effects. This lets you create effects like those in my Cursorized series where MC animations continually come out at the cursor which creates a really cool effect.

Here’s what I did.

Now I’ll explain how I did it.

Scroll to AS2 version

AS3
First create a blank MC with an instance name of ‘Effect’ (no quotes, case sensitive). Click on ‘Advanced’ (if you haven’t already) and select ‘Export for Actionscript’. Click OK. Now you have to create a simple animation that will be the basis of the effect.

Create a blank keyframe after the last frame of the animation, and put this code there:

parent.removeChild(this);
stop();

This removes the MC from being visible, and stops it so it isn’t needed any more.

On the main timeline, insert this code:

function EF(event:Event) {
	var effect:Effect = new Effect();
	addChild(effect);
	effect.x = mouseX;
	effect.y = mouseY;
	effect.rotation = Math.random()*360;
}
addEventListener(Event.ENTER_FRAME, EF);

We create a function called ‘EF’ (EnterFrame) which will be executed once every frame.
In this function, we create a variable called ‘effect’ in the ‘Effect’ class. You created the ‘Effect’ class when you selected ‘Export for Actionscript’. In other words, we’re creating a new MC based on the ‘Effect’ instance.
This MC needs to be visible, so we add the child so it can now be viewed by the viewer.
The next lines determine what happens to the effect just as it has been created. Here, we set the effect’s x and y positions to the mouse, and make the rotation random from 0 to 360. You can change or add code to this if you want, you could make the x and y positions random or whatever.

Finally we add a listener to the function, the listener type is ‘ENTER_FRAME’ (so it’s executed each frame) and the name of the function is ‘EF’.

Export your movie and see what you came up with! You can try out tons of effects, just experiment a little.

AS2 Version

First create a blank MC with an instance name of ‘effect’ (no quotes). Click on ‘Advanced’ (if you haven’t already) and select ‘Export for Actionscript’. Click OK. Now you have to create a simple animation that will be the basis of the effect.

Create a blank keyframe after the last frame of the animation, and put this code there:

this.removeMovieClip();

This removes the MC so it isn’t needed anymore.

On the main timeline, insert this code:

i = 0
onEnterFrame = function(){
	i++;
	var effect:MovieClip = attachMovie(’effect’, ‘effect’+i,i);
	effect._x = _root._xmouse;
	effect._y = _root._ymouse;
	effect._rotation = Math.random()*360;
}

The variable ‘i’ is set to zero. This will be the basis for uniquely naming MCs and giving them a unique depth.

The ‘onEnterFrame’ function executes the code within it each frame.

‘i++’ means 1 is added onto ‘i’ each frame, so it will go from 1 to 2, 3, 4, etc.
Then we create and effect MC and the MC we made in the library is attached to it, with a unique depth and name of whatever ‘i’ is. With this MC, we set the x and y to the mouse’s position, and give it a random rotation. You can do whatever you want here.

Export your movie and see what you came up with! You can try out tons of effects, just experiment a little.