Free flash tutorials -- Asteroids movement and fire

Quick Game Select

Free Site Content

Community

Latest 10 Flash games

Pixel Purge

Shoot evil pixels and bring peace back to the land

Light up 2

Remove certain light bulbs to make others light up

Border Services

Drive a truck of illegals over the border

Car Chaos

An avoider game where you try ti prevent cars from crashing

HAWX 2

Reincarnation Let the Evil times Roll

Help the demon to collect the soul and bring him back to hell

Clash of the Olympians

Throw barrels and other objects at invaders to defend the temple

Harmony Keeper

Smiley Showdown

Myth Wars

Recruit undead soldiers to destroy the enemy

Top Rated(5+ votes)

Roll On(5/5)

Desert Rally(5/5)

Microlife(5/5)

Crunchball 3000(5/5)

Bubblez(5/5)

Blueball 2(5/5)

Spectrum Genesis(5/5)

Fuzzy McFluffenstein 3(5/5)

MonsterDen: Book of the dead(5/5)

Mario Combat Deluxe(5/5)

Youda baby blimp(5/5)

Aeternus Lamnia Duo(5/5)

Lastest 12 toons

Tutorial Categories

Game tutorials(14)

Web Design(5)

Last 5 Tutorials

Asteroid holes with gradients

Gravitation pull/Circular collisions

Pong tutorial

Basic shooting game

Turret aiming and fire

Asteroids movement and fire

Inertia and directional movement and fire

Enemy movement and Fire

Ship Movement and fire

Moving starfield background

