4+: Interactive Animations (Explosions)

This tutorial builds on Part 4 of the six-part tutorial series on building a Space Shooter. This tutorial simple adds an explosion effect when enemies are destroyed.

Prerequisites: Please complete Tutorial 4 first. For added smoke effect Tutorial 3+ will also need to have been completed.

I have borrowed ideas from an Adobe Illustrator tutorial to create the image but applied what I could to Flash Professional to create a nice cartoon explosion. The original tutorial is here: http://design.tutsplus.com/tutorials/quick-tip-how-to-create-a-cartoon-style-big-bang-explosion--vector-5223.

Following the tutorial, but applying it to Flash Professional, I start by creating three similar symbols named 'Exp-Red''Exp-Orange''Exp-Yellow'. Each has a circle with a different colour.

I create the shading using the 'Radial gradient' tool in the Color panel.

Create a new symbol called 'Kaboom' to make up our explosion image.

I created 5 layers, named in ascending order; 'reds', 'oranges', 'yellows', 'moons', 'flash'. On the 'reds' (bottom) layer I insert a number of 'Exp-Red' symbols and I use the 'Free Transform' tool to rotate and re-size them to the get an effect like the one below

On the layer above, 'oranges' I apply a similar effect by dragging 'Exp-Orange' symbols in and rotating/re-sizing as appropriate.

The third layer is for the yellow circles ('Exp-Yellow'). Same again so you get something like the following:

Create moon-crescent shapes by over-laying two different coloured ovals and deleting what I did not need. I then created duplicates and used free transform to manipulate. I placed all of these on their own 'moons' layer.

Finally I created the flash on the 'flash' layer. I used a slightly different technique as the tools use in the tutorial are available only in Illustrator. I created a poly-star using the 'Polygon' tool. I manipulated it by hand and curved edges just using drag-and-drop. I duplicated and re-sized to get a brighter inner star inside the darker and larger star.

Now create a new blank symbol called 'Explosion' and export for ActionScript using the same Class name (see below).

Below is a series of images that shows the full interface for the completed 'Explosion' symbol. Firstly drag the 'Kaboom' symbol in from the library, set its size to something smallish (e.g. 10 px) and centre it around the origin (x = 0, y = 0). See below:

Now make a Motion Tween 10 frames long (similar to what we have done previously in the series). At frame 8, enlarge the symbol (e.g. 80 px) and ensure the symbol is still centred around the origin (x = 0, y = 0). See below:

On the final (10th) frame of the Motion Tween scale the symbol back down (e.g. 10 px) and ensure the symbol is still centred around the origin (x = 0, y = 0). See below:

If you would like some smoke emit from the explosion you can add a second layer, 'Smoke', with a Keyframe inserted 8 frames in (preceded by blank frames).

For ease, I suggest re-using the same 'Fumes' symbol created in Tutorial 3+ though you may like to make a new smoke effect.

Assuming your using the same assets previously created, insert 4 instances of the 'Fumes' symbol and size them appropriately with rotations set so they emit outwards.

You can add more if you like (the image below shows a further 4 smaller instances of the same symbol).

Now insert a Blank Keyframe at the end of the smoke (which should be as long as the timeline on the 'Fumes' symbol, in my example this is 20 frames). Right-click on this frame and select 'Actions'.

Add the following ActionScript to stop the symbol looping back to the start and to remove the symbol from the stage at the end of one play-through.

 

If you have any issues with this line of code, you can simply make it invisible (using the commented out line). Hiding rather than removing symbols can cause lag as every explosion stays on stage even if they're not visible.

stop();
//this.visible = false;
this.parent.removeChild(this);

This completes the explosion effect, now we must create instances of it on-screen when required. For this we need to do some coding.

 

Now navigate to your MAIN GAME CODE.

In the 'bulletHitEnemy' function there is a hit test between the enemy and the player. Inside this IF statement we need to declare a new instance of 'Explosion', set its x-y coordinates, and place it on stage.

Place the code snippet below after the following opening if statement:

 

if (bullets_arr[b].hitTestObject(enemies_arr[e]))
{

// add explosion at enemy's position
var exp: Explosion = new Explosion;
exp.x = enemies_arr[e].x;
exp.y = enemies_arr[e].y;
stage.addChild(exp);

There is also a hit test between the enemy and the bullet in the 'enemyHitPlayer' function. Add an identical block of code here, following the if statement:

 

if (enemies_arr[e].hitTestObject(player_mc))
{

// add explosion at enemy's position
var exp: Explosion = new Explosion;
exp.x = enemies_arr[e].x;
exp.y = enemies_arr[e].y;
stage.addChild(exp);