If you like using MovieClips to animate your artwork in flash then this is a great method for doing it. Not only for Flash Games but for any project in which you have an object that needs to undergo different animations based on conditions. However, this will work perfectly for our Flash Game. So this time in the series we are going to make our Stinger Ship EXPLODE when it gets hit by a bullet.

This is the eighth article in AS3 Flash Games for Beginners. If you would like to follow this tutorial from the beginning please return to the first article here. If you choose to start this tutorial from here, you’ll need to latest source code that you can download here.

Step 1: Making Our Explosion Animation

This series really isn’t about artwork, that’s why most of the tutorials to this point have very briefly discussed methods of doing graphics. That’s why our explosion will be a simple one, graphically pleasing but nothing extravagant. So here’s what we are going to do. Open your stinger MovieClip from the library and goto your timeline.  You should have all your ships graphics on a set of layers and one layer should have your hitBox that we created in the last tutorial. Select all your layers except the one with the hitBox by going to frame 15 and clicking and dragging vertically over them. It should just highlight the frames on frame 15. Like the below image:

My Stinger Ship uses four layers for the graphics and one for the hitBox. I simply dragged over the 15th frame of each layer.

Now just right click on one of the blue frames and select “Insert Keyframe”. It should insert keyframes for each of the four layers.  Now goto your hitBox layer and right click on frame 15 and select “Insert Frame”. The different between a frame and keyframe is simple. A frame will maintain the same appearance as the last keyframe. A keyframe can be altered and will not effect the previous or next keyframe. The only exception is when tweening. Tweening occurs between two keyframes. During tweening Flash will attempt to make the differences between two keyframes be a fluid motion transition.

Alright now that we have keyframes on the 1st and 15th frames, let’s do something with them.  On the 15th frame I took my ship and broke it into about 6 pieces all scattering out in a circle.

Shot of Ship being exploded from frame 1 to frame 15.

The more pieces you break your ship into the better it will look; however, too many may just look hectic. Go for about 7 - 13 and space them out randomly. Ultimately use your own creativity and do what looks best.

Now right click on a gray dotless frame between frame 1 and 15, frame 7 seems fine. Click “Create Shape Tween” and the gray should turn green with an arrow linking the two keyframes.Do this for all your graphic layers.

A Shape Tween between two keyframes.

Nice now if you move your timeline scrubber across the frames you’ll see the pieces explode out. Do one more thing… let’s alter the easing of our shape tween.

So click a frame along the arrow(Seven again is fine) then  go to our Properties Window (CTRL+F3) and find Ease. Set your easing to -100. This will cause the tween to move slow at first and speed up over time.

One more thing with the explosion.  Go to frame 10 and “insert keyframe” on each of the ship graphic layers.  Now jump to frame 15 and select all the ship parts. Goto the Color Window (SHIFT+F9) and set the color to a 0 alpha so it will disappear.

Okay, okay… one more thing. Let’s create a new layer under all the other layers and draw a small circle on a new keyframe at frame 2 (about the size of our ship). Fill it with a radial gradient, white to yellow.  Make the white alpha be 100 and the yellow alpha be 0. While this will make the yellow invisible the transition from white to transparent will still have some yellow tint to it. Now goto frame 10 and insert a new keyframe and make the circle 3 to 4 times bigger… create a shape tween. Goto frame 15 and insert a new frame then shrink our circle to it’s about gone… shape tween it.  Great now we have a small explosion to go with our flying parts.

Here’s how my timeline now looks:

My Timeline with named layers... It's good practice to name your layers, I don't because I'm lazy. Don't be like me. Real men name layers.

Our SWF:

Step 2: Creating Frame Labels

Okay… this is going to be the shortest step ever. Create a new layer in your timeline and name it labels. Now create a new keyframe on our second frame and our fifteenth frame.  Select the first frame, goto your Properties Window (CTRL+F3), and put “default” in the Frame textbox. Like below:

Add default to your frame textbox... this is your frame label. You'll see a red flag appear in your timeline once complete.

