Creating a Destructable Asteroid (Starts Below)

1) Creating a Destructable Asteroid (Starts Below) 2) Animating the Asteroid 3) Add Missile / Asteroid Collision Detection

Shooting Objects Flash Tutorial Part 1) Create a Destructable Asteroid

Step 1.

For this tutorial, you'll need to download the image of a rock below, and then import (File > Import > Import to Stage) it into Flash.

Step 2.

We only need the rock temporarily on stage, so it doesn't matter which layer you import it on. Convert the rock into an MC (movieclip symbol) called 'asteroid'. Later on we'll be using actionscript to attach this MC from the library onto the stage. To make this possible, the MC needs to be given an 'identifier', to make Flash know that we want to do this and to also make it unique. You can give the MC an identifier by checking 'Export for Actionscript'. The identifier should automatically be named the same as the MC.

Step 3.

Go into the asteroid MC and then convert the rock image into another MC called 'rockMC'. You don't need to give it an identifer.

Step 4.

Now that the rock is contained in an MC, we can create some instances of it to form an asteroid. So first of all create a new layer called 'rock 2' and drag another copy of rockMc from the libray onto this layer. To make the asteroid appear more random, rotate the 2nd rockMc counter clockwise (modify > transform > rotate 90 CCW), as shown in image b)

a)   b)

Step 5.

Add another copy onto the layer 'rock 3', but this time rotate it clockwise (modify > transform > rotate 90 CW)

a)   b)

Step 6.
Add an 4th and final rockMc onto layer 'rock 4', this time rotating it counter clockwise again.
a)   b)
Shooting Objects Flash Tutorial Part 2) Animating the Asteroid Step 7. In the previous part we formed an asteroid, using 4 instances of the rockMc. In this 2nd part we're going to animat the rock destructing, which will be triggered when a missile from the ship hits it.   Step 8. Highlight frame 40, of all 4 layers, and then create a key frame (F6) for each of them.   Step 9. Zoom out to 50% and move each rock, on frame 40, away from its original position. The rockMc's will need to move outside of the screen area, so you may need to come back to this later, if they don't reach that far.   Step 10. Highligh a frame of all 4 layers, right click and choose 'Create Motion Tween'. The rocks should now move, as you move the timeline play head from left to right. Step 11. The rocks need to stay together, until the asteroid is hit, so we need to create a stop() action on frame 1. I've done so on a 5th layer called script. Step 12. When the asteroid is hit, the animation will play, but we need to create another stop() action at frame 40, so that it doesn't play again. We also need a way of knowing when the animation has reach frame 40, so restart variable is set to 'true'.     Shooting Objects Flash Tutorial   Part 3) Add Missile and Asteroid Collision Detection Step 13. So now that we've create the animated asteroid, go back to the main timeline and click on the 1st frame of the 'shot' layer, where we'll be building ont he existing code.   Step 14. Previously a moveBullets function had been created, which adds a bullet, when the space bar is pressed. Next we want to add some code for when bullets reached the top of the screen, or if it hits the asteroid. The moveBullets function is shown below, with the eisting code grey out. The code that hasn't been greyed out is new, and will be explained below. Line 25: Since the current bullet, in the array that's being looped through, is going to be referenced a number of times, it is assigned to the temporary variable 'b'. Line 26: The top of the screen is 0 on the Y axis. When the whole of the bullet is outside of the screen we want to remove, so an IF statement is used to check to see if the bullet is above the point (-50 Y) at which it should be removed. Line 28 - 30: If not (else) the bullet's MC is then removed from the stage and it's reference is removed from the array. Line 32: A variable is used for when we don't want to check if the bullet is hitting the asteroid. This will be when the asteroid has just been hit. Line 33: b (the current bullet in the loop) is checked to see if it hits ob, which will be the the instance name given to the asteroid later on. It's been named 'ob' because we may want to use different objects, instead of an asteroid, later on. Line 34: Now that the bullet has hit the asteroid, 'hit' is set to true, to stop it from being checked. Line 35: If 'b' hits 'ob', the asteroid animation will play, where all four rocks move away. Line 36 - 37: The bullet's MC is then removed from the stage and it's reference is removed from the array.   Step 15. Line 42: A hit variable to false, to stop and resume collision detection Line 43: A variable to set the speed of the object (asteroid). Line 44: A function to create an object, with the argument (o). When the function is called, the name of the MC's identifier ("asteroid") will be entered as the argument like so: createObject("asteroid"). Line 45: The asteroid will then be attached and assigned to the variable 'ob', so that we then reference it indepedent of what the object is. This will be useful for if a different object is used, since we will only have to change it when the function is called. Line 46: The asteroid needs to appear randomly on the x axis.   Step 16. Line 48: When the object ("asteroid") has reached the end of its exploding animation or when its moved to the bottom of the stage, it needs to be "reset", so a function is created to do this. Line 49-50 : The object is given a new random X position to start from and placed at -40 on the Y axis. Line 51-52 : When the asteroid has reached the end of the exploding animation, it's needs to go back to frame 1 so that's whole again. The restart function also needs to be set back to false, so that the resetObject function isn't called again. Line 53: Hit needs to be set back to false so that checking can resume, of the bullets hitting the asteroid.   Step 17. Line 55: Next a function is created to move the object (asteroid) Line 56-57: An IF statement is placed to check if the objects Y value is lower than 250 (the bottom of the stage). If is is then the object needs to be moved. Line 58-59: If it's not (else) then that's means it's reached beyond 250 and needs to be reset. Line 61-62: We also need to check if the asteroid has finished exploding, in which case the asteroid is reset.   Step 18   Line 65: Lastly, the object is created Line 67: And the moveObject function is added to the onEnterFrame function, so that it's checked all the time.     And that brings us to the end of this Flash tutorial. Download FLA