Change View State Based On Screen Orientation?

Report · Jan 09, 2011

I'd like my app to change layouts based on the current screen orientation. I believe this is done through view states. I have three questions...

1) How do I check the current orientation?

2) Is there an event listener that will tell me when the orientation changes?

3) How do I toggle between view states?

Thank in advance!

UPDATE: I figured out the answer to question 3...

currentState = 'yourStateName';

UPDATE II: I figured out the answer to question 1 as well. I simply used the Capabilities object to determine the screens current width & height, then compare the two. All of this is in a function that gets called when the app launches:

public function checkOrientation():void {

var screenWidth:Number = Capabilities.screenResolutionX; var screenHeight:Number = Capabilities.screenResolutionY;

if (screenWidth > screenHeight) {currentState='yourStateName1';} else if (screenWidth < screenHeight) {currentState='yourStateName2';}

}

Now all I have to do is figure out how to call this function when there is an orientation change. I tried the code below but get the included error:

stage.addEventListener(Event.RESIZE, checkOrientation); // ERROR: Access of undefined property stage

Why can't access the "stage" property???

Report · Jan 10, 2011

I think you have to wait for added to stage:

protected function mobileapplication1_addedToStageHandler(event:Event):void { removeEventListener(Event.ADDED_TO_STAGE,mobileapplication1_addedToStageHandler);
if(stage.autoOrients) {
     stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, onOrientationChange);
}
protected function onOrientationChange(event:StageOrientationEvent):void {
     //your code
     //dispatchEvent(new UIEvent(UIEvent.ORIENTATION,[stage.stageWidth,stage.stageHeight, event.afterOrientation]));
}

Report · Jan 10, 2011

Hello Marek,

I'm still running into the same issue. It says "stage" is a null object!?!?!?!

Report · Jan 10, 2011

Add the resize listener to stage when loading of swf is complete. For that write this piece code:

loaderInfo.addEventListener(Event.INIT, initHandler);
in initHandler function, execute below line:

stage.addEventListener(Event.RESIZE, checkOrientation); // ERROR: Access of undefined property stage

Report · Jan 11, 2011

Hello Syed,

I tried your suggestion, now I get an error stating "1120: Access of undefined property loaderInfo". Not sure if this is relevant, but I'm using Flash Builder Burrito rather than Flash CS5.

Report · Jan 11, 2011

Just tried this in Flash and can confirm it works. This is the entire Document class. You should be able to adapt it:

package 
{
     import flash.display.*;
     import flash.events.*

     public class Main extends Sprite 
     {
          
          // document class constructor
          public function Main():void 
          {
               this.addEventListener(Event.ADDED_TO_STAGE, addedToStage);
          }

          private function addedToStage(event:Event)
          {
               trace ("added to stage")
               stage.addEventListener(Event.RESIZE, stageResized);
          }

          private function stageResized(event:Event)
          {
               trace ("stage resized")
          }
     }
}

Report · Jan 11, 2011

Hello Banzai76,

I've spent the last couple of hours trying to implement your example is Flash Builder. I can't seem to get it to work. Has anyone here gotten any of the above suggestions to work in Flash Builder Burrito?

Thanks!

Report · Jan 12, 2011

Have you tried using the NativeApplication.nativeApplication in place of Stage?

instead of "stage.addEventListener"

try using:

"NativeApplication.nativeApplication.addEventListener"

Report · Jan 12, 2011

@naknike

I've used the addToStage property to add the event listener, that part is working great.

Where I'm stuck at is getting the current window size when the app first starts. I tried Capabilities.screenResolutionX / Capabilities.screenResolutionY. That simple returns the dimensions of the screen in general, not the demensions at that point in time.

Any thoughts?

Report · Jan 12, 2011

Once 'addedToStage' has been called, it should be safe for you to access stage.stageWidth and stage.stageHeight.

If you get a stage 'null' error in the addedToStage event handler then something is very, very wrong.

Although the thought occurs that if your addedToStage event handler is in a class that doesn't extend sprite, movieclip, or another display object class, then stage will always be null.

In this case you could reference the stage from the event object which is passed to the addedToStage method, i.e. event.target.stage (and hence event.target.stage.stageWidth).

Report · Jan 13, 2011

I have it working! I feel like it's a hack of sorts, as I'm sure there is a better way of doing it. Until I figure it out this will do though.

Something that slowed the process was the built in emulator in Flash Builder. My code works flawlessly on my EVO and on the Blackberry PlayBook emulator, but not so much in Flash Builder. I also noticed that certain graphics don't position themselves correctly in the Flash Builder emulator.

Here is what I did...

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" title="Home"

addedToStage="addedToStage()" creationComplete="checkOrientation()">

<s:states>

<s:State name="horizontalState"/> <s:State name="verticalState"/> </s:states> <fx:Script> <![CDATA[

// FUNCTION THAT RUNS addToStage

// EVENT LISTENER IS SETUP HERE

public function addedToStage(event:Event = null):void { stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, checkOrientation); }

// FUNCTION THAT SWITCHES VIEW STATES

// CALLED FROM addToStage & creationComplete

private function checkOrientation(event:StageOrientationEvent = null):void { if (stage == null) { width = Capabilities.screenResolutionX; height = Capabilities.screenResolutionY; } else { width = stage.stageWidth; height = stage.stageHeight; } if (width > height) {setCurrentState('horizontalState');} else {setCurrentState('verticalState');} }

]]> </fx:Script>

