Home / Tutorials /

Multiscreen Game/App – Part 1: Setting Up

Introduction

With my recent creation of multiscreen game (Crazy Gems) in mind, I am presenting a basic template I created in Flash Professional for use in the games or apps you might be trying to create. The method that I am following is obviously not the only method you need to follow. This comes with my experience and hard learning over time.

I will be using Adobe Flash Professional CS5 for the UI creation and later, Adobe Flash Builder for writing code and debugging. This article will first guide you to setup the provided Template files to give a fair idea of the implementation.

Prerequisites

  • You need to have Adobe Flash Professional CS5 installed.
  • You need to have Adobe Flash Builder 4 installed.
  • You need the application files (.fla and .as) that I have shared below.

Download

DOWNLOAD SOURCE FILES
( downloads)

Preview

This is how your app will behave in multiple screens (only visually). I will also go through how you can manage to detect the type of controls/player for handling input events. For a detailed post on how it behaves on multiscreen, visit my blog post – One Code, Multiscreen.

Portrait Version

Portrait Version

Landscape Version

Landscape Version

Setting Up

Once you have the required files extracted to a folder on your hard drive, make sure your folder structure matches the below one: -

Multiscreen Template Folder Structure

Let me explain the folder structure. The main UI file that contains all the images, graphics of my app/game and is supposed to contain all the sound/video/other assets is the .fla file.

The folder Template contains a Logic.as file that is my application’s class file (Document Class).

The com folder additionally contains 2 folders among which one (hsharma) is the one that contains the logic for multiscreen layout.

You should also see an empty folder called greensock. This is just an indication that you can dump other third party class files or packages here and use it in this template.

As explained before, we will have all our compile time assets inside the .fla and write the actionscript separately in the .as files.

The .FLA File

Go ahead and open the Template.fla file in Flash Professional. You should see a similar screen as shown below: -

Multiscreen Template Folder Structure

This image doesn’t depict the visuals in their actual dimensions; I have zoomed out to fit the screen. As you notice, here are the layers -

  • LevelNum – (Right Top) This layer contains a MovieClipLevelNum” that has a gray rounded rectangle, with a static text “LEVEL” and a dynamic text that contains “00″. This will depict the current level of the game.
  • Title – (Left Top) This layer contains a MovieClipTitle” that will contain my app/game’s logo/icon with the title text if required.
  • MainMenu – (Left Bottom) This layer contains a small MovieClipMainMenu” consisting of 4 Buttons (Restart Level, Help/Instructions, Close/Exit and About).
  • Canvas – (Center) This is a MovieClipCanvas” that I use to put in all the elements that my game or app requires to have. This makes it easy for me to control the main logic or behavior of my game. The blue rectangle that you see in the image above depicts the selected MovieClip “Canvas”. I also have placed another MovieClipControls” in the same layer (Right Bottom) that are the game controls (Up and Down arrow Buttons).

Using the Template

I shall now explain a little more as to how you can use these project files and make the best use of it.

In the Properties panel of your .fla file, when no object is selected on stage, you should see a text field which accepts a Document Class name (as shown below). This is where I enter the package name and the class name. In this case, Template.Logic.

Edit Document Class

Clicking on the button beside the text field to open/edit the class file, triggers a new panel that asks you for your choice of AS editor. Choose Flash Builder.

Choose AS Editor

Flash Builder should automatically open up and it now tries to create a new Project for the .fla file (Flash Project). You should see a new pop up in Flash Builder as shown below: -

New Flash Builder Project

You may let the folder locations be default. In this case, the .fla remains in the folder where you extracted it. A new Flex Project and a folder will be created in your default Flash Builder Projects folder. Once finished, this is how your Flash Builder project structure should look like: -

Flash Builder Project Structure

By default, Flash Builder generates a document class with the same name as the .fla file. In this example, it creates Template.as in the default package. You can go ahead and delete that since we are writing the code in the Template/Logic.as class.

Conclusion

You are now ready to start coding your game/app. You may test and run the swf by pressing Command+Enter (Mac) or Control+Enter (Win). You should see that the UI fits any screen orientation as you drag. I shall explain the specific code for resizing in the next part of this article. Hope you found this article helpful.

Part 2: Understanding Code – Coming soon…