Category: Flash Lite

This page was last modified 22:14, 24 September 2008.

From Forum Nokia Wiki

Purpose of this article

Please comment on the comment tab The problem of not knowing if the phone is on portrait or landscape orientation is quite annoying. Especially when the landscape mode scales the fonts down so that . I wanted to make a very simple template for some of my own projects. This article is showing how I did it and to share my template with you. This is just one way of making sure your application looks O.K. in both screen orientations in 240 x 320 pixel (QVGA) phones. I'm working on an even more flexible and work with any screen orientation.

There is a great article about dynamic layouts here: http://www.adobe.com/devnet/devices/articles/dynamic_layout.html

Here's another article about the same in this Wiki How to make a Flash Lite application running in any screen orientation

Square stage

First, I started my application with a 320 x 320 pixels stage. I made the background abstract. So it's suitable for both portrait and landscape, since it will not rotate. (see attached .fla)

UI components

Then I create movieclips for the title, softkey area and the actual real estate of my application. I made them coloured and with outlines for easier handling. If you do not like the colours, go ahead and change them ;o). I keep the colours on the FLA, but change or remove them at runtime with actionscript. The title is supposed to be just shortly popping up in landscape mode. and always visible in portrait. The real estate area is 240 x 240 so it will not get resized, giving me full control. The Sofkey area is designed so, that the texts will not be resized either.

Freeze the stage

Then I made sure the stage stays put and is fullscreen.

Stage.scaleMode = "noScale"; // Prevent movie from resizing if browser window resizes.
Stage.align = "LT"; // Fix the stage to the top left corner.
fscommand2("Fullscreen", true); //Set to full screen.

This means I can anchor my real estate to wherever I wish.

detecting the orientation switch

Next, I start sniffing for the softkey change with setInterval:

setInterval(TurnMe, 100);

This might be a bit crude, but I really have not fóund a way to detect the orientation switch, at least not in most devices. The following little bit still helps me to skip the function if there's no change.

if(softKeyLocation != PreviousOrientation){ // do only if different from previous

how to use the template

Now what I do, is I just place the actual content inside the real estate element and my title inside the title element, and change the softkey labels to reflect the actual functionality and publish. This can be done with Actionscript or by editing the UI components by clicking on them and editing inside.

the template .fla

I have attached the fla for your convienience ;o) Image:DynamicLayout.zip

(Click on the link above and then download from the page that opens)