Interactive Rocket

February 6, 2009 by: smonte

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 400×400.

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.

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Interactive Bubbles with ActionScript 3
  2. Physics with ActionScript 3
  3. Revealing an Image with ActionScript 3
  4. Random Boxes Text Effect with ActionScript 3
  5. ActionScript 3 Keyboard Events



Filed under: ActionScript 3 Advanced
Tags:

Comments

2 Responses to “Interactive Rocket”
  1. Jads says:

    This is an excellent tutorial, and it answered a lot of my questions on how the user can interact with the symbols. I know you wanted questions redirected to the forum, but i couldn’t find the matching thread. I was wondering, Is there a way to set a cap on the acceleration? If so, how is that done?

    Log in to Reply
  2. Pat says:

    Great tut. shows how to use the keys in 3.0 in a great easy way! thx

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.