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

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

(42 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…

Prerequisites

• This requires Adobe Flash Professional CS5 and I haven’t planned on posting CS4 version as it needs compatibility to Flash Player 10.1 and uses Accelerometer API that is currently available only in CS5.
• I have used TweenLite AS3 from GreenSock for some animations. I haven’t distributed it with the source files, so you might have to download your own license from www.greensock.com.
• I have not shared the font I used for original game. I have used Arial in this project instead.
• If you haven’t followed my previous demo that showcases this game working on many different devices, please visit the post, One Code, Multiple Screens.

Download

(76 downloads)

Once TweenLite class files are downloaded, copy the “greensock” folder to your project’s subfolder “com”, as shown below -

Setting up “Flash Professional to Flash Builder” Workflow

1. Open the .fla file from the archive in Flash Professional CS5.
2. Click on the “Edit Class Definition” button beside the Document Class text box in the Properties Panel
   
3. Flash Professional pops up a dialog asking where you would want to edit the Class Definition. Choose Flash Builder and click OK.
   
4. Flash Builder 4 should automatically open now. Flash Builder now creates a new project linking it to your Flash Professional CS5 .fla file.
5. Give it a project name you desire and specify a location for your Flash Builder Project and click Finish.
   
6. You should see a project structure in Flash Builder similar to the one shown below -

   

7. You should also see Logic.as opened so you can start editing the class definition. Once done editing, to test the movie, follow the same shortcut key as Flash Professional CS5. Being in Flash Builder 4, press Ctrl+Enter (Win) or Cmd+Enter (Mac).
8. You may also delete CrazyGems.as under default package (the same folder as the .fla), since in this particular project, I have all my code in Logic.as.

Do drop me a mail in case you find some trouble understanding the code.

I call this game Crazy Gems and it is hosted on my website. The way the application is written, makes it run successfully on many different platforms irrespective of the screen sizes and some of the device capabilities that vary. The video below showcases the same game from the same server running on 3 different platforms. It also summarizes the fact that your content, if built well, could and would run successfully giving users seamless experience across *all* the platforms that Adobe Flash Player runs on.

More Information

Find below some screen shots of the game running on different platforms -

Internet Explorer on Windows XP	Firefox on Windows XP	Safari on Windows XP
Safari on Snow Leopard	Firefox on Snow Leopard	Firefox on Linux
Native Browser (Landscape) on Android (Google NexusOne)	Native Browser (Portrait) on Android (Google NexusOne)

A similar experiment was carried out by Christian Cantrell running Adobe AIR also on many different platforms. Check it out here.

Flash Professional CS5 to Flash Builder 4 Workflow

I majorly used this workflow, which really made my coding process faster and easier. I designed the game UI in Photoshop CS5 and imported assets, built the layout in Flash Professional CS5. Later coded the app in Flash Builder 4. It was a piece of cake to use the code hinting in Flash Pro CS5 and also code & debug in Flash Builder 4.

According to the image above, the whole project structure was just one .fla file with one main ActionScript file. Making it run on different devices involves publishing for different platforms. This was just 2 in my case. Flash Player and AIR. I just had to change that in the Publish Settings of my Flash Professional CS5.

Support for Accelerometer

This game can also be played on devices supporting Accelerometer. To accomplish this, I used Accelerometer.isSupported API to determine if Accelerometer was supported on the platform that is running the game. If returned true, I create objects and write listeners. If returned false, I ignore the logic of using Accelerometer and instead, make use of touch/mouse controls and keyboard events.

Support for AIR

I am yet to just click a mouse button and set the publish settings of the .fla file to publish the content to AIR 2. That’s all there is to it. I have made use of Capabilities.playerType to determine if the content runs on Flash Player or AIR and based on this, I enable/disable AIR specific features to my content.

Source Code

You can find the source code here – Source: One Code, Multiple Screens

You may play the game for fun – Crazy Gems 2

]]> http://www.hsharma.com/tech/adobe/presentation-creating-multiscreen-apps/feed/ 0 http://www.hsharma.com/tech/s60/flash-symbian-packager-helisso/ http://www.hsharma.com/tech/s60/flash-symbian-packager-helisso/#comments Thu, 04 Mar 2010 06:36:16 +0000 Hemanth Sharma http://www.hsharma.com/tech/?p=1074

As AIR 2.0 is down the line ticking time for the release, the current BETA AIR 2.0 has got one of the best examples a developer can build. Helisso – A Symbian Packager developed in AS3 for AIR 2.0.

Mark Doherty, platform evangelist has posted complete details of the app Helisso on his blog. Also demonstrating a video walkthrough.

If you want to get your content packaged with custom svg icon for S60 v3 and v5, this might be the tool for you.

]]> http://www.hsharma.com/tech/adobe/building-iphone-apps-in-cs5/feed/ 0 http://www.hsharma.com/tech/flash/3d-realistic-earth-using-papervision-3d-part-1/ http://www.hsharma.com/tech/flash/3d-realistic-earth-using-papervision-3d-part-1/#comments Wed, 09 Dec 2009 08:03:07 +0000 Hemanth Sharma http://www.hsharma.com/tech/?p=980

Introduction

