Creating a simple mobile game using the Code Snippets panel in Flash

If you are interested in creating casual mobile games or applications but do not have prior experience developing with ActionScript, this article is for you. I show you how to create a simple mobile game called Jewelry Heist using the Code Snippets panel included in Adobe Flash Professional CS5.5. You'll learn how to apply and modify common interactive code snippets and device-specific code snippets to incorporate the game's features—having to have little or no knowledge of ActionScript.

The Code Snippets panel contains ActionScript 3 snippets that are commonly used in many Flash projects, including banner advertisements and games. Before completing the steps in this article, you may find it helpful to familiarize yourself with the Code Snippets panel and the prebuilt code that you can add to your projects. To learn how to use the Code Snippets panel, please read Code snippets for beginning ActionScript 3 programmers and designers.

The following code snippets are featured in this tutorial:

• Touch and Drag Event
• Mouse Over Event
• Countdown Timer
• Stop At This Frame
• Click To Go To Frame And Stop

The sample project for this article is a simple mobile game application called Jewelry Heist. The premise of the game is to steal gemstones from the museum without touching the moving security laser beams (see game below). Watch the following video to see how the completed game appears when played on a Droid X phone. This is a demo version of the game; you can add complexity to this game by writing custom ActionScript.

To get started, download the jewelry_heist.zip file provided at the beginning of this article. Save and uncompress the file to your desktop. Locate the file named JewelryHeist.fla and double-click it to open it in Flash Professional. Examine the main Timeline to see how the finished project is constructed.

There are three frames in the game's FLA document. The first frame contains the game's instructions, the second frame contains the game's graphics and play logic, and the third frame contains the Game Over screen. The first task involves adding code snippets to the game instruction screen on Frame 1 so that the instructions are displayed when the game first loads (see Figure 1). It's necessary to add the code to this section (Frame 1) because otherwise the playhead would immediately move on to Frame 2 and skip over the game instructions.

Pausing on Frame 1 with Stop At This Frame

Insert the code that pauses the playhead at Frame 1 (the frame that contains the game instructions) so that users have a chance to read the instructions before clicking the Play button:

1. Locate and open the Frame1.fla file. There is currently no code in this starter FLA document.
2. Click Frame 1 of the instruction layer to position the playhead on Frame 1 (the game instruction screen) in the Timeline.
3. Choose Window > Code Snippets to open the Code Snippets panel and see the list of code snippets organized in different categories.
4. Double-click the Stop At This Frame snippet in the Timeline Navigation category. The Actions panel opens to show that the Stop(); command is added.

Notice that the Actions layer is automatically created above the other layers in the Timeline and the code is added to Frame 1 of the Actions layer. All of the code snippets you insert will be added to the Actions layer going forward.

Updating the Play button functionality with Click To Go To Frame And Stop

Here you'll add the code to make the Play button go to Frame 2 when it's clicked:

1. Click Frame 1 in the Actions layer of the Timeline to ensure that the playhead is still positioned on Frame 1.
2. Select the movie clip symbol of the Play button that appears on the Stage.
3. In the Code Snippets panel, double-click the Click To Go To Frame And Stop snippet in the Timeline Navigation category. Flash displays a notification to let you know that you need to supply an instance name (see Figure 2). Enter Play_MC in the field and then click OK.

4. The Actions panel opens and shows that the snippet is inserted. In this sample project, the goal is to move the playhead to Frame 2 when the user clicks the play button. Therefore, change the last line in the sample code from gotoAndStop (5); to gotoAndStop (2);. The value in the parentheses indicates the frame number.
5. Choose Control > Test Movie > Test to test the FLA file. When the file plays in Flash Player, confirm that the game instructions (Frame 1) is displayed and paused. When you click the Play button, the playhead moves to the area with the game's logic (Frame 2).
6. Save and close the Frame1.fla file and then proceed to the next section.

In this section you will add code to Frame 2, which contains the graphics and code that enable users to play the game. If you want to keep using the previous section's sample file (Frame1.fla) as you follow this section, you must first choose File > Publish Settings and change the Player target settings from Flash Player 10.2 to AIR for Android in the Publish Settings dialog box. Click OK to save the change. If you are unfamiliar with making this change, you can simply double-click the Frame2.fla file to open it in Flash Professional and follow along with the steps provided in this section.

Frame 2 of the sample project contains graphics that simulate the inside of the museum and pedestals that each display a precious gem. The object of the game is to swipe the gems without touching the moving laser beams (see Figure 3).

Updating the gems with the Touch and Drag Event snippet

Here you'll add the Touch and Drag Event code snippet, which makes it possible for game players to use their touchscreen to select and drag the gems. To steal the gems, players must touch and drag the gems to position them behind the red curtain:

1. Locate and open the Frame2.fla file in the sample files folder. The two snippets that you added in the previous section are already added to this file.
2. In the Timeline, click Frame 2 in the Actions layer.
3. Select the Gem1 movie clip symbol on the Stage. Gem1 is orange.
4. Choose Window > Code Snippets to open the Code Snippets panel, if it is closed.
5. Double-click the Touch and Drag Event snippet in the Mobile Touch Events category. The Actions panel opens and shows that the snippet is added.
6. Repeat Steps 2–5 for the Gem2 and the Gem3 movie clip symbols.
7. Save the file. Leave Frame2.fla file open to add the Mouse Over Event.

Updating the laser beams with the Mouse Over Event snippet

Although smartphones do not have a mouse, you can use mouse events in ActionScript to trigger actions based on finger gestures on the touchscreen. Frame 2 contains three laser beams that move when you test the movie. When a user's finger intersects with any of the laser beams, the playhead should jump to Frame 3, which displays the Game Over screen:

1. Click Frame 2 to ensure that the playhead of the Timeline is still on Frame 2.
2. Select the Laser1Animation1 movie clip symbol on the Stage.
3. Choose Window > Code Snippets to open the Code Snippets panel, if it is closed.
4. Double-click the Mouse Over Event snippet in the Event Handlers category. The Actions panel opens and shows that the snippet is added.
5. Repeat Steps 1–4 to apply the snippet to the Laser2Animation2 and the Laser3Animation3 movie clip symbols.
6. Read the instructions for the Mouse Over Event snippet in the Actions panel carefully. The code example below is set to display the words "Moused over" in the Output panel:

Instead of tracing a text message, the goal here is to jump the playhead to Frame 3 when a player accidentally touches one of the laser beams. Edit the code in all three functions to replace trace("Moused over"); with gotoAndStop (3);. You may remember that gotoAndStop (3); is the same command you applied to the Play button in Frame 1.

Leave Frame2.fla file open to add Countdown Timer in the next section.

Defining the duration of the Countdown Timer snippet

You can add a simple timer to this game with the Countdown Timer code snippet. One of the aspects of this sample game is that users only have 10 seconds to steal the gems and play the game. When the time has elapsed, the playhead jumps to Frame 3, which displays the Game Over message. Follow the steps below to add and update the Countdown Timer code snippet:

1. In the Timeline, click Frame 2 of the Actions layer to set the location of the playhead.
2. If the Code Snippets panel is not already open, choose Window > Code Snippets to open it. Scroll down to the bottom of the Actions category and double-click the Countdown Timer snippet. The Actions panel opens and shows that the snippet is added. Be sure to read the snippet's instructions carefully. This snippet counts down from a specified number of seconds, which is set at 10,000 milliseconds (10 seconds). By default, the timer counts down each second (10, 9, 8, and so on) and displays the remaining number of seconds in the output panel. For the purposes of building this sample game, you'll modify the Countdown Timer snippet to trigger only one iteration in the 10-second interval.

   Edit the ActionScript code to replace this line:

with this line:

The new value of 1 sets the number of countdown interactions to one.

3. Specify the action that will occur when the timer runs out.

   Edit the code again to replace these two lines:

with this line:

After making this change, 10 seconds after the play button is clicked, the game will display the Game Over message even if the user didn't intersect or touch any of the security laser beams.

4. Save and close the Frame2.fla file to proceed to the next section.

If desired, you can continue working with the Frame2.fla file that you edited in the previous section. However, opening and using Frame3.fla file is recommended for this section of the article. Read the following sections to add code to Frame 3 of the Frame3.fla file, which contains the Game Over message (see Figure 4).

Updating the Play Again button to add the Click To Go To Frame And Stop snippet

The first task involves adding code that causes the playhead to jump to Frame 2 when the user clicks the Play Again button:

1. Locate and open the Frame3.fla file in Flash Professional. All of the code snippets you added in the previous sections of the article have been added to this version of the FLA file.
2. In the Timeline, click Frame 3 of the Actions layer to set the location of the playhead.
3. Select the movie clip symbol named PlayAgain on the Stage.
4. In the Code Snippets panel, double-click the Click To Go To Frame And Stop code snippet. It is located in the Timeline Navigation category.
5. The Actions panel opens and shows that the snippet is inserted. In this sample FLA file, the goal is to move the playhead to Frame 2 when the user clicks the Play Again. button. Locate and edit this line:

to this:

This change enables the player to start a new game. When they click the Play Again button, the playhead jumps to Frame 2. This displays the Stage with the museum graphics so that the user can try to steal the gems again.

At this point, the game logic is complete. If desired, you can save the file and choose Control > Test Movie > Test to test the SWF file and play the game.

However, there are some remaining items that you can update within the game to improve its performance and ensure that the mobile app works as expected. In the next section of this article, you'll find suggested best practices and code to add to the finished game to use fewer system resources and run the game more efficiently.

Here are some suggested changes you can implement to update the game and polish it. These updates are recommended to ensure that the game runs smoothly when played on a mobile device. These code updates are also important because they enable a user to play the game over again repeatedly without encountering any issues.

Resetting the Countdown Timer snippet

It is a best practice to reinitialize the Countdown Timer code snippet that you added to Frame 2. In this section, you'll add a line of code to ensure that the countdown timer will reset and start counting down 10 seconds when a user clicks the Play Again button to play the game again:

1. Locate and open the finished version of the game you created: Frame3.fla.
2. In the Timeline, click Frame 3 of the Actions layer to place the playhead on Frame 3.
3. If the Actions Panel is not already open, choose Window > Actions to open it.
4. Enter the following code at line 1, before the Click To Go To Frame and Stop code snippet:

Updating the Quit button

In Google Android OS, an application will continue running in the background until the user manually chooses to quit the application and close it. Therefore, it is important to update the logic for the Quit button in the game to prevent excessive battery drainage:

• In the Timeline, click Frame 3 of the Actions layer to set the location of the playhead.
• Select the movie clip symbol named Quit on the Stage. Look at the Property inspector while the symbol instance is selected and notice that the instance name is set to Quit_MC.
• Click Frame 3 of the Actions layer again. If the Actions panel is not already open, choose Window > Actions to open it. Copy and paste the following code to the bottom of the Script window:

The code above ensures that when the user clicks the Quit button on Frame 3, the mobile application will stop running on the device.

Improving game performance with garbage collection

Although the game is already complete, it is a best practice to clean up all of the events that occurred in Frame 2 before Frame 3 begins to play. The following function will remove all event listeners for objects that exist only in Frame 2. Without adding this code, there's a possibility that an event, such as Touch and Drag, may cause unrelated objects to move around if the user drags their finger on the touchscreen while viewing Frame 3 (the Game Over screen):

1. In the Timeline, click Frame 2 of the Actions layer to position the playhead.
2. If the Actions panel is not already open, choose Window > Actions to open it.
3. Copy and paste the following function to add it to the bottom of the Script window. This function is called every time a user intersects or touches one of laser beams and is sent to Frame 3, the Game Over message screen:

After adding this code, save the file and test the movie again. Now when you experiment with playing the game, you can try clicking the Play Again button and see that the countdown timer is reset to 10 seconds so that you can play again. The garbage collection that you added also ensures that if you attempt to click and drag the gems while on Frame 3 (the Game Over screen) the gems remain stationary and cannot be dragged.

Now that you have successfully completed creating the Jewelry Heist game, you can try publishing it and testing it using your own Android OS-based smartphone. To learn how to deploy your app to Google Android devices, follow the instructions provided in Getting started with Adobe AIR for Android (article) or Publishing an AIR for Android app (video). You can publish this game to iOS or Android OS devices, smart phone, or tablets.

Experiment with the concepts you learned in this sample project and try creating a variety of simple mobile games using the Code Snippets panel, so that you can develop interactive and engaging experiences on devices without writing a lot of code.

Check out these online resources to learn more about building mobile applications:

• Mobile and tablet development center
• Considerations for developing Adobe AIR applications for mobile
• Optimizing performance for mobile AIR applications