What should the domain name be :/

To read the first tutorial in these series isn’t compulsory, but you could do that if you want.

• Part 1

I’ll start all over, with a new .fla file, mostly because thats simpler.

So. Create an ActionScript 3.0 .fla file. Good good. As far everything is just good.

Lets create 2 circle MovieClips by opening up the ActionScript panel (F9) and typing in this there:

var c1:MovieClip=new MovieClip();//Circle 1
var c1r:uint=new uint(30);//Circle 1 Radius
c1.graphics.beginFill(0xCCCCCC);//Fill color 
c1.graphics.drawEllipse(-c1r,-c1r,c1r*2,c1r*2);//Draws the circle
c1.x=275;
c1.y=200;
addChild(c1);
 
var c2:MovieClip=new MovieClip();//Circle 2
var c2r:uint=new uint(100);//Circle 2 Radius
c2.graphics.beginFill(0xCCFFCC);//Fillcolor
c2.graphics.drawEllipse(-c1r,-c1r,c1r*2,c1r*2);//Draws circle
c2.x=100;
c2.y=100;
addChild(c2);

Now this creates the circles, and places them on the stage.

Then we need the code for moving the other circle.
And its here:

var dx:int=new int();//Distance x
var dy:int=new int();//Distanve y
 
var len:Number=new Number();//Length
var df:Number=new Number();//Force off
 
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_move);
function mouse_move(event:MouseEvent):void {
 
 
	dx=c1.x-mouseX;//Distance x
	dy=c1.y-mouseY;//Dist. y
 
	len=Math.sqrt(dx*dx+dy*dy);//Length
 
	if (len<=(c1r+c2r)) {//if the length is shorter than the 2 added radiuses
		df=len-(c1r+c2r);//set the force to dist minus the 2 radiuses
		dx=dx/len*df;//Divide distance x with the length, this makes the dx a value of "1", and then multiplies with df, which makes it as long as its overlapping.
		dy=dy/len*df;//Same here.
	} else {//Else dx and dy is nothing
		dx=0;
		dy=0;
	}
 
	c2.x=mouseX+dx;//Sets the x pos of the circle to mouseX+ the x-distance thats left.
	c2.y=mouseY+dy;//Same with y-position
 
}

This code is almost the same, but with small differences. It doesn’t set the moving circles x, and y directly.

First it calculates the offset for it.
The code describes how it works, but not so fantastically. If you experiment with it a little and think a bit I think you could understand what happens with the code.

It should be like this anyways:

If you couldn’t get this to work click here for the source.

A follow up will be written, probably.

Hopefully you liked this tutorial. And if you did, I’m happy

Bye bye.

I’m making the flash file at the same time as I write this so there could be some errors in it. But I think I could.

First off. Open a ActionScript 3.0 .fla file. We’re not going to use classes in this tutorial, mostly because it’s simpler without them.

Then we could create a new circle movieClip by opening the code window by pressing F9.

And typing this in:

var circ1:MovieClip=new MovieClip();

Now we have a empty MovieClip there, we could position it to the middle:

circ1.x=275;
circ1.y=200;

And add it to the stage:

addChild(circ1);

But when you run this, it shows nothing. That’s because it’s just a empty movieClip. So lets add these lines to it:

var circle1r:uint=new uint(20);
circ1.graphics.beginFill(0xFF0000);
circ1.graphics.drawEllipse(-circle1r,-circle1r,circle1r*2,circle1r*2);
circ1.alpha=.5;

Now it has a fine looking circle. Its red and dandy. Yay.

But now lets see how we can see if something is colliding with it. Lets say that well see when the mouse pointer is colliding with it:

var vx:int=new int();//"velocity-x"
var vy:int=new int();//velocity-y
var len:int=new int();//Distance/Length
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_move);//Adds mouse event listener
function mouse_move(event:MouseEvent):void {//The function for it.
	vx=circ1.x-mouseX;//Calculates velocity x
	vy=circ1.y-mouseY;//Calculates velocity y
	len=Math.sqrt(vx*vx+vy*vy);//sees the length.
	if (len<circle1r) {//if the distance is shorter than the circles radius, its a hit.
		circ1.alpha=1;//Putting the alpha to full.
                trace("*Collission*");
	} else {//else not.
		circ1.alpha=.5;//half of the alpha.
	}
}