I was researching more on Papervision 3D when I realized I can share some information on creating a 3D realistic Earth model. I will also explain how to add rotation to earth and one way to show the rotation of moon and revolution of it around earth. I will also briefly describe how to handle something called “Pivot” points in Papervision 3D.

Setting Up

To start with, if you are fresh and new to Papervision 3D, I will describe the basic steps to configure your Flash CS4 authoring tool to work with Papervision 3D.

1. Navigate to http://code.google.com/p/papervision3d/downloads/list in your browser
2. Download the latest build’s ZIP file (You may also use the SWC or use SVN to download latest Papervision 3D class files if you know. This is just my way of setting up).
3. Extract it to a folder of your choice, e.g., C:\PV3D or Documents\PV3D
4. Open your Flash CS4 authoring tool and go to Edit>Preferences(Win) or Flash>Preferences (Mac)
5. Navigate to Action Script and choose Action Script 3.0.
6. In the “Source Path” section, click on the folder icon to browse to add a folder of libraries. Choose the folder where you extracted Papervision 3D class files.
7. Click OK and you are done with the setup. Now you can proceed creating Papervision 3D content.

Creating Basic Earth

We shall create a simple sphere (basic shape) and rotate it in place along Y axis.

1. Now that Papervision is set up, we create a new Action Script class file connected to an FLA file (e.g., Earth.as -> Earth.fla). Go ahead and create a new Action Script file and save it as Earth.as. Also create an FLA file and name it Earth.fla and in the Document Properties of the FLA file, enter Earth (the class name attached to the document).
2. Before you compile, you need to pour in data in to .as file. We need to create basic class/package structure to start with as shown -

   package {
   	import org.papervision3d.view.BasicView;
   	import flash.events.Event;
   
   	public class Earth extends BasicView {
   		public function Earth():void {
   			super(640, 480, false);
   			stage.frameRate=30;
   			startRendering();
   		}
   		override protected function onRenderTick(evt:Event=null):void {
   			super.onRenderTick();
   		}
   	}
   }

3. If you compile the FLA file now, you shouldn’t be getting any error. In the above basic code, we have imported the BasicView class from Papervision 3D’s packages for making the rendering job easier as it contains necessary implementation of rendering, initiating scene, viewport, etc. Let’s not worry about it now. We have extended Earth class from BasicView and written a constructor with initialization code for rendering and stage properties. Also an override function onRenderTick() to handle each frame of animation for rendering.
4. Now we shall create a sphere and rotate it. Observe the highlighted code below -

   package {
   	import org.papervision3d.view.BasicView;
   	import org.papervision3d.objects.primitives.Sphere;
   	import flash.events.Event;
   
   	public class Earth extends BasicView {
   		private var earth:Sphere;
   
   		public function Earth():void {
   			super(640, 480, false);
   			stage.frameRate=30;
   
   			earth=new Sphere(null,300,20,20);
   			scene.addChild(earth);
   
   			startRendering();
   		}
   		override protected function onRenderTick(evt:Event=null):void {
   			super.onRenderTick();
   		}
   	}
   }

5. We have created a new Sphere of radius 300 and 20 vertical and horizontal segments. This sphere is added as a child to the scene in order to display the created Sphere. Now test the file you created by saving and compiling the SWF. The output should seem similar to the below screenshot -



6. Without delay, we shall rotate this sphere with only one line of code added to the above code (in function onRenderTick) -

   	override protected function onRenderTick(evt:Event=null):void {
   		earth.localRotationY+=1;
   		super.onRenderTick();
   	}

7. localRotationY is a property of every DisplayObject3D used to rotate the object along the Y axis with respect to it’s local origin. The below image should help you understand it in case you need.
   



8. Now you may test your movie by pressing Ctrl+Enter (Win) / Command+Enter (Mac). You will see that the sphere rotates according to the Y axis.

Hold on with this output for now. I shall update with the next part soon where we will apply texture to the rotating sphere with proper lighting.

for (var i:int=0; i<3; i++) {

	this["myVar_"+i] = new Vector.<Vector.<int>>();

	for (var j:int=0; j<3; j++) {

		this["myVar_"+i][j] = new Vector.<int>();

		for (var k:int=0; k<3; k++) {
			this["myVar_"+i][j][k]=k;
		}
	}
}

To explain the code above for people who don’t understand this easily, there are 3 loops and I am creating 2 dimensional Array Vector – Vector[i] and Vector[j].

As you can also notice, I am creating variables dynamically with no predefined name.  I don’t use var myVariable:Vector syntax as I don’t know the names of variables that I need to create and I don’t know how many I need to create. Hence, I use “this” to create dynamic variable of name ["myVar_" + i]. Thus resulting in myVar_0, myVar_1, myVar_2…

For the i loop, I define each dynamic Vector variable as new Vector.<Vector.<int>>(); This is because I know I want to create myVar_i as a Vector and each element in this vector will in turn contain a Vector (similar to 2 dimensional array) and later, each Vector inside myVar_i Vector will contain elements of data type int (Integer). So, as you can see in the j loop, I have initiated each element of myVar_i Vector as new Vectors and specified that each element of [i][j] Vector will contain an int type element. Finally in k loop, I populate/push the Vector with an integer data k.

You may view further comparision of Array and Vector performance in Mike Chambers’ blog.