Space Rocket with Actionscript 3


In this tutorial, I will show you how to create a space rocket with a trail effect. All the animation is done via Actionscript 3 of course!

Setting up the environment

1. Create a new document of size 400x400.

2. Draw a space rocket that points to the right. Don't pay attention to how it looks, since this is not a tutorial on drawing. Just draw something that you might imagine to be a rocket.

3. Convert your rocket into a movie clip. Set the registration point to the center. Name it however you want.

4. Give the rocket an instance name of "rocket".

Moving into Actionscript

5. Create an actions layer and type the following. 

//These variables tell us which button is down
var leftArrow:Boolean = false;
var rightArrow:Boolean = false;
var upArrow:Boolean = false;

//rotationSpeed defines how fast the rocket rotates
var rotationSpeed:Number = 10;

//accelaration defines how fast we accelerate the ship
var acceleration:Number = 0.5;

//Ship x and y speed
var xSpeed:Number = 0;
var ySpeed:Number = 0;

//Add ENTER_FRAME that moves the ship
addEventListener (Event.ENTER_FRAME,moveRocket);

//Listen for the key presses
stage.addEventListener (KeyboardEvent.KEY_DOWN,keyDownHandler);
stage.addEventListener (KeyboardEvent.KEY_UP,keyUpHandler);

function moveRocket (e:Event):void {
	
	//First we rotate the ship
	if(rightArrow) {
		rocket.rotation += rotationSpeed;
	}
	if(leftArrow) {
		rocket.rotation -= rotationSpeed;
	}
	
	//If the user presses the up arrow, the following gets executed
	if(upArrow) {
		
		//Increase the x and y speeds
		xSpeed += Math.cos(Math.PI*rocket.rotation/180)*acceleration;
		ySpeed += Math.sin(Math.PI*rocket.rotation/180)*acceleration;
		
		//Create a fire when we acce
		var fire:MovieClip = new MovieClip();
		
		//Draw the fire
		drawFire(fire);
		
		//Create a new fire at the end of the rocket
		fire.x = rocket.x - Math.cos(Math.PI*rocket.rotation/180)
				* (rocket.width / 2);
		fire.y = rocket.y - Math.sin(Math.PI*rocket.rotation/180)
				* (rocket.height / 2);
		
		//Add the fire to the stage
		addChildAt(fire,0);
		
		fire.addEventListener(Event.ENTER_FRAME, animateFire);
	}
	
	//Assign the new x and y position for the rocket
	rocket.x +=  xSpeed;
	rocket.y +=  ySpeed;
	
	//Make the rocket appear on the other side if it's out of bounds
	if (rocket.x > stage.stageWidth) {
		rocket.x = 0;
	}
	else if (rocket.x < 0) {
		rocket.x = stage.stageWidth;
	}
	if (rocket.y > stage.stageHeight) {
		rocket.y = 0;
	}
	if (rocket.y < 0) {
		rocket.y = stage.stageHeight;
	}
	
}

//This is called when a user presses a key
function keyDownHandler (e:KeyboardEvent):void {
	
	//Left arrow clicked
	if (e.keyCode == 37) {
		leftArrow = true;
	}
	
	//Right arrow clicked
	else if (e.keyCode == 39) {
		rightArrow = true;
	}
	
	//Up arrow clicked
	else if (e.keyCode == 38) {
		upArrow = true;
	}
}

//This is called when a user releases a key
function keyUpHandler (e:KeyboardEvent):void {
	
	//Left arrow up
	if (e.keyCode == 37) {
		leftArrow = false;
	}
	
	//Right arrow up
	else if (e.keyCode == 39) {
		rightArrow = false;
	}
	
	//Up arrow up
	else if (e.keyCode == 38) {
		upArrow = false;
	}
}

//This funtion draws a red ball
function drawFire (mc:MovieClip):void {
	
	//Give a random color for the circle
	mc.graphics.beginFill (0xff0000);
	
	//Draw the cirlce
	mc.graphics.drawCircle (0, 0, 10);
	
	//End the filling
	mc.graphics.endFill ();
}

//This function fades the fire in each frame
function animateFire(e:Event):void {
	
	//In each frame, reduce the alpha and the scale of the trail ball.
	e.target.alpha -= 0.04;
	e.target.scaleY -= 0.04;
	e.target.scaleX -= 0.04;
	
	//Remove the fire if the alpha is less than zero
	if(e.target.alpha<0) {
		e.target.removeEventListener(Event.ENTER_FRAME, animateFire);
		removeChild((MovieClip)(e.target));
	}
}

You are done, test your movie! I hope you enjoyed this tutorial and learned something from it. If you have any questions concerning this tutorial, please visit the forum.

Bookmark and Share