Now you can see that the detection is very precise. But at this moment, we can’t do much with it. So lets continue With a collision detection between 2 circles, and that’s not so much harder.

The other circle will be like this:

var circ2:MovieClip=new MovieClip();
var circle2r:uint=new uint(30);
circ2.graphics.beginFill(0x00FF00);
circ2.graphics.drawEllipse(-circle2r,-circle2r,circle2r*2,circle2r*2);
addChild(circ2);

Add this code directly after where circ1 ends.
We also need to change the code in the mouse_move function. Change the whole function to this:

function mouse_move(event:MouseEvent):void {//The function for it.
	circ2.x=mouseX;
	circ2.y=mouseY;
	vx=circ1.x-circ2.x;//Calculates velocity x
	vy=circ1.y-circ2.y;//Calculates velocity y
	len=Math.sqrt(vx*vx+vy*vy);//sees the length.
	if (len<circle1r+circle2r) {//if the distance is shorter than the circles radius plus the moving circles radius, its a hit.
		circ1.alpha=1;//Putting the alpha to full.
		trace("*Collission*");
	} else {//else not.
		circ1.alpha=.5;//half of the alpha.
	}
}

The only thing that’s changed in this code, is that the green circle is moved to the mouse pointer.
And that instead of creating a collision at circ1’s radius, it adds both circles radiuses, and then sees if the distance is below that value.
It’s really simple.

But if it wasn’t simple enough, and you didn’t get it to work, here’s the source for it.

A follow up to this will come soon. Probably.

So I’ll show how we could do a paint program that uses flash’s own bitmap methods.

First off, create a new ActionScript 3 .fla file, and save it directly as paint.fla somewhere on your computer where you can find it easily.
Then, create a ActionScript file (.as).

Then paste this code into it:

package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
	import flash.geom.Point;
 
	public class paint extends MovieClip {
		var paintStage:BitmapData=new BitmapData(550,400,false,0xFFFFFF);
		var paintDisplay:Bitmap=new Bitmap(paintStage);
		var drawing:Boolean=new Boolean(false);
 
		var vx:Number=new Number(0);
		var vy:Number=new Number(0);
		var len:uint=new uint;
		var i:uint=new uint();
 
		var p0:Point=new Point();
		var p1:Point=new Point();
 
		public function paint() {
			addChild(paintDisplay);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,md);
			stage.addEventListener(MouseEvent.MOUSE_UP,mu);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mm);
		}
		function md(event:MouseEvent) {
			drawing=true;
			p0.x=event.stageX;
			p0.y=event.stageY;
			p1.x=p0.x;
			p1.y=p0.y;
		}
		function mu(event:MouseEvent) {
			drawing=false;
		}
		function mm(event:MouseEvent) {
			if (drawing) {
				p1.x=event.stageX;
				p1.y=event.stageY;
				paintStage.setPixel(event.stageX,event.stageY,0x000000);
				vx=p1.x-p0.x;
				vy=p1.y-p0.y;
				len=Math.sqrt(vx*vx+vy*vy);
				vx/=len;
				vy/=len;
				for (i=0; i<len; i++) {
					paintStage.setPixel(p0.x+(vx*i),p0.y+(vy*i),0x000000);
				}
				p0.x=p1.x;
				p0.y=p1.y;
			}
		}
	}
}

Save it as paint.as in the same directory as the .fla is in. Then go back to the .fla, and open up its settings. The settings should be like this:

Then you can just test it out

You could see how the code works yourself. I don’t think anyone actually reads the description of the code anyways.

It should look like this:

Now the movie is a bit resized and it makes the line look broken, but when its in its original size it should be ok.

If you can’t get this to work, you can download the source here.

