MAKING A FLASH GAME

If you ever wanted to make a simple flash game, here is a guide I made back in 2009. Flash isn’t too popular anymore.

In under 30 easy steps

Running Macromedia Flash 8




1. Turn you computer on, and log onto your desktop

2. Click on Start

So you’ve booted up your computer and logged in to windows boring old desktop, now we need to actually run flash, which I’ll explain how to do in the following steps

3. Go to All Programs

4. Select the programs folder called Macromedia

5. Click on Macromedia Flash

6. And if you followed this guide correctly, Macromedia Flash 8 should start up, and you’ll be ready to make your first flash game.

So you’ve started Macromedia Flash 8, and Have no idea what to do, well lucky enough you ran upon my guide somehow and in the following guide you will learn how to make your first Flash game.

1. Open up Macromedia Flash

2. Click on the File menu on the top left hand corner, and click on new, or press
CTRL+N on your keyboard.

3. The menu below should appear, Select Flash Document, and then click OK.

So now you have started a new flash document, and are presented with the screen shown below, which displays the stage and your tools which you will be using to make your flash game.




Play around with what you see for a bit, and get a feel for the program you will be using to make your first game.

We will now start making your first game, dress the potato, in this game we will have a potato that can be dressed with drag-able objects on screen, and we will program a reset button to allow the player to start over. Don’t Worry if this sounds like it’s a bit over your head, we will make this game step by step.

Before we start, just let me show you how to save so you don’t lose all your work.

Saving

1. Open the File Menu on the Top left hand corner, and Click Save

2. The Screen below will only appear the first time you save, asking for a location to save in, and a name. In this case we will be saving on the Desktop, with the File name Potato. After clicking save, all you have to do is click on the file menu and click save, or hit CTRL+S on your keyboard and your file will be saved.

3. Do often, Always remember to save, last thing you want to do is lose your beautiful and valuable work after working hours on it.

So, now you know how to start Flash, and how to save, so now, all you need to do is follow this guide step by step, and you’ll have your first game done.

We will have non-movable and movable objects. So we need to make two layers, one for objects that we always be seen and will never change position during the whole program, which we will call “Static”, and another layer with the dragable objects used to make this game a game, which we will call “objects”. We will also need two frames, One for the game to be placed in, and another before it so that when the game is reset, all objects will go back into place. So let’s begin.

1. Select the First Frame on the First and only layer on the timeline and press F5 to crate a new Frame.

2. Select the Second Frame and press F6 to create a new Key Frame. This will be the frame in which we will be placing all the dragable objects.

3. Now we need to add a new layer, so click the new layer button, to make a new one appear.

4. If you notice, the top layer has one key frame, and the bottom has two, exactly what we need, so now we will rename the layers so that we can work better with them. So to rename it, all you have to do is double click the layers name. So let’s call the top layer “static”, and the bottom layer “objects”.

5. So, we are ready to start working on the static layer, but we don’t want to mess with the objects layer, so we need to lock the objects layer so it is not affected by what we do. Click on the little dot below the lock symbol on the objects layer.

6. The objects Layer is now locked, but now we need to select the static layer so we can work on it, so select it.

7. Ok, so we are working on the Static Part of this project, we need to put everything that’ll be visible during the whole game in this window, so play instructions go here, your name goes here, and the reset button goes here, so let’s start with the reset button.

We will be using one of Flash’s built in classic arcade buttons. To find this button you need to select the window menu at the top, select Common Libraries, and then click on Buttons

8. A window will pop-up with a list of folders, scroll down until you find the classic buttons folder, and double click it, it should open up showing you available buttons

9. My favorite color is red, so let’s use “arcade button – red” for this example. So what you need to do is scroll down until you see “arcade button – red” and then hold down the left mouse button on it and drag it onto the stage.

10. With the newly added button selected, we should take advantage to go ahead and program it to reset the game. So open up the actions panel if it isn’t already, all you have to do is click the bar at the bottom that says “Actions – Button”