<s:TextInput id="field1" y="45" text="field 1" x.horizontalState="33" width.horizontalState="40%" width.verticalState="80%" horizontalCenter.verticalState="0"/> <s:TextInput id="field2" y="45" text="field 2" right.horizontalState="20" width.horizontalState="40%" y.verticalState="131" width.verticalState="80%" horizontalCenter.verticalState="0"/> <s:Button y="232" label="Check Orientation" click="checkOrientation()" y.horizontalState="156" horizontalCenter.horizontalState="0" horizontalCenter.verticalState="0"/> </s:View>

What I don't like is that the checkOrientation function initially runs before the stage is created. This means that I can't use stage.stageWidth & stage.stageHeight to get the width/height at that particular moment. Instead I'm using Capabilities.screenResolutionX / Capabilities.screenResolutionY, which gives you the width/height at the time the app was first opened. Subsequent calls use the stage properties instead though.

Report · Jan 13, 2011

In theory you can simplify it by replacing this line:

addedToStage="addedToStage()" creationComplete="checkOrientation()">

with this (so get rid of addedToStage completely):

creationComplete="waitForStage()">

and add this method:

     public function waitForStage():void
     {
         this.addEventListener(Event.ADDED_TO_STAGE, checkOrientation);
     }

Report · Jan 13, 2011

I tried the same approach earlier, but 1 or 2 things always happen...

Flash builder threw an error stating that I couldn't use "this"
The event listener was not added properly

Report · Jan 27, 2011

Correct syntax for Flash Builder to access the stage is "systemManager.stage".

I've been stumped by this more than a few times myself since moving to Flex/Flash Builder.

Hopefully your problem is fixed by now, but anyway, hope that helps.

Report · Jun 09, 2011

Hi,

I work on platform using flash bulider 4, later i finsh the platform but i meeting one problem is resize project to work with diffrent size screen, but i can't solve the problem, i need platform work with diffrent Screen Orientation without problem could some help please, this that what i done in code please help.

Thanks,

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:rtc="http://ns.adobe.com/rtc" width="100%" height="100%" backgroundColor="#51575D">
       <fx:Style source="Client.css"/>
         <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import flash.events.FullScreenEvent;


            protected function txtUsername_enterHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                connectRoom.login();
                labelUsername.visible = false;
                txtUsername.visible = false;
            }

            function fullScreenRedraw(event:FullScreenEvent):void
            {
                if (event.fullScreen)
                {
                    width = Capabilities.screenResolutionX;
                    height = Capabilities.screenResolutionY;
                }
                else
                {
                    width = stage.stageWidth;
                    height = stage.stageHeight;
                }


        ]]>
    </fx:Script>

       <fx:Declarations>
         <s:Move duration="500" id="moveEffect"/>
        <s:Resize duration="500" id="resizeEffect"/>
    </fx:Declarations>

              <mx:Image x="0" y="0" width="100%" height="100%" scaleContent="false" autoLoad="true" source="greenbackground.png"/>
                                 <rtc:ConnectSessionContainer horizontalScrollPolicy="off" verticalScrollPolicy="off" id="connectRoom" autoLogin="false"
                                       roomURL="https://collaboration.adobelivecycle.com/account/yourroom"
                                       y="20" width="95%" height="90%" backgroundColor="#212D4B" contentBackgroundColor="#F6F6F0" borderAlpha="1.0" cornerRadius="30" contentBackgroundAlpha="1.0" backgroundAlpha="0.4" x="33" dropShadowVisible="true" borderVisible="true">
                    <rtc:authenticator>

                            <rtc:AdobeHSAuthenticator userName="{txtUsername.text}"/>
                 </rtc:authenticator>
                      <rtc:SimpleChat width="293" height="258" x="2" y="165" chromeColor="#384D91"/>

                       <rtc:WebcamSubscriber y="4" displayUserBars="true" width="292" height="158" x="2"/>
                 <rtc:AudioSubscriber id="audioSub" width="0" height="0"/>

                                     <rtc:FileShare height="135" width="290" x="5" y="425" chromeColor="#284C79"/>

                    <rtc:ScreenShareSubscriber id="scrShare" width="81%" height="99%" y="4" x="299"/>
    </rtc:ConnectSessionContainer>

    <s:Label id="labelUsername" y="230" text="   Enter a username and press Enter:" color="#B5C40D" fontWeight="bold" horizontalCenter="0"/>

    <s:TextInput y="250" width="229" textAlign="center" id="txtUsername" enter="txtUsername_enterHandler(event)" color="#090909"
horizontalCenter="0" height="27" fontWeight="bold" borderAlpha="0.99" contentBackgroundColor="#989A9C"/>

</s:Application>

Report · Jun 09, 2011

package {
    import flash.display.Stage;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.display.MovieClip;

    public class Main extends MovieClip {
        //variable declaration

        public static var _sw:Number=0;
        public static var _sh:Number=0;
        //Stage and Timeline Reference
        public static var stage:Stage;
        public static var root:MovieClip;

        public function Main():void{
            //inside constructor
            stop();
            //Assigning root and the stage for future ref
            Main.stage = this.stage;
            Main.root = this;
            _sw=stage.stageWidth;
            _sh=stage.stageHeight;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(Event.RESIZE, resizeHandler);
            drawGaphics();
        }

Report · Jun 10, 2011

relaxatraja,

Thnaks too much for help, last question if i want use the same code to PC not mobile device, so package the same or have other way,

for example i want fit siez with diffrent screen for users when using diffrent screen computer size not meet any porblem with platform size on computers,

so is the same pakage or need to add code direct in the project using flash bulider like i post up there, please any ideas will be helpful to me.

Best,

Report · Jun 10, 2011

The code will suit to both. You can have a quick check with the following code for different mobile dimensions:

}

statustxt is a textbox placed on the stage which shows the dimension of the stagesize on destop and mobiles.

Adobe Community

Change View State Based On Screen Orientation?