• Part 1
• Part 2

But it isn’t necessary to read them, but it could be easier to follow this tutorial if you did.

The stuff thats going to be added now is;

• Scores
• Health
• Levels

1. Scores

Adding scores is pretty easy, the only thing we need to do is to create a score MovieClip, and add some code.
But first of, we could create a text field that shows the score. Select the text tool, by pressing T or just clicking on the T symbol in flash, then just draw a text field to the upper corner of the stage. Adjust the properties of the text field so they look like this;

Now we have a fancy text field there. But still it can’t do nothing by itself. We need to add some code to the game.
First off, we need a variable that contains the value of the score, so add this line to the very beginning of the whole code;

var score:Number=new Number(0);

This creates a variable named score, and it may only contain a number, thats why the :Number is there. By declaring variables this way, you make your games slightly faster.

After this, we could add a function that updates the score text field.
A function is a block of code that could be run once by calling it, you’ll see how they work in this tutorial if you don’t really know what they are.

But, what you need to do is to add this:

function updateScore(){
	scoretxt.text="Score: "+score;
}

To the way bottom of all of the code.

This is just a simple function, and you can probably see what it does. It goes to the score text field, and accesses its text property, and then changes it to that text. But, if you try to run the game, you see that nothing has changed, yet. Thats because the function hasn’t been run.

To run this code, you need to call it as I wrote before.

updateScore();

If you add that row of code to the bottom of the whole code, and then run it, the score text field magically shows how many points you have :). Simple, simple.

Now we’ll add some coins or something else the jetpack guy could pick up. First off, draw that thing you want the jetpack man to pick up. I drew a great looking coin.

Then select the shape, right click on it, and click Convert to symbol…
The settings for it should look like this:

Lets add functionality to the coin now. If you have followed the previous tutorials, you should have a ground MC and man MC. If you don’t, you should go back to the other tutorials and follow them, or just download the sources if you’re lazy.

When you have those MC’s there, and the coin MC too, you should give the coin MC a instance name. Lets name it coin0, like this;

You do this by first selecting the coin movieclip, and then just look at the properties window for it.
While were on this, you can add some more coins, but, remember to name them coin1, coin2 and so on.
Oh, and to add these other coins, you can open the library, which should be located to the right of the screen, if it isn’t there just click window>Library. Then the library is there. Search for the coin in the library, and when you see it, just drag it from the library out to the stage.

When you’re with this, we’ll be adding some code to this. You need to open the code window were all the other code is, and then, we could create a neat function for checking if the jet pack man is colliding with one of the coins.
So, type in this after the other code:

var i:Number = new Number(0);
var dX:Number = new Number();
var dY:Number = new Number();
var len:Number = new Number();
function checkForCoins() {
	i = 0;
	while (_root["coin"+i] != undefined) {
		dX = _root["coin"+i]._x-fly._x;
		dY = _root["coin"+i]._y-(fly._y-fly._height/2);
		len = Math.sqrt(dX*dX+dY*dY);
		if (len<(fly._width/2+_root["coin"+i]._width/2)) {
			_root["coin"+i]._x = -1999;
			score++;
			updateScore();
		}
		i++;
	}
}

This code actually checks for collisions with the man and coins, completely without any hitTesting. Thats neat, isn’t it? :).
Oh, and to make this code work, you need to add this code:

	checkForCoins();

After this line:

fly.onEnterFrame = function() {

Now you have some coins you can pick up.

But if it doesn’t work, just download the source thats located at the bottom of this page.

2. Health

The second thing now is to add a health system or something like that.
I’m going to explain fast how to do this.
Draw a health bar next to the score text field. Select it, right click and Convert to symbol…
Then the properties for it should be like this:

Give it the instance name of healthbar.

Then, we could add spikes it could hurt itself on. Draw some spikes on the ground somewhere.

Select the spikes, and convert it into a MC.

Give it the instance name spikes.
Now we have spikes. Lets add a health variable and a health function.

Add these lines to the beginning of all the code;

var health:Number=new Number(100);
var maxhealth:Number=new Number(100);

Now we have a max health and health variable. Thats good:)

