4.3 The Play Game Button

The play game button is made by just typing the words "Play the Game" in a large font, converting the font into vector objects by using the break apart command twice and then coverings the whole group of objects into a button symbol. The color of the text is changed for the over and down frames of the button. A solid box that covers the text is used for the hit button.

The appearance of the play game button is easily handled by having a keyframe with the button outside the screen and a second keyframe with the button in the final position. A motion tween is added between the two frames. Likewise, the same thing is done with the other two buttons.

For a button to do something, some JavaScript is needed. Typically, a button needs three pieces of JavaScript which are letting the system know you want to listen to the event, an event handler for handling the event, and letting the system know you no longer care about the event.

The first piece is simply some code to let the system know what function is going to handle the button. It is possible for the same handler function to handle multiple buttons, but that will be covered in the future. The code can be placed in several places with no strict rules on where you want to place it. For this game, I have created a layer on the main timeline called “Code” where I can add code to frames.

To associate code with the button, the button must be given a name. This is done by typing the name into the instance name section of the properties panel (in the left corner of the properties panel). In our case, we are calling the button “play_btn”. The code to let the system know you want to do something when the button is clicked is simply:

this.playGameBtn.addEventListener("click", playTheGame);

The method addEventListener tells the button that when the indicated event, in this case the Click event though other events can be listened for, it is to call the function playTheGame. This is where our approach to handling multiple scenes becomes an issue. Multiple scenes need a way of communicating with each other. The easiest way of dealing with this issue is to have some global code that all the scenes can access. Animate provides such a script, so the code for handling clicking the play game button will be placed there.

This global script needs access to the main scene movie. To do this we simply have the main movie call a registerStage function which stores the stage movie into a variable movie which gives us the ability to change scenes and access functions within any of the movie clips that we are using as scenes.

function registerStage(stg) {
    gameStage = stg;
    gamestate = GAMESTATE_PLAYER_PLAYING;
    gemsRemaining = 40;
}

The playTheGame is the function we will be writing to handle the start of the game. The function simply is a function that contains the code that is to be run when the event happens. In our case this is very simple:

function playTheGame() {
            gameStage.gotoAndPlay("Game");
}

The gotoAndPlay() method simply tells the main movie that it is time to start playing from a different frame. If we had multiple buttons that went to distinct parts of the movie, we could easily set up each button to go to a different frame of the main movie.