Flash Tutorial Links:
Play Games: HTML5 Tutorials:

Flash Game Framework (Part 2)

The tutorials here are listed to guide you from a newbie in making a flash game, to an expert. Follow them in sequence for a gradual learning curve!

Flash Game Development For More Advanced Games

All the materials you read in the Game Framework under the Tutorials section will still apply. One key aspect of creating games that I conveniently left out in the basic tutorials is the inclusion of the Menu page, the Winning-The-Game page, and the Game Over screen. Explaining those would have just cluttered up the old tutorials, so it's better left to do them here.

New Timeline

I'll mainly use the first advanced tutorial, Tower Defence, as the example here. You may want to go download it first. Then, open up the FLA file, and take a look at the new timeline.

new time line

You can see that I've created many more frames. If you're not too familiar with how to create and extend frames like this, please experiment with the frame options. Just right click over the frames in the timeline, and you should see these commands.

frame commands

After you've created a similar structure, you can basically just think of the new timeline as being 4 different sections, Menu, Game, GameWin and GameOver. When we're creating games in Flash, we don't use this timeline the traditional way an animator will do it. These frames are not meant to run in sequence like an animation would.

In fact, we could have done this with just 4 frames, but I extended them a little bit more so that you can read the frame labels. These frame labels are important to the running of the games. To label the frames, just click on the frame you want, and type in the frame name here.

frame label

If you click on the frame labelled game, and open up the Actions panel (F9), you'll see some code which you should recognise (if you'd been following my tutorials).

game action script

Before we expanded into these 4 sections, we only had 1 frame in the game. Once you execute the game file, you'll jump straight into the game. These were the same codes that we wrote previouisly. The stop() command basically makes the playhead stop at this frame. I like to include it in, just to be sure the playhead doesn't scroll through the whole timeline accidentally. Anyway, recall that startGame() launches all the code that gets the game ready to run.

Like I mentioned before, one of my key aims for doing these tutorials is to be as consistent as I can. Basically, you should be able to do a variety of games in a very consistent style of coding. Likewise, the way I handle these frame codes will be fairly consistent too.

Take a look at the other actionscripts written in the other frames for Menu, GameWin and GameOver. They have the startMenu, startGameWin and startGameOver functions. Similarly, these functions are defined in the GameController.as.

start_____ Functions

These start_____ functions like the startGame, startMenu, etc, all serve a similar purpose, that is, to setup the necessary codes for the player when you reach a particular section. For the startGame function, your code sets up all the variables, event listeners that you need for the player to play the game.

For the startMenu function, your code will look something like this.

public function startMenu()
    btnPlay.addEventListener(MouseEvent.CLICK, gotoGame);
private function gotoGame(evt:MouseEvent)
    btnPlay.removeEventListener(MouseEvent.CLICK, gotoGame);

When startMenu is called, it assigns an event listener to listen for mouse clicks on the button called btnPlay, which is currently the only button on the menu page.

label button play

If you have more buttons that you want your player to interact with, probably say, Credits page, High Score page, How to Play page, then you'll simply have to add more btnCredits, btnHighScore, etc to your menu. Code wise, they should be pretty similar.

If you look at line 49, when the button btnPlay is clicked, it executes the function gotoGame. What gotoGame does is to remove away the event listener (good programming practice), and then go to the frame that is labelled "game". This is essentially that frame where the game will take place. Once the timeline jumps over to that frame, well, you guessed it ... the startGame() function will be called, and the rest is history.

The codes for startGameWin as well as startGameOver are more or less the same. They all issue an event listener for one button which will bring the player across the frames.

Well, if you have a rough grasp of this new framework that we'll be adopting for the rest of these advanced tutorials, step right up and proceed on to the very first Tower Defence advanced tutorial!

Flash Resources
Preloader FPS Display Sounds & Music
Keycodes Name Generator
Game Development Resources
Sprite Sheets

Flash Tutorial Links:
Play Games: HTML5 Tutorials:
gaming tools download on app store now!
Home | About Us | Contact Us
Powered by Make Flash Games. All Rights Reserved.
By Joseph Tan