How to design a flash based website when user has different screen size and different resolution ?

Question

I am developing a flash based website using mxml. My monitor's resolution is 1280x768 and is widescreen. The problem is while it appears properly in my screen it doesn't appear properly in others. Which is the best approach to solve the problem ?

I have 2 in mind.

1. Let scrollbars take care of it : If the screen is 14 inch screen with 800x600 resolution it appears zoomed in. So thats a problem
2. Get screen resolution and resize using scaleX and scaleY : The graphic components will get resized but fonts give problem.

Which is the best approach among these ? If there is a better approach please mention. Thanks

Answer 1

Personally I would develop the screen for 800x600 and then dynamically resize the screen for higher resolutions.

You can use vertical scrollbars but horizontal scrolling is a big no-no in my books. It takes away from the whole experience of your site and gets rather irritating.

Answer 2

The BEST approach for this is to create a fluent UI based on percentage and constraints. This way, the UI will feel the same on all computers not just yours.

I would recommend to also use the flow container that comes as a part of flexLib because that way is the easiest to create a fluent design.

Not long ago I created an application for a forex company that was perfectly fit to all screens larger then 1280X800 (design definition).

It's not that hard to do once you get the hang of it.

Good luck.

Answer 3

You can add an event listener to the stage to this effect:

this.stage.addEventListener(Event.RESIZE, resizeHandler);

private function resizeHandler(e:Event):void {
var newWidth:Number = this.stage.stageWidth;
var newHeight:Number = this.stage.stageHeight;

// etc, roll from here to do your manual positioning logic.

}

Note that this should also work on any DisplayObject - so you can use constraints and percentages on your containers, but then intercept their auto-resizing with a setup like this which will let you fine-tune the appearance of their contents.