Well, lets add a function that updates the health bar. Add this to the end of all the code:

function updateHealth(){
	healthbar._xscale=health/maxhealth*100;
}

We need to see if the jet pack man is colliding with the spikes, so add this code into the onEnterFrame block, after checkForCoins();

if(spikes.hitTest(this._x,this._y,true)||spikes.hitTest(this._x-(this._width/2),this._y-(this._height/2),true)||spikes.hitTest(this._x+(this._width/2),this._y-(this._height/2),true)){
		health-=1;
		updateHealth();
	}

This piece of code just looks if the jet pack man is colliding with the spikes, and if it is, it takes away a bit of the health, and calls updateHealth();.
We could add a game over-screen to it too. While you are at the main stage, press F7, or click insert>Timeline>blank keyframe. Then the stage should be… blank. Whilst having the frame selected, open the properties window, and type in gameover into the frame name window:

After that, open the actions window there, and type in

stop();
btn.onRelease=function(){
gotoAndStop("game");
}

into it.
Now we need a play again button. Draw one:

Select it, right click, and then edit the settings so its like this:

Give it the instance name btn.

Now, on the main timeline, click on frame 1 to go back to the game. When you have the whole frame selected, open the properties window, and type in game into the instance name window:

Then, open up the code window again, and type in this on to the first row

stop();

And then, scroll down to the updateHealth-function. And into that, after

healthbar._xscale=health/maxhealth*100;

type in this

if(health<0){
gotoAndStop("gameover");
}

Now it has a simple life system too. Yay.

3. Levels
How could we add levels?
I will fix this soon.

Source for Jetpack game Part 3 - levels not working.
There’s the source ayways.

If you need a tutorial for something but haven’t found one you could just send a message to me via email or just comment on this post.

Email: geekku [@] gmail.com

Bye

Part 1 can be found here.

Anyways, now we have the tile engine. Now we need to add a character that we can control. Just draw a square that’s 20×20 pixels. Press V and select the square. Then click on Modify>Convert to symbol… or press F8 if you’re using CS3. Then you should do it like this:

When youre done with that, press OK. Now you can press “delete” to remove the “char” MovieClip from the stage. Now you need some code. Press F9 or click on Window>Actions And type in this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

var map:Array = new Array(
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1], 
[1, 1, 1, 0, 0, 0, 1, 1, 1, 1], 
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 1, 1, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 1, 0, 0, 0, 1], 
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
var mapW:Number = 10;//The maps width
var mapH:Number = 10;//The maps height
var tileSize:Number = 20;//The size of the square tiles in pixels
var tileCount:Number = 0;//The tile count
var y:Number = 0;//y used in the loop
var x:Number = 0;//x used in the other loop
for (y=0; y<mapH; y++) {//Creating a loop that controls "y"
	for (x=0; x<mapW; x++) {
		if (map[y][x] == 1) {
			attachMovie("1","tile"+tileCount,10+tileCount,{_x:tileSize*x, _y:tileSize*y});
			tileCount++;
		}
	}
}
attachMovie("char","char",2,{_x:50, _y:30});//Attaches the Char movieclip
char.onEnterFrame = function() {//this executes every frame
	if (Key.isDown(37)) {//If left arrow key is pressed...
		if (!calcX(this, -1)) {//If theres not a block to the left
			this._x -= 20;//Substract 20 from char._x
		}
	}else if(Key.isDown(39)) {//If right arrow key is pressed...
		if (!calcX(this, +1)) {//If theres not a block to the right
			this._x += 20;//add 20 to char._x
		}
	}else if (Key.isDown(38)) {//If up arrow key is pressed...
		if (!calcY(this, -1)) {//If theres not above
			this._y -= 20;//Substract 20 from char._y
		}
	}else if(Key.isDown(40)) {//If left arrow key is pressed...
		if (!calcY(this, +1)) {//If theres not a block to the left
			this._y += 20;//add 20 to char._y
		}
	}
};
 