This tutorial is aimed at teaching you how to make an object(spaceship) move with turning, acceleration, de-acceleration, and fire like in the original asteroids game. This tutorial is written in flash MX 2004(flash 7) so if you have a lower version, you may have trouble opening the source files. You can grab the source file Here and follow along. The final product will be something like this(I know the shots aren't coming exactly straight but you can adjust the rotation yourself):

Left and right to turn, up to accelerate, space to fire.

So lets begin with a blank 550*400 document on a black background. Lets draw a white triangle on it to represent our spaceship(a triangle with two even sides works best). After you've drawn the triangle, select it and do Modify-->Convert to symbol . Convert it into a movie clip with the name ship. After that, select the ship symbol you just created, expand the properties menu and in the name text box, call it ship there also.

Select the ship again and right-click and hit edit, this will bring you to the edit mode of that individual clip. There is a crosshair on the screen in this mode. That is your focus for this clip. You'll want your ship pointing straight right with the tip of the triangle on that focus. This gives our ship an initial rotation of zero(which we want for the purposes of this tutorial).

Now we want to draw a bullet, so just draw a white dot, convert it to a movieclip and name it "shot" both in the initial naming of the clip and in the name text box under properties.

Now that we have both our shot and our bullet, its time to write some code. We will first look at the code for the ship movement.

Code:




onClipEvent(load)


{


	decay=.97;


	xspeed=0;


	yspeed=0;


	maxspeed=17;


	minspeed=-17;


	this.shotcount=1;


}

This is what happens when the ship MovieClip first loads. The decay variable is the slowdown rate if you are not pressing up. A value of 1 means no slowdown where a value of 0 means instant stop. I have it set at .97 which means if you are not accelerating, you are going at 97% of the speed you went at in the last frame. x and y speed are initially set to zero so the ship has an initial speed of zero when it first loads. Maxspeed and minspeed are the maximum speeds(positive and negative indicate direction) that your ship can move at. We generally want to limit these so your ship will not become a white blur going across the screen because it is moving too fast.

Now lets look at the enterFrame code for movement only:

Code:




onClipEvent(enterFrame)


{


	


	rads = Math.PI / 180;


	vx = Math.sin((this._rotation+90) * rads);


	vy = -Math.cos((this._rotation+90) * rads);


	this._x+=xspeed;


	this._y+=yspeed;


	if(Key.isDown(Key.LEFT))


	{


		this._rotation-=15;


	}


	if(Key.isDown(Key.RIGHT))


	{


		this._rotation+=15;


	}


	if(Key.isDown(Key.UP))


	{


		if(xspeedminspeed)


		{


			xspeed+=vx;


		}


		if(yspeedminspeed)


		{


			yspeed+=vy;


		}


	}


	else


	{


		xpseed*=decay;


		yspeed*=decay;


	}


        if(this._x<0)


	{


		this._x=550;


	}


	if(this._x>550)


	{


		this._x=0;


	}


	if(this._y>400)


	{


		this._y=400;


	}


	


	


}

The first line is a conversion constant we will use to convert degrees into radians which we need to use for directional movement and turning. The variable this._rotation is the number of degrees the ship has turned. For movement, the crosshair should be at the center of the ship move clip, but since we turned it right for firing purposes, we need an offset of 90 degrees for it to accelerate in the right direction. To vectorize the degree of turn in vx and vy, we must convert degrees into radians and take the appropriate sin and cos to get the appropriate values for the x vector and the y vector. The x and y vectors are the acceleration values when we push up. If you want to increase or decrease the acceleration, you would put a multplier in front of vx and vy. Next on each successive enterFrame, we want to increment the x position of our ship by the xspeed and the y position of our ship by the yspeed.

The next lines tell us that if left or right is pressed, the ship increases or decreases its rotation value, turning it right or left.

If up is pushed we increase the xspeed and yspeed by vx and vy as long as xspeed and yspeed are within our defined bounds of maxspeed and minspeed.

The next else statement is simply the case where up is not being pressed(we are not accelerating). If that is the case then we decrease the xspeed and yspeed by our defined decay value.

The last lines are what happens if our ship moves off screen. What this does is if the x-coordinate is less than 0, it sets at x at 550 and vise versa. It does the same for y. What this does is basically make your ship appear at the opposite side of the screen if it goes off the screen -- just like in the original asteroids.

Now since we have movement out of the way, lets look at firing a bullet. To do this, first we will need to add this code in the enterFrame event of our ship movieClip:

Code:




if(Key.isDown(Key.SPACE))


	{


		_root.shot.duplicateMovieClip("shots"+this.shotcount,this.shotcount+1000)


		this.shotcount++;


		if(this.shotcount>100)


		{


			this.shotcount=1;


		}


	}

This says if space is pressed, it duplicates our shot movieclip and gives it the name of shots + shotcount . Shotcount is a value we defined in the load event of ship to keep track of the number of shots for naming and depths purposes. We increment shotcount each time a shot is fired so we will never have two shots with the same name or same depth.

Now we need actual code in the shot movieClip to make the bullet move. So select your shot movie clip and type this in the actions code box:

Code:




onClipEvent(load)


{


   if(this._name=="shot")


   {


	this._visible=false;


   }


   else


   {


	this._visible=true;


   }


   this._x=_root["ship"]._x;


   this._y=_root["ship"]._y;


   _root["ship"].rotationRadian=_root["ship"]._rotation*Math.PI/180;


   this.xspeed=7*Math.cos(_root["ship"].rotationRadian);


   this.yspeed=7*Math.sin(_root["ship"].rotationRadian);


	


}


onClipEvent(enterFrame)


{


    this._x+=this.xspeed;


    this._y+=this.yspeed;


    if(this._x>550 || this._x<0 || this._y>400 || this._y<0)


    {


	this.removeMovieClip();


    }





		


}

So this code says when the Movie Clip loads it checks to see if the name of the clip is "shot" or not. What this does is it makes our original shot invisible. This is good because we don't want a random shot streaming out of nowhere when we first start. Then is sets the initial x and y coordinates of the shot to the x and y coordinates of the ship. Then is sets the direction of the shot using the same degree to radian method as we used in the ship. It uses the _rotation value of our ship as a reference point since we want our shots to follow in the direction our ship is rotated at. We set the x and y speed at seven times the rotation vector of our ship.

In the enterFrame event, we increment the x and y positions of the shot by the xspeed and y speed. The last line simply says to remove the shot if it goes off the screen.

Note: For this tutorial to work right, your ship must be directly pointed right, otherwise you will have to adjust the trigonometry to work for you.

Thats it! Questions or comments, please post in This thread .

Hot Flash Games

Flanders Killer