Categories: How To | Flash Lite | Code Examples | UI | Usability

This page was last modified 18:32, 2 October 2007.

From Forum Nokia Wiki

Compatibility: Flash Lite 2.x

Some S60 3rd edition devices permit to switch between portrait and landscape orientations, natively (like N93, N95) or using a third party application (like N73, N80 using an application as rotateMe).

By default, Flash Lite applications only support one screen size (defined in the Document Properties dialog box).

If an application is launched in a screen size other than that defined, flash player will resize the document and add borders on two sides of the application.

A Flash Lite application in portrait mode

The same application in landscape mode

Using external SWF files

• Create two SWF files, one is your application optimized for portrait orientation, the other for landscape orientation.
  In this example, we will call them myApp_portrait.swf (240x320) and myApp_landscape.swf (320x240)

A frame optimized for portrait orientation

The same frame optimized for landscape orientation

• Create a new Flash Lite application (myApp.swf)
• Change the document length and width to their possible maximum value (here 320x320) using the Document Properties dialog box
  
• In the first keyframe of your myApp.fla file add this code:

stop();
 
fscommand2("FullScreen", true);
 
/* Set scaleMode to "noScale" setting: the SWF will not be scaled
when the size of the screen device changes*/
Stage.scaleMode = "noScale";
 
//Set the current alignment of the Flash movie to "Top Left"
Stage.align = "TL";
 
// Create a new movie Clip
this.createEmptyMovieClip("container",this.getNextHighestDepth());
container._x = 0;
container._y = 0;
 
//Detect the screen size and load the correct file
if (Stage.width == 240) {
	container.loadMovie("file://E:/Others/myApp_portrait.swf");
} else {
	container.loadMovie("file://E:/Others/myApp_landscape.swf");
}

• Launch myApp.swf, your application will be adapted to the current screen orientation.

In your two swf's files, don't refer to the _root level. Change all your references to _root by the movie clip instance name given in the main SWF (here container)

Using a single SWF file

This method is similar to the preceding one, but instead loading external SWF files, it will load internal movie clips.

• Create a new Flash Lite application (myApp.swf)
• Change the document length and width to their possible maximum value (here 320x320) using the Document Properties dialog
• In the first keyframe, add this code:

stop();
 
fscommand2("FullScreen", true);
 
/* Set scaleMode to "noScale" setting: the SWF will not be scaled
when the size of the screen device changes*/
Stage.scaleMode = "noScale";
 
//Set the current alignment of the Flash movie to "Top Left"
Stage.align = "TL";
 
//Detect the screen size and load the correct movieclip
if (Stage.width == 240) {
	_root.attachMovie("portrait_mc","portrait",10);
 
} else {
	_root.attachMovie("landscape_mc","landscape",10);
 
}

• Create a movie clip:
  • Select Insert -> New Symbol... -> Select Movie Clip and give it a name
  • Select Export for ActionScript and set identifier to portrait_mc

Click to enlarge

• • In this movie clip create a layer called background. This layer have to be always in background.
  • In the first keyframe of the background layer, Draw a rectangle with this properties:
    The fill color have to be the same as the document background color. (You can fill it with an another color during development, in order to see their borders.)
  • Create your application optimized for portrait orientation mode in this movie clip. Don't draw anything beside the background rectangle.

• Repeat all this operations with a "landscape_mc" movie clip and a 320x240 size rectangle.

• Launch myApp.swf, your application will be adapted to the current screen orientation.

Download

You can download an example with source code here:

This Flash Lite 2.x application get and show informations about the 5 five latest Nokia devices. It use RSS feeds and XML Flash Lite methods. Latest_Nokia_Devices supporting portrait/landscape modes