Archived:How to make a Flash Lite application running in any screen orientation

Article Metadata

---

Compatibility

Platform(s): Flash Lite 2.x

---

Article

Created: soueldi (01 Jun 2007)

Last edited: hamishwillee (05 Oct 2011)

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

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.