Interactive Rocket
February 6, 2009 by: smonteIn 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.
Related tutorials:
Comments
2 Responses to “Interactive Rocket”Leave a Reply
You must be logged in to post a comment.
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?
Great tut. shows how to use the keys in 3.0 in a great easy way! thx