Fabio Biondi Blog » Blog Archive » Air for Android and Flash CS5: animate movieclips in according with the phone orientation

Home » AIR, AIR for Android, Adobe, Flash AS 3

Air for Android and Flash CS5: animate movieclips in according with the phone orientation

25 August 2010 No Comment

Another new feature in AIR for Android is the way to manage the orientation event.
To accomplish this task you can now use the orientationChange event that is dispatched every time the user changes its phone orientation.

However, in the current beta release I got some problems to use this event because I wasn’t able to get the right stage size.

So I have decided to use the standard Event.RESIZE event and the new deviceOrientation property.
In other words, when the user changes the phone orientation, the Event.RESIZE will be dispatched and inside the event handler I’ll get the orientation type (ROTATED_LEFT, DEFAULT, and so on) using the deviceOrientation property.

So, what we’ll do after every orientation change?

- we change the background color in according of the orientation (red if orientation is ROTATED_LEFT, orange in other cases)
- we resize the background in according with the new stage size
- we move the PROCEED button in the BOTTOM-RIGHT corner with an animated Tween

For my tests I have used a Google/HTC Nexus One that properly supports these orientation types. Other phones could have some problems or could support other orientations.

Video demo (no-audio):

Screenshots:

Source code:

package  {
 
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.display.StageOrientation;
	import fl.transitions.Tween;
 	import fl.transitions.easing.*;
	import flash.text.TextField;
        import flash.text.TextFieldAutoSize;
        import flash.text.TextFormat;
 
 
 
	public class OrientationMain extends MovieClip {
 
		private var bg:Shape;
		private var proceed:Proceed;
		private var outputTxt:TextField;
 
		public function OrientationMain() {
 
			init()
 
		}
 
		/**
		 * Create the UI
		 */
		private function init():void {
 
			this.stage.align = StageAlign.TOP_LEFT;
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
 
			// Create Background
			bg = new Shape();
			bg.graphics.beginFill(0xff0000);
			bg.graphics.drawRect(0, 0,this.stage.stageWidth, this.stage.stageHeight);
			bg.graphics.endFill();
			addChildAt(bg, 0);
 
			// Display the Proceed button 
			// (This is a MovieClip in the library with class name 'Proceed')
			proceed = new Proceed();
			addChild(proceed);
 
			// Create an output TextField
			outputTxt = new TextField();
			outputTxt.autoSize = TextFieldAutoSize.LEFT;
			outputTxt.background = true;
			outputTxt.border = true;
			var format:TextFormat = new TextFormat();
			format.font = "Verdana";
			format.color = 0xFF0000;
			format.size = 25;
			format.underline = true;
			outputTxt.defaultTextFormat = format;
			addChild(outputTxt);
 
			// listener for the RESIZE event
			this.stage.addEventListener(Event.RESIZE, resizeHandler);
 
			// In my first tests I tried to use the orientationChange event but it doesn't work properly
			// and I'm not able to get the right stage size. I think there are some bugs 
			// in the current beta release.
			// this.stage.addEventListener("orientationChange", resizeHandler);
 
			// Force to position elements at startup
			positionAll()
 
 
		}
 
 
 
		/**
		 * Resize Handler
		 */
		private function resizeHandler(event:Event):void
		{
 
			outputTxt.text = "Stage Size: " +  this.stage.stageWidth + " - " + this.stage.stageHeight 
			 				+ "nDevice Orientation: " + this.stage.deviceOrientation ;
 
			positionAll();
		}
 
 
		/**
		 * Move elements in according with the new stage size
		 */
		private function positionAll():void {
 
			// Set the background color in according with the orientation
			var bgColor:uint ;
 
			if (this.stage.deviceOrientation == StageOrientation.ROTATED_LEFT)
				 bgColor = 0xff0000;
			else
				bgColor = 0xffcc00;
 
			// Redraw the background
			bg.graphics.clear();
			bg.graphics.beginFill(bgColor);
			bg.graphics.drawRect(0, 0,this.stage.stageWidth, this.stage.stageHeight);
			bg.graphics.endFill();
 
 
 
			// Move the Proceed Button in the BOTTOM-RIGHT corner with easing
			var myTween1:Tween = new Tween(proceed, "x", Elastic.easeOut, proceed.x, this.stage.stageWidth - proceed.width, 1, true);
			var myTween2:Tween = new Tween(proceed, "y", Elastic.easeOut, proceed.y, this.stage.stageHeight - proceed.height, 1, true);
 
 
		}
	}
 
}