Creating a Flash Lite Game - Tutorial

By Blue_Chi | Flash CS3 | Intermediate
Pages 1, 2, 3, 4, 5

Making rich media for mobile consumption has never been easier since the release of the Flash Lite player for mobile devices. You can make a vector graphics game that could be played on any device regardless of its operating system or screen resolution easily as long as that device is equipped with the Flash Lite player - and lets not forget that you can play that game on a PC as well without using any emulators because the file is still a Flash movie that could be played on the Flash Player.

This tutorial will teach you how to create a Flash Lite game playable on the Flash Lite Player version 1.1 - one of the earliest versions and most restricted, but the most widely spread version as well. Our basic game could be created without using the advanced features provided in later versions. Adopting Flash Lite 1.1 will guarantee that the game will be compatible with the largest possible number of Flash Lite powered devices.

The game we will create is a very basic arcade game, the player merely collects the objects before they reach the ground. If he fails to collect three objects then the game ends. Our game will use very simple ActionScript concepts such as variables and conditionals. You really do not need to know much else.

Oman3D Flash Lite Game Oman3D Flash Lite Game 2

To play the game on your phone, unzip this file and send it to your phone. You can alternatively play the game on your computer if you have the standalone player installed.

What's Behind the Code?

As previously stated, our game uses very basic ActionScript concepts, as each of the objects fall, the value of their location on the _y axis increases, we run a conditional that checks if the player coincides with any of the fallen objects at the same position, if it is that is the case, the player gains an extra score point. Another conditional checks if the object reached the ground, if it does, the player loses one life. It is that easy!

Game Structure

Our game will require five frames only, they are as follows:

  1. Game Start
    The user will see a screen that says start game, he has to press a button to start playing.
  2. Initialization
    All objects and variables required for the game will be created in this frame. This code needs to be executed once only and that is why it is separated from the rest of the code that will have to be repeatedly executed.
  3. Game Execution Loop
    This frame will have the actual code to run the game, it will control the movement of the objects during gameplay and will continuously run throughout the game.
  4. Game Loop 2
    This frame has the simple task of making the previous frame loop. It does not have any other task or code.
  5. Game Over
    The player is transferred to this screen when he consumes all his lives. This screen will show him his final score and will also give him the option to play again.

This is the basic structure for creating a game on any platform. Making a game in Flash is easier to understand because you can separate the code of each of these sections in different physical frames. We will go through them one by one, but first we will create the basic layer structure to organise the content in each of our frames.

Starting Off - Layer Structure

Create a new Flash Lite movie, you can use Adobe Device Central, or alternatively create a regular Flash file and change the ActionScript version from the Publish settings. Set the ActionScript version to Flash Lite 1.1, the dimensions to 240x320px and the framerate to 12fps.

You should have one layer in your movie. Add three extra layers to the timeline, and rename them to Actions, Buttons, Main Content, and Background. Each of these layers will host a specific type of content as labelled.

Flash Lite Game - Movie Layers: Actions, Buttons, Main Content, and Backgrounds

We will now create keyframes in each of these layers in accordance with the 5 Frames structure illustrated above. Start off with the Actions layer. Create 5 separate keyframes in it.

Flash Lite Game - Insert Keyframes in the Actions layer

Now for the Buttons layer, we need a keyframe in Frame 1, Frame 2, Frame 3, and Frame 5. The Main Content layer on the other hand needs a keyframe in each of Frame 1, Frame 2, and Frame 5.

Flash Lite Game - Insert Keyframes in the Buttons and Main Content Layers

We are going to have only one keyframe in our Background layer, make that frame span across all the five frames.

Expand the Flash Lite Game - Background Frame

Our timeline is now ready. We will start working on each of the frames in turn:

You are now set to start making the game, the Game Start Frame is naturally next.

- Next Page