Now on frame 2 name it “destroyed” and on frame 15 name it “destroyedComplete”. It should look something like this:

Our Timeline with Labels :)

Step 3: Using Frame Labels in ActionScript 3

If you have used ActionScript before, gotoAndPlay should be very familar. If not, you’re about to learn about it. It’s simple, gotoAndPlay() is a function of MovieClip’s that let’s you jump to a certain frame and play it. There’s also gotoAndStop which does the same thing except after the jump it stops. What you may not know is that if you put the name of a frame label in gotoAndPlay() it will jump to that frame label and start playing. So if we call gotoAndPlay(”destroyed”) on our Stinger class, it’s going to start playing our destroyed animation. So load up Stinger.as… and let’s alter some code: (I’ve commented the changes)

package com.asgamer.basics1
{
 
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
 
	public class Stinger extends MovieClip
	{
 
		private var stageRef:Stage;
		private var vy:Number = 4;
		private var ay:Number = .2;
		private var target:Ship;
 
		public function Stinger(stageRef:Stage, target:Ship) : void
		{
			stop(); //We need to prevent our ship from animating when it loads
			this.stageRef = stageRef;
			this.target = target;
 
			x = Math.random() * stageRef.stageWidth;
			y = -5;
 
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		private function loop(e:Event) : void
		{
			if (currentLabel != "destroyed") //ship isn't be destroyed
			{
				vy += ay;
				y += vy;
 
				if (y > stageRef.stageHeight)
					removeSelf();
 
				if (y - 15 < target.y && y + 15 > target.y)
					fireWeapon();
			}	
 
			if (currentLabel == "destroyedComplete") //ship is destroyed
				removeSelf();
		}
 
		private function fireWeapon() : void
		{
			stageRef.addChild(new StingerBullet(stageRef, target, x, y, -8));
			stageRef.addChild(new StingerBullet(stageRef, target, x, y, 8));
		}
 
		private function removeSelf() : void {
 
			removeEventListener(Event.ENTER_FRAME, loop);
 
			if (stageRef.contains(this))
				stageRef.removeChild(this);
 
		}
 
		public function takeHit() : void
		{
			if (currentLabel != "destroyed" && currentLabel != "destroyedComplete") { //make sure out ship isn't destroyed
				rotation = Math.random() * 360; //make the parts seem to fly in random directions
				gotoAndPlay("destroyed"); //start playing at our destroyed frame
			}
		}
 
	}
 
}

The breakdown:

• stop(); This is crucial… our ship will animate by default. So we have to stop it when it is created so it doesn’t.
• if (currentLabel != “destroyed”). For us this will return true from frames 2 to 14 because those frames are associated with the destroyed label.  We wrap this around everything that was in our loop function. That way if something happens and currentLabel is destroyed our ship will no longer move or fire bullets
• if (currentLabel == “destroyedComplete”) So if we get to the 15th frame… our label is  “destroyedComplete” so it’s time to get rid of our ship. We kill it by calling removeSelf, the function we made a few tutorials back.
• our takeHit function used to call removeSelf… now we’ve added something different.
• if (currentLabel != “destroyed” && currentLabel != “destroyedComplete”). Here we just insure that our ship isn’t already being destroyed. If we leave this out and continue shooting our ship it will keeping exploding over and over.
  (Thanks to Michiel for pointing this out)
• rotation = Math.random() * 360; Just rotates our ship to a random direction so the parts break in different directions
• gotoAndPlay(”destroyed”); Here we tell our Stinger MovieClip to goto the frame labeled destroyed and start playing.

Ready to compile this thing? Let’s do it:

Sweet. Now hit a few enemies and blow them up.

If you want, add some animations to when your ship get’s hit. It’s good practice.

Until next time here’s my final zip archive: Using Frame Labels and Art Tweening Zip Archive

Tags: ActionScript, animation, as3, Basics, Beginners, currentFrame, Enemies, explosion, gotoAndPlay, Tutorial

This entry was posted on Wednesday, February 18th, 2009 at 3:16 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.