function calcX(target:MovieClip, offset:Number):Boolean {
	var xPos = Math.round(target._x/20)-1;//calculates it into a smaller amount that fits into the 20x20 pixel "grid"
	var yPos = Math.round(target._y/20)-1;//same here
	trace("Xpos:"+xPos+" and Ypos:"+yPos);
	if (map[yPos][xPos+offset] != 1) {//Checks the map array, and does not hittest anything.
		return (false);//if theres no block there, it returns "false"
	} else {
		return (true);//else this happens
	}
}
function calcY(target:MovieClip, offset:Number):Boolean {
	var xPos = Math.round(target._x/20)-1;//calculates it into a smaller amount that fits into the 20x20 pixel "grid"
	var yPos = Math.round(target._y/20)-1;//same here
	trace("Xpos:"+xPos+" and Ypos:"+yPos);
	if (map[yPos+offset][xPos] != 1) {//Checks the map array, and does not hittest anything.
		return (false);//if theres no block there, it returns "false"
	} else {
		return (true);//Else this happens
	}
}

This is the whole code for the application, and has the stuff from part 1 in it, so you know.
When you’ve typed in that, you can test it out by pressing ctrl+enter. It should look like this:

You can steer the red square with the arrow keys. Thats pretty neat. And it doesn’t use any hitTesting, which is pretty cool. But, if you can’t get it to work, take this source: Source.
Thats all for now. Oh, and the code is commented with some help if you don’t understand how it works, and it traces the position of the char which you could take a closer look at.

But, well, cya sometime again. Ill try to invent some other ways to use the tile engine with.

And only so you know, I’m not either super good at making tile stuff, but I’ll show you what I can.
So lets go.

The easiest way to create a world is to make a 2-dimensional array. To create a array thats 10×10 tiles big, you do like this:

1
2
3
4
5
6
7
8
9
10
11

var map:Array= new Array(
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0]);

there’s the array. To access a specific place you need to type in the x- and y-place for the array;
trace(map[0][0]);
But, a vital this is that the y-pos if first and not the x-pos, when you see it that way, because the first number (map[0][0]) accesses the line number, and the second accesses a specific item in the line. So if you type in
trace(map[0]);
it’ll show the full line.

Enough with that. Now we have a array, what you need to do next is to create the tile.
You need to draw a 20×20 pixel square with no outlines, when you did that, press v and select the square. Then press F8 or click Modify>Convert to symbol, and type in the following stuff:

Make sure that its exactly as it is on the picture, else it will not work correctly.

Then, go to the actions panel by pressing F9 or clicking Window>Actions.
Enter this code after the map array:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var mapW:Number = 10;//The maps width
var mapH:Number = 10;//The maps height
var tileSize:Number = 20;//The size of the square tiles in pixels
var tileCount:Number = 0;//The tile count
var y:Number = 0;//y used in the loop
var x:Number = 0;//x used in the other loop
for (y=0; y<mapH; y++) {//Creating a loop that controls "y"
	for (x=0; x<mapW; x++) {
		if (map[y][x] == 1) {
			attachMovie("1","tile"+tileCount,10+tileCount,{_x:tileSize*x, _y:tileSize*y});
			tileCount++;
		}
	}
}

Now test the movie, but nothing happens. The thing you need to do is to change some of the zeros in the array into ones. Overwrite the map array with this:

1
2
3
4
5
6
7
8
9
10
11

var map:Array= new Array(
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,1,1,0,0,0,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,1,1,1,0,0,0,1],
[1,0,0,0,0,1,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1]);

And now test your movie. If you did everything right, you should have ended up with something like this:


The code is pretty easy to understand and I’ve commented it with useless comments, but maybe they help. If you cant somehow get it to work, take this source and look carefully what you did wrong before posting comments. Here’s the source.

Thanks for reading this tutorial. I will post more tutorials for this to show in what ways you can use the tile stuff.

Well, see you then:)

Click on the in-text ads to support me with a small amount of money