New Feature: – This version uses Accelerometer of your device for the game play.

This application was built in AS3 on Flash Professional CS5 + Flash Builder 4 for AIR 2 desktop. I am also planning to port this to AIR for Android version. Comments and suggestions are welcome.

I would also like to thank Madhu from NewTint to have helped me with the artwork assets (digitally painted) that are used in this application.

Please refer to my previous post on how to extract the provided files, setting them up in Flash Professional and Flash Builder. Once you are done setting up, you may proceed reading this article to understand the code constructs.

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

(145 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

Landscape Version

Application Logic – Logic.as

The game’s logic is written in Template.Logic class. This is how it looks: -

package Template {
	import com.hsharma.Game;

	import flash.display.MovieClip;

	public class Logic extends MovieClip {
		private var game:Game;

		public function Logic() {
			super();

			game = new Game(this, Canvas, Title, LevelNum, MainMenu, Controls);
		}

		public function initGame():void {
			// GAME CODE

		}
	}
}

As you can see, it is just a simple class that has a constructor instantiating a new object of type Game. Will come to that later. It later has a function initGame() that is supposed to contain the game’s logic and behavior.

Generic Multiscreen Layout – Game.as

Let’s look at the class com.hsharma.Game before we run through the parts of Logic.as that we missed.

package com.hsharma {
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.geom.Point;

	public class Game extends MovieClip {
		private var _gameClass:*;
		private var _stage:Stage;
		private var _canvas:MovieClip;
		private var _title:MovieClip;
		private var _module_1:MovieClip;
		private var _module_2:MovieClip;
		private var _menu:MovieClip;

		private var title_ratio:Point;
		private var mainmenu_ratio:Point;
		private var module_ratio:Point;
		private var screen:String;

		public function Game(myClass:*, myCanvas:MovieClip, myTitle:MovieClip, myMenu:MovieClip, Module1:MovieClip, Module2:MovieClip) {
			super();

			_gameClass = myClass;
			_stage = myClass.stage;
			_canvas = myCanvas;
			_title = myTitle;
			_module_1 = Module1;
			_module_2 = Module2;
			_menu = myMenu;

			_stage.align = StageAlign.TOP_LEFT;
			_stage.scaleMode = StageScaleMode.NO_SCALE;

			title_ratio = new Point(_title.width, _title.height);
			mainmenu_ratio = new Point(_menu.width, _menu.height);
			module_ratio = new Point(_module_1.width, _module_1.height);

			resizeGame(null);
			_stage.addEventListener(Event.RESIZE, resizeGame);

			showSplash();
		}

		private function showSplash():void {
			screen = "splash";
			_title.visible = false;
			_menu.visible = false;
			_module_1.visible = false;
			_module_2.visible = false;

			_canvas.setChildIndex(_canvas.Splash, _canvas.numChildren-1);

			// SETUP GREENSOCK TWEENLITE CLASS AND USE THE BELOW LINE TO FADE IN THE SPLASH SCREEN AFTER 3 SECONDS DELAY
			// TweenLite.to(_canvas.Splash, 1, {delay: 3, alpha: 0, onStart:initGame, onComplete:hideSplash});

			initGame();
			hideSplash();
		}

		private function hideSplash():void {
			// UNCOMMENT THE BELOW LINE ONCE YOU HAVE THE FADE IN ENABLED FOR SPLASH SCREEN
			// _canvas.Splash.visible = false;
		}

		private function resizeGame(event:Event):void {
			// INTELLIGENT LAYOUT LOGIC GOES HERE
		}

		private function initGame():void {
			// RESET VISIBILITY OF VISUAL ELEMENTS

			screen = "game";
			_gameClass.initGame();
		}
	}
}

In the above code, lines 69 and 73 are bunches of lines of code that I have specifically removed for now to reduce confusion. We shall also look into that later.

Passing Game’s Visual Elements to the Generic Layout Class

Now, look at the 2 important lines in Logic.as -

import com.hsharma.Game;

game = new Game(this, Canvas, Title, LevelNum, MainMenu, Controls);

I have imported the generic Game class and instantiated an object game passing some objects to the constructor of the Game class. First object that I pass is the class reference to Template.Logic (Logic class of any game that I write) – this. The other objects that I pass are the visual elements (MovieClips) that are explained in the Part 1 of this tutorial, namely: -

• Canvas – (Center) This is a MovieClip “Canvas” that I use to put in all the elements that my game or app requires to have.
• Title – (Left Top) This is a MovieClip “Title” that will contain my app/game’s logo/icon with the title text if required.
• LevelNum – (Right Top) This is a MovieClip “LevelNum” that will depict the current level of the game.
• MainMenu – (Left Bottom) This is a small MovieClip “MainMenu” consisting of 4 Buttons (Restart Level, Help/Instructions, Close/Exit and About).
• Controls - (Right Bottom) This is a MovieClip “Controls” that contains the Up and Down arrow buttons used to control the game’s behavior (rather, play the game).

This step is to make sure my generic Game class knows the visual elements of the game that I am writing, so it can arrange them according to any screen size. Important point to note is, any game that I write, ideally will be a replica of Template.Logic class. It might be CrazyGems.Logic class that will contain the game behavior of Crazy Gems. This class also will instantiate the com.hsharma.Game class object in its constructor, so the class com.hsharma.Game knows the visual elements of the game Crazy Gems and handles the layout.

Multiple Projects using Game Class

With a little bit of tweaking of Project properties in Flash Builder, we can setup more than one .fla (more than one game) use the same com.hsharma.Game class for the layout handling, so I don’t need to rewrite the multiscreen layout logic separately for each game.

Here is a typical structure of 3 example games that use the same class com.hsharma.Game for laying out the visuals for multiscreen.

Observe the color coding in the image above. Blue files represent the Logic and UI (.fla) for the game Crazy Gems. Green files represent Logic, UI (.fla) and other game-specific classes for the game Crazy Maze. Wheat/Cream colored files represent the Template files that I have shared with this article and their UI (.fla).

Finally, the Red files represent the com.hsharma.Game class and also the greensock package used for tweening. These two packages/classes are used across in all 3 games to avoid duplicates of code. So, I fix one bug in the multiscreen layout class com.hsharma.Game, it gets fixed for all the games referring to them.

Multiscreen Layout

Now that we pass the visual elements of our games/apps to the generic Game class, as you might have seen the output, the commented line 69 in the above code, function resizeGame(), actually has these lines of code shown below (again, minimal code shown). Rest of the code exists in the actual file shared with this article.

if (_stage.stageWidth > _stage.stageHeight) {
	// RESIZE ALL ELEMENTS (CODE NOT SHOWN HERE)

	if (_canvas.x < 50) {
		_title.visible = false;
		_menu.visible = false;
		_module_1.visible = false;
		_module_2.visible = false;
	} else {
		if (screen != "splash") {
			_title.visible = true;
			_menu.visible = true;
			_module_1.visible = true;
			_module_2.visible = true;
		}
	}
} else {
	// RESIZE ALL ELEMENTS (CODE NOT SHOWN HERE)

	if (_canvas.y < 50) {
		_title.visible = false;
		_menu.visible = false;
		_module_1.visible = false;
		_module_2.visible = false;
	} else {
		if (screen != "splash") {
			_title.visible = true;
			_menu.visible = true;
			_module_1.visible = true;
			_module_2.visible = true;
		}
	}
}

In the above code, line 2 and 18 are places where I have mimicked the Constraint Based Layouts available in the Flex framework. In the Game class above, you can observe the lines 41 & 42.

resizeGame(null);
_stage.addEventListener(Event.RESIZE, resizeGame);

This is where I call the function resizeGame(). As the screen is re-sized, during the game play, this function re-sizes and lays out the visual elements according to the screen. That’s all there is to it.

Device Capabilities

For the most part, games rely on some important device capabilities, like the input methods.

It is always a good idea to look for support of a specific support (e.g., Accelerometer) and then initiate the objects relating to that. Example below: -

import flash.sensors.Accelerometer;
if (Accelerometer.isSupported) {
	var acc_obj:Accelerometer = new Accelerometer();
} else {
	stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
}

One more tip on determining if the game is being played from the browser or as a desktop AIR app is shown below: -

import flash.system.Capabilities;
if (Capabilities.playerType == "Desktop") {
	// PLAYED ON THE DESKTOP
} else {
	// PLAYED ON THE WEB BROWSER
}

Minimum Size Constraint

When running the game/app on the desktop as a standalone app, the user might resize the window way less than recommended. To avoid this, we need to constrain the minimum allowed size of the app window.

• To do this, change the Publish Settings in your Flash Professional CS5 to player – Adobe AIR 2.
• Click on the “Settings” button beside Adobe AIR 2.
• Application & Installer Settings open up. Here, choose the Advanced tab.
• Specify the Minimum Width and Minimum Height properties so the user is restricted from resizing below the values specified.

Conclusion

Do note that this is just one method of coding a multiscreen application. There are several methods out there. Please feel free to experiment. I shall also try and write more about other methods. Also, feel free to change the code that I shared to your convenience and improvise if necessary. The intention of this article is to form awareness of the ability to create multiscreen applications in ActionScript easily. Thanks for reading.

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

(145 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

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: -

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: -

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 MovieClip “LevelNum” 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 MovieClip “Title” that will contain my app/game’s logo/icon with the title text if required.
• MainMenu – (Left Bottom) This layer contains a small MovieClip “MainMenu” consisting of 4 Buttons (Restart Level, Help/Instructions, Close/Exit and About).
• Canvas – (Center) This is a MovieClip “Canvas” 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 MovieClip “Controls” 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.

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.

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: -

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: -

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…

We now have a new Fan Group Site for Adobe Flash Professional enthusiasts. If you are a designer/developer who works on/loves Adobe Flash Professional, please do join the group and start contributing to the discussions.

• Develop – this track will find immediate resonance with Web Application, Desktop Application and Mobile Application developers from the world of ActionScript, Flex, Flash, ColdFusion, Java, PHP and .NET, including Game Developers. Architects creating multi-tiered enterprise systems that go beyond basic RIAs will also benefit from this track.
• Design – this track will feature content for Application UI Designers, Interaction Designers as well as designers who currently specialize in web or video and want to expand their skills. If your goal is to create interactive content, applications or video for the browser, desktop, or devices using Adobe technologies then this is the track for you.

Awaiting more and more proposals for an exciting review process. All the best for the submitters.

25 – 26 August 2010, NIMHANS Convension Center, Bangalore, India.

For more information, keep checking http://bit.ly/adobesummit