Making a Flash DDR Game: Key Recognition

For those of you who missed out on my previous tutorials about the game, you can catch up with the links that I've provided on the sidebar. Anyways we finally have come to the meat and potatoes of putting together our game. The most important part of any game isn't the looks or the sounds, its about allowing the user to interact with game, and with this tutorial we're going to show you how using our series: Making a Flash DDR Game. For those who are just joining use you might want to go back and read our previous two installments. However, if you just want to jump right on into things, here we go. By the way, some of the material can get pretty rough around the edges so just leave a comment for help. Also beware that some of this stuff is for intermediates and above.

1. To begin, let's revisit our current game setup.


So what will occur during the game is, that game pieces will drop down onto the "landing strip" and every time the game piece lands on its respective area, the player will have to press a certain directional key that corresponds with the game piece. If you haven't read the previous articles, think DDR.

2. Now we are going to do is convert the gaming area which is just a set of vector shapes, into a movie symbol, which you can name whatever you like. So highlight all of the vector boxes and right click and select convert to symbol and choose movie. By converting the actual game area to a movie symbol, this allows us to program the game "within it of itself," which in laments terms means that we have more flexibility by giving the gaming area its own environment, instead of just programming the larger flash file full of all the other objects.


3. Now double click on the new movie. double click on the "landing strip" and here is where we will create our game. First we need to define what is the up, down, left, and right symbols. What is unique about this particular game setup, it that it allows you to do that by simply highlighting and copying a up arrow within the "landing strip." Next, paste the object back on the screen, and convert the shapes to a button symbol, which should be appropriately named "up." Do the same for the left, right, and down arrows.



4. This may sound crazy, but delete the left, right and down button off the screen, but don't worry its always available in the library. Afterwards, create a new layer and name it "Up" (Right Click on the layer to rename). Then copy and paste your Up button off the first layer and onto the "Up" layer.


5. Its time to get a little crazy. First expand the keyframes of the landing strip area to the 30th frame. Then move the up arrow over an up arrow within the "landing strip." To make it easy on yourself just place it over the area where you copied it from. Then move the button upwards y only using the "Up" on your keyboard, because we want the button to be directly aligned with its landing area. Move the arrow completely off the stage. Now add a new keyframe at about frame 30, and on this new frame, move the "Up" button all the way down the stage, using the keyboard. Then create a motion tween from frames 1-30.



6. Find the frame where the button directly overlaps the "landing strip" and makes a perfect fit. Convert that frame to a keyframe (this should be around frame 15). Now tricky part, Copy the button that's on the landing strip, and convert the frame thats 5 frames away from your current frame into a keyframe (You will see why later). Delete the button wherever it is on the screen, and Paste in Place the button. Then for all the frames inbetween, convert them to keyframes as well.

7. On the intial frame in which the button crosses the landing strip, click on the button and open the Actions panel, and type the following:

on (keyPress "") {
gotoAndplay(_currentframe + 2);
}


8. On the next frame , select the frame itself in the Timeline and in the Actions panel, type:
gotoAndPlay(_currentframe + 3);

9. On the third frame, change the tint of the button to something really bright, This will let the player know that they successfully hit the correct key and did it in rhythm.

10. On the fourth frame, change the button tint to the same color it is on frame three. And in the Actions panel, for this frame, type:

play();


11. On this frame, remove the tint from the button, and also type in:
play();

12. When looking at the Timeline, the timeline should look like this:



13. Now test, and see if it works. If not just go over the process again, and I have to say it took me a little bit of time to figure out things that were wrong with the process. Once your done with that, do the same for the left, down, and right buttons. Also you can create multiple animation sequences on the same layer so that you just don't have to have only four sequences. My main tip is to use Copy, Paste, Paste in Place, to your advantage and double check the code on a button to make sure that the correct key is pressed to initiate the button. I literally spent 3 hours reviewing code to see what was wrong, when I had missed type "Press Up" on the left button.