In this exercise, we’re going to create a different game with different functions. I’m going to create a game that has a little UFO that fires laser beams when the user presses a button. You can follow my example, but are certainly welcome to incorporate your own designs and elements.

Step 1 is to draw the scene. First, a background on the bottom layer. I’m not going to lie, I stole this off the Internet, but being the creative sort that you are, I’d encourage you to design your own:

Next, a layer on top with a button symbol that hides the instructions (>> Instructions)

And a separate symbol (I used a Movie Clip) containing some simple instructions for the game. (note: you could make this bigger block part of the same Button symbol, but I wanted to be able to position it independently and to show you an additional step.)

When you create a Button Symbol, you have a couple of options. To create, go into your Library

and push the New Symbol button at the bottom left of the Library panel

When you create a button, the Timeline header changes to display four frames labelled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe. Note that buttons can be text, objects, images, or even movie clips if you want an animated button.

If you add a keyframe in the “Over” column, you can change the colour or state of your button so that it changes when the user moves the cursor over the button. In my case, I want the buttons to change colour.

The “Down” frame is used when you want to change the button when it’s pressed. The “Hit” frame is the area of the button that the user has to press on to activate it. Basically, I don’t do much with those two.

I just want this button to hide the instructions when it’s clicked, so I’ll go into my Actions panel and under “Actions,” I’ll double click “Click to Hide an Object”

So the code says to watch for the instance of the play button (playButton) and when it’s clicked, it is hidden.

But I also want to hide the bigger block of instructions. You could either make this part of the same symbol as the button OR add those as a different symbol (I chose a Movie Clip and named it fullInstructions) and then add that you want to hide that as well.

We also need a Play button on a separate layer. It is also a Button Symbol.:

In this example, the button starts off red and changes to yellow when the cursor is placed over top

The tricky thing about this “Play” button is that it basically just brings back the instructions so that we can start again. So I’m going to take the code that we added to hide the instructions and modify it slightly so that when the playButton is pressed, the instructions come back!

And of course, we need a UFO that’s going to blast the lasers (again on a new, named layer). The UFO will be a movie clip symbol. That movie clip symbol actually includes 3 things. There’s a layer with the actual UFO body, on top is a separate movie clip within this movie clip, which makes the UFO’s lights blink (it’s a simple animation where the lights fade out and then when it restarts, they’re back on.) Hidden behind the UFO is the start of my laser beam:

light layer/movie clip:

and the beam is another movie clip, which starts hidden behind the UFO. It moves across the screen and makes a shooting noise as it travels:

There is a simple “stop();” code snippet at the top of my beam movie clip, so that the movement and sound do not happen automatically

My complete scene looks like this:

And my layers are named and organized like this:

To start adding the code for the game, place and select the UFO on the stage, then open the Code Snippets panel. Look under “Animation” and double click “Move with Keyboard Arrows.”

var leftPressed:Boolean = false;


then scroll down to

if (leftPressed)
{
UFO_MC.x -= 5;
}

and then down a bit more to:

case Keyboard.LEFT:
{
leftPressed = true;
break;
}

and then…:

case Keyboard.LEFT:
{
leftPressed = false;
break;
}

Press Command + Return to test your movie and verify that pressing the arrow keys moves the UFO up, down, and right (but not left.)

[swf src=”http://misterjrobson.com/UFO1.swf” width=”600″ height=”400″ ]

Next, change the event that is attached to the Right Arrow key. Instead of moving the UFO to the right, pressing the Right Arrow key will shoot the light beam:

1. Select the UFO movie clip symbol on the Stage.
2. In the Code Snippets panel, double-click the Play A Movie Clip snippet in the Actions category. The Actions panel opens and the following instructions and code are inserted right after the Move With Keyboard Arrows snippet in Frame 1 of the Actions layer: