Setting Up

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

(161 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.

---

This entry was posted on Thursday, July 15th, 2010 at 4:40 pm and is filed under AIR, Action Script 3.0, Articles, Examples, Flash, Flash Professional, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.