11. Let’s add the code, just place it in the big white text box. The code below simply rewinds the game to the first frame, where there is nothing, so it will reset everything when it gets back to the second frame filled with the game content.

on (release) { gotoAndPlay(1);
}

To clear things up, on(release) means it will do the following once the mouse button is released on the button. gotoAndPlay(1), sends the file back to frame one to start play all over.
After you type this code in, minimize the actions bar by double clicking it, just like you did to make it appear.




12. Ok, so we have a reset button, but how will the player know what it does, well we need to add text to tell the player it’s a reset button. Let’s select the text tool in the toolbox.

13. With the text tool selected, we just need to use it to make a text box above the reset button and type in “reset”. Once you’ve done this, add a text box on the stage that says “click and hold to drag” and another with your name on it.

wow, looks like your half-way done, I mean at least the static layer is completed, take a break, you deserve it, just don’t forget to hit CTRL + S, if you haven’t already, we don’t want to have to start this lesson all over.

14. Ok, now that your back, I’ve got something to tell you, we aren’t quite done with the static layer, We forgot the most important part, the Potato, so let’s add a potato, so use the line, brush, or pencil tools in your tool box to draw a potato in the center of the stage, if you make a mistake, and want to undo, just hit CTRL+Z, and if you want to redo something you undid, hit CTRL+Y.

15. So now we are finally done with the static layer, let’s lock it, and unlock the objects layer. Then we need to select the objects layer.

16. For the objects, we only want them to appear in the second frame, so we will only be working in the second frame, so make sure you select the second frame of the objects layer before you start working.

17. We need to make programmable objects, so each object has to be a movie clip, so let’s make the first movie clip, the eyes. First you will need to go to the insert menu at the top, and select New Symbol…

18. Now a dialog pops up asking you the name and type of symbol. We will name
this symbol eyes, and select movie clip for the type of symbol.

19. You now have a new stage to draw on, so just draw a pair of eyes in the center of it.

19. Once you are done drawing the eyes, click on the back button to go back to the stage.

Repeat Steps 17-19 for the arms, shoes, nose, and other body parts.

20. Ok we are back on the stage, and need to add the eyes to the game, but first we need to select the second Frame on the objects layer if it isn’t selected.

21. Open up the Library using CTRL+L, a window will show up, and you should see the eyes movie clip you recently made in the list.

22. Drag the eyes movie clip onto the stage.

Whoops! What’s this, it looks like the eyes are behind the potato, this is a common mistake, I just made it while writing this guide, but it’s easy to fix, so don’t worry.

23. All we have to do to fix the problem we just had is switch the layers around, so click and drag the objects layer, and move it on top of the static layer, you should see the eyes on top now.

24. Now making sure you are working on the second frame of the objects layer, go ahead, and drag the rest of the movie clips you have created on to the stage.

25. Now for the Actions Script. Select the eyes, and open up the Action Script Panel by double clicking it, and copy the following code

on (press) {
_alpha = 75; this.startDrag(true);
}
on (release) {
_alpha = 100; this.stopDrag();
}

To clarify what this code does exactly, on(press) tells us what will happen when we click and hold the mouse button on this object. _alpha = 75; makes the object slightly transparent as a visual effect, and this.startDrag(true); starts dragging the selected object. on(release) does the following after you release the mouse button. _alpha = 100; sets the image back to its opaque state, and this.stopDrag();

Repeat this step for the rest of the objects on screen.

26. Almost done, all we have to do is give the second frame a stop command, so it does not continuously reset the game on us, so click on the second frame of the objects layer.

27. Now go to the action script panel and type in the following code

stop();

28. Our game is completed; all we have to do now is publish it. Save it if you haven’t already. Click on the File menu, and then Publish, or hit SHIFT+F12

29. Hit F12 on your keyboard to preview the game you just published to make sure it works.

30. Enjoy the game you have created!!!

Leave a Reply