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.”
In my file, the instance name for the UFO movie clip is already specified as
UFO_MC. Therefore, the instance name is not automatically generated when the snippet is applied. To confirm or add the instance name, you can select the UFO movie clip symbol and look at the name in the Properties panel.
From the code that was inserted, we’ll remove any lines of code dealing with the left arrow being pressed, since the Left Arrow key is not used. Delete the following lines of code:
var leftPressed:Boolean = false;
then scroll down to
UFO_MC.x -= 5;
and then down a bit more to:
leftPressed = true;
leftPressed = false;
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:
- Select the UFO movie clip symbol on the Stage.
- 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:
Here I would need to modify the inserted code
UFO_MC.play(); because what I want to play is not the UFO movie clip. Instead, I want the beam movie clip inside of the UFO movie clip to play when the Right Arrow key is pressed. The beam movie clip is nested inside of the UFO movie clip so that it moves as the UFO moves.
- As noted above, there are three layers inside the UFO movie clip: light, body, and beam.
- The small orange dot under the UFO is the beam movie clip.
The instance name for the beam movie clip is
This is the instance name of the movie clip I want to play when the user presses the Right Arrow key.
For me, the correct code is
UFO_MC.beam.play();. Because beam is nested inside of UFO_MC; you use dot syntax to reference the beam movie clip.
Returning back to the main scene, and inside of the actions layer on frame 1, I just looked for the current action for what happens when the user presses the right arrow key. Right now, when I press the right arrow, my UFO moves 5 pixels to the right:
UFO_MC.x += 5;
But I want to insert the above command to play the correct movie clip (within a movie clip).
case Keyboard.RIGHT statement, I replaced the lines above with:
The Up Arrow key moves the UFO up five pixels. The Down Arrow key moves the UFO down five pixels. The Right Arrow key plays back the beam animation.
[swf src=”http://misterjrobson.com/UFO.swf” width=”600″ height=”400″ ]