Tutorials

February 18, 2009

AS3 Flash Games for Beginners: Using Frame Labels and Art Tweening

basics4_tn

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

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.

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.

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.

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.

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.

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:

basics1_8step2-2

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

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




29 Comments


  1. very good tutorial, and easy to understand.
    the only thing i missing is informations, like lives, score ect.
    but for the beginning, not bad ;)
    thumbs up!


  2. BugSlayer

    Nice, but I see when a stinger explodes it is possible to shoot it again and the ship will explode again. Other than that, nice tutorial, as always.


  3. Par

    Yeah I know mate, I screwed that up.

    I show you how to fix it in a later tutorial.


  4. Ryan

    hey love the sight!

    i was practicing my code so i added another class of enemies that have a similar explosion annimation, but even though i added the if statements the second class still lets me shoot them three or four times after the first shot. Can you think of anything that i might be doing incorrectly?


  5. Ryan

    I figured it out…I had a timer event that was interfering with my animation.

    Thanks again for the tutorials.


  6. meet

    Hello everyone,
    Can anyone help me inf inding out why am I getting the below error in LaserBlue class’s loop() function.

    TypeError: Error #2007: Parameter hitTestObject must be non-null.
    at flash.display::DisplayObject/flash.display:DisplayObject::_hitTest()
    at flash.display::DisplayObject/hitTestObject()
    at com.asgamer.basics1::LaserBlue/::loop()

    Thanks


  7. SAMM_47

    if you keep shooting the ship it keeps blowing up, but looks awesome


  8. Sepiantum

    yeah, i keep on getting the type error thingy:

    TypeError: Error #2007: Parameter hitTestObject must be non-null.
    at flash.display::DisplayObject/flash.display:DisplayObject::_hitTest()
    at flash.display::DisplayObject/hitTestObject()
    at com.asgamer.basics1::LaserBlue/::loop()

    i’ve b een pullin my hair out trying to find the problem. i’ve tried like 20 possible solutions but i can’t figure it out. all i know is that something in wrong with the takeHit() function


  9. woaiyumi

    Hey,
    Thanks for the awesome tutorial!!!
    For some reason, my version of this game is running very slowly,
    especially when the number of stars is above 20.
    The version on this page runs much faster on the same machine.
    Any ideas why?

    Thanks!


  10. Meet and Sepiantum : I had the same error, then realized it must be saying Null because the hitbox goes away. I figured this out because I noticed that the error only happens after you shoot the ship as it’s being destroyed. To get rid of the error, you have to make sure teh hitbox keyframes extend to the end of the animation. However, this introduces the bug as said above where you can keep destroying the same ship over and over – it replays the destroyed animation. I haven’t read the last tutorial yet so I dunno how to fix it but I’m off to read it now!

    Thanks for the tuts!


  11. I’m getting the same error

    TypeError: Error #2007: Parameter hitTestObject must be non-null.
    at flash.display::DisplayObject/flash.display:DisplayObject::_hitTest()
    at flash.display::DisplayObject/hitTestObject()
    at com.asgamer.basics1::LaserBlue/::loop()

    I noticed this happens either when I shoot multiply enemies, or if I get hit and end up blowing up an enemy at the same time. In addition is slows down the animation.


  12. Ammiel Joseph F. Garrido

    it seems whenever i add the gotoAndPlay(”destroyed”); code i get the error TypeError: Error #2007: Parameter hitTestObject must be non-null.
    at flash.display::DisplayObject/_hitTest()
    at flash.display::DisplayObject/hitTestObject()
    at bullet/loop()

    but if i remove the gotoandplay the error doesn’t please help me regarding this situation


  13. I like it, at this point in the tut the game is starting to take some serious shape.

    I’m having one problem, and I’m still researching to see how to fix it. My “stingers” are animated with a rocket thrust on the back. But when I put the stop(); line in it stops this animation. So I’m currently trying to figure out how to make this animation play until the ship takes a hit. As soon as I figure out how to solve this I’ll come back and post something.


  14. bruce

    hi really gud tutorial! cn any1 tell me where 2 get more info on making the shape tweening cuz mine look sreally bad.. also i red about shape hints bt it dusnt help at all.. thx


  15. ath77

    For those getting error 2007, even mike answered that in a post, the author of the tutorial says in Step 1: “Now goto your hitBox layer and right click on frame 15 and select “Insert Frame”.” You probably forgot to add it.

    The best beginner’s AS3 game tutorial ever.


  16. Fatty-Boi

    Mine is working, but with two issues:

    1. The stinger from the 2nd frame is displayed, whereas I expected the STOP command to cause the stinger from the 1st frame to appear. The stinger from the 2nd frame has started disintegrating, so it doesn’t look intact.

    2. When a Stinger enters the stage, everything goes jumpy, in slow motion. As soon as all stinger’s are gone, it speeds up again. Wah!

    Any suggestions?


  17. toddor

    TypeError: Error #2007: Parameter hitTestObject must be non-null.
    at flash.display::DisplayObject/_hitTest()
    at flash.display::DisplayObject/hitTestObject()
    at bullet/loop()

    If you get this error it means you just forgot to extend the hitArea layer to frame 15


  18. shak-a-tak

    would it be possible to show a version of this tutorial with you being able to die? maybe even give us hit points or lives.


  19. EvulNater

    Thanks so much for the tutorial. Its like taking an entire Flash class in one go!
    I just have one question. I’m trying to make it so that the Stinger ships “yell” something when they die, which I made with a dynamic text field positioned behind the ship, with the instance name of “yells”. I imported flash.text.TextField, and created a private var lastwords:Array = new Array(); in my Stinger class, and set the first 0-4 positions with words or phrases set as strings, ie lastwords[0] = “Damn!”; in my constructor. I am working with this line, yells.text = lastwords[(Math.floor(Math.random() * 5)]. However, no matter where I put it, I get: TypeError: Error #1009: Cannot access a property or method of a null object reference. Any ideas?


  20. EvulNater

    BugSlayer, SAMM_47, and mike, you all have probably moved onto other projects by now, but I figured an easy solution for the “shoot enemy again while they explode” problem. To the Stinger class, add “public var alive:Boolean = true;” with the other variables, and under the if statement of the takeHit() function, add “alive = false”. Then, over in the LaserBlue class, change the if statement in loop() to look like this “if (hitTestObject(Engine.enemyList[i].hit) && Engine.enemyList[i].alive)”.


  21. Jai

    EvulNater,

    Thanks for that heads up on how to solve the Error #2007. That was driving me nuts. It didn’t seem to be effecting anything, but it’s still a pain. Thanks :)


  22. Vasi

    Great article, thanks
    currently, i’m doing some studying experimenting with Flex/Flash, looking for ways of organizing a formidable designer/developer workflow…
    One thing that caught my attention is “MovieClip::currentLabel”:
    it seems that when you have multiple layers with “intersecting” frame labels in them, when the clip gets animated – the last framelabel caught during playback, will be the one set as the “MovieClip::currentLabel”.

    In other words, it should be stressed that clauses such as:

    if (currentLabel != “destroyed”)

    may be used only in MovieClips that have only a single layer defining frame labels.


  23. William

    Hi, I found a little bug… when BlueLaser hit a enemy multiple times, while destroying animation is running, then the animation run again and again like you hit many enemies


  24. William

    I think, we can fix the error like said mike:

    mike says:
    August 8, 2009 at 6:46 pm
    Meet and Sepiantum : I had the same error, then realized it must be saying Null because the hitbox goes away. I figured this out because I noticed that the error only happens after you shoot the ship as it’s being destroyed. To get rid of the error, you have to make sure teh hitbox keyframes extend to the end of the animation. However, this introduces the bug as said above where you can keep destroying the same ship over and over – it replays the destroyed animation. I haven’t read the last tutorial yet so I dunno how to fix it but I’m off to read it now!

    Thanks for the tuts!

    and to fix the bug we can create a new keyframe in frame 2 and reduce “hit” instance to 1 “pixel”…
    It’s why i dont know much in programing.


  25. Beranger de Roquefeuil

    Specialthanx to ath77 !!!


  26. pixrael

    first, thanks a lot for the tutos… they are really good!

    im using flash cs5

    when i try to create the motion tween of the explotion of the stinger flash sais that could not create the motion tween cuz the object has action script associate or other elements that dont accept the motion tween….

    so i will do the explotion of the stinger frame to frame like i did the laser hit implosion…


  27. Joe

    Just wanted to point out that you need to remove the enemies from the collision list once you hit them (and yes, I did check this time)

    As it plays right now, it is possible to hit a foe infinite times because even while they are exploding you can still hit them and trigger the explosion sequence again and again endlessly.


  28. Haha

    just replace “gotoAndPlay(“destroyed”)” with “play()”
    so an enemy will be destroyed once even you shoot it many times.


  29. Amy

    Hi,

    I’ve just completed this tutorial but I have a problem because when the stingers get destroyed the animation jumps. It still looks good but the implosion is slow and jerky. How do I fix this? Is it to do with the frame rate(current frame rate=30) or file size?

    cheers



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement