THE TITLE SCREEN

There's two things we need to do here: add the graphics, and add a button that we can press to start playing the game.

 

1. Add a new layer and call it 'buttons'. Then, add a new Keyframe to frame 1 of the buttons layer. Also rename your 'Layer 1' to 'gfx'.

 

Layers

 

2. Now for the hard bit. Draw in your title screen! You can either use the flash tools or import a bitmap you have made in Photoshop or some other image editor (the GIMP is a good free alternative http://www.gimp.org) by going to 'File > Import > Import to Stage'.

 

Note: If you import an image, make sure you create another folder in your directory structure called images and save it there. Keep it neat ;]

 

3. Now for the first bit of code. We need to stop the main timeline so that it stays on the title screen until you want to play the game. Select the first frame of the 'as' layer and open the Actions window (F9) and add the following script:

 

stop();

 

This is an ActionScript library function which simply stops the timeline.

 

You now need to add a button that will take you to the game.

 

4. Select the button layer and draw a square out. Add some text such as "Press Select". (The select button is a standard button on all phones that support Flash Lite.)

 

Select Button

 

5. Select the text and the square and convert them to a symbol (F8). Use 'Button' as the type and call it 'ButtonStart'.

 

6. Now select your button and give it an instance name of btn_start.

 

Instance Name

 

7. Open the Actions window once again and add the following code below the stop(); function:

 

Selection.setFocus(btn_start);

 

btn_start.onRelease = function()
{
  nextFrame();
}

 

The first line is there so that when your game starts, the select button automatically has focus. Without this line you would have to use the direction keys on your phone to select the button first, then you could select it.

 

The next block of code is a function which says once you select (release a button) btn_start, then move the timeline to the next frame.

 

Note: The ActionScript function gotoAndStop(n); could be used instead of nextFrame(); where n is the frame you want to go to.

 

Now you are ready to test your app. Go to Control > Test Movie (Ctrl+Enter | Cmd+Enter). This will open Device Central and you'll see your app running in the phone you selected.

 

Note: The button could also have been created using a Key Listener. Key Listeners are covered later in the tute.