Adobe air 3.4 + auto orient

Report · Jun 17, 2013

I'm having trouble with getting the app I'm creating (using Flash professional CS6) to auto orient reliably. if the app is moved from portrait to landscape, it works fine. when moved back from landscape to portrait, then the screen items do not move to the desired spots. within each of the "if" statements I also have commands for setting where screen items within the milApp movie clip are to appear. Any help is greatly appreciated.

//function to set the stage orientation for the app;

function orientMilApp(event:Event):void

{

var device_width:int = appStage.stageWidth;

var device_height:int = appStage.stageHeight;

if (device_width > device_height)

{

milApp.gotoAndStop("landscape");

//set the height, width, and position of the cheat sheet;

milApp.cheatSheet_mc.x = 0;

milApp.cheatSheet_mc.y = 100;

milApp.cheatSheet_mc.height = 1657.25;

milApp.cheatSheet_mc.width = 1280;

milApp.closeButton_btn.x = 1200;

milApp.closeButton_btn.y = 101;

//set the dimensions and position of screen items for the driver manual

//set the dimensions and position of screen items for the reference manual

} else {

milApp.gotoAndStop("portrait");

milApp.closeButton_btn.x = 720;

milApp.closeButton_btn.y = 101;

//set the height, width, and position of the cheat sheet;

milApp.cheatSheet_mc.x = 0;

milApp.cheatSheet_mc.y = 100;

milApp.cheatSheet_mc.width = 800;

milApp.cheatSheet_mc.height = 1035.80;

//set the dimensions and screen items of the driver manual

//set the dimensions and screen items of the reference manual

}

appStage.addEventListener (StageOrientationEvent.ORIENTATION_CHANGE, orientMilApp);

Report · Jun 17, 2013

Initially I'd just recommend a couple things and need a little more info as well.

First I'd use the StageOrientation class to determine landscape or portrait, e.g.:

if (stage.orientation == StageOrientation.DEFAULT || stage.orientation == StageOrientation.UPSIDE_DOWN)
{
// portrait
}
else if (stage.orientation == StageOrientation.ROTATED_LEFT || stage.orientation == StageOrientation.ROTATED_RIGHT)
{
// landscape
}
else if (stage.orientation == StageOrientation.UNKNOWN)
{
// device is unable to determine (laying down? not activated/initialized yet?), check event later
}

Aside that what is your stage.align and stage.scaleMode set to? X/Y coordinates will change if you didn't anchor it to something like TOP_LEFT and NO_SCALE.

Report · Jun 17, 2013

i do have it anchored using TOP_LEFT and NO_SCALE. will i need to create a new class (.as file) to call the stage orientation class?

Report · Jun 17, 2013

You just need to import it if you haven't (the word is linked to the class in my post, flash.display.StageOrientation). They're just constants set up for ease of use.

Also you should always try to use the correct event type so you have properties you expect available so you should change that event handler signature from event:Event to: function orientMilApp(event:StageOrientationEvent):void

You're using explicit values for positioning (milApp.cheatSheet_mt.y = 100, etc). That's really hard wired to the device you're debugging on. Is that your actual intention? The app won't really be usable on any other device that doesn't conform to your numbers and expected resolution/form factor. If it's a personal app then it's even still a good idea to consider getting the devices resolution and basing your positioning on that rather than hard coding it.

Aside that can you explain more about what isn't positioning correctly and/or show any screenshots?

Report · Jun 17, 2013

right now, the app is going to be on one type of device. down the road, it will be on different devices, although they are more than likely to be tablet sized. That's why i was putting in the hard values. To achieve the same thing without hard coding (to save re-work in the future), I would need to base their locations off of the stage, correct (using milApp.x = stage.width/2, etc)?

Landscape Before

Portrait Mid

Landscape - After

Report · Jun 17, 2013

Just eyeballing it here but it looks like your portrait code is aligning the landscape view. Put a trace() in your code and check the console when you orient it to verify when you turn it back to landscape that the landscape code is firing off.

The star in the back appears to be aligning just fine. If you developed this in landscape it could be a good reason why initially it looks fine but after it enters landscape it goes haywire.

Report · Jun 17, 2013

i did the star in back as a graphic (made one for each state so they would look right). I am trying the stageOrientation script you suggested earlier, and have been having trouble getting that to work (not getting it to move to landscape)

i was able to get the orientation to work in the console...I had referenced the stage as a variable in an eariler section of code. once i got the variables to line up correctly, it seems to be working. I will have to chack it out on the device now

on the device...the frame reference seems to be reversed...

Report · Jun 18, 2013

It's why trying to be device agnostic is so important, which means staying away from specifics as much as possible. Things like hard coding resolution or using features on devices that aren't yet extremely common (NFC, etc).

Your device very well may consider DEFAULT/UPSIDE_DOWN to be what you call landscape. I haven't verified it but it would make sense on something like one of my old ASUS Transformers that're HD aspect displays. You'd probably consider holding it like a HD display (wide) before holding it thin and tall, so the default could be landscape.

So get used to just measuring what the device reports as the area you have available and then you'll need some layout logic to best use that space. Having said that, perhaps you'd want to go back to detecting if the available width or height is greater to handle that situation how you see fit.

Is the orientation change event firing off for you at all? If so are you tracing the stage.orientation property to see what it thinks the orientation is?

Report · Jun 19, 2013

it does appear that the device that this app will be used on most (Samsung Galaxy Tab 2 10.1) has landscape as it's default. to get it to work - for right now - i just reversed the code for the default and rotated left/right. down the road I will have to get this to work on other devices (and possibly iPads), so I will need to do less hard coding. In order to do this, what would be the most effective way? I have a header image that I could reliably (based on any device) set a zeroes (x and y). Should I base all other screen items off of that, or try using stage commands (stage.width/2) etc.?

Report · Jun 19, 2013

Having not known the devices you want this to be on, I'd go back to simply measuring the devices resolution width versus height and translate that into landscape or portrait. All you calculations should be based on the returned resolutions for placement of items. It will require somewhat of a layout engine and for you to clearly mark what device resolutions you support.

For instance it's pretty easy to handle Apple because you're really only dealing with 1024x768 or 2046x1536 and portrait is DEFAULT. However if you're just measuring device width and height, you'll still get the same result, portrait, from your measurements.

Android is really rough but gives you more granular control over the minimum and maximum size and resolution of the device. You can clearly mark in your apps android settings that you only support say, 7"-10" devices with a resolution of a certain size (marked as ldpi, mdpi, hdpi, xhdpi). For more info and what all those settings mean, read here: http://developer.android.com/guide/practices/screens_support.html

xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

Staying inside xlarge keeps you in the 7-10" safe range for a larger tablet like the Galaxy.

Report · Jun 19, 2013

Thank you very much for helping me with this. More than likely i will be designing apps for the samsung tablet (for the next couple years at least) but need to have it able to deal with other devices as they pop up . I'm currently learning this as I do this, so some of this will need to be "get it out there right now" fixes with the hopes of cleaning it up in later versions.

Report · Jun 19, 2013

The store will bounce your app off if it doesn't play nicely with all devices that conform to the specs you require. For example if you say you support xlarge screens then it needs to work on almost all reasonable devices in this range. To force it to work on only higher end tablets, stick to requiring xhdpi and maybe even hdpi so the pixel density is high. In other words, it's not just a cheap $89 7" tablet because it will have a low end CPU, GPU and low pixel density (e.g., not a Galaxy). Otherwise you risk the store denying or pulling your app off if users complain.

You're welcome and if you're all set please mark any helpful/correct answers so we can filter unanswered. Good luck!