We had a similar solution. We created a Group that is a child of the
application. This allows us to have different applications but thesame
main group. The reason is we can then use different CSS style sheets
for different application targets.
Then in the application resize we check for the minimum width:
protected function application1_resizeHandler(event:ResizeEvent):void
{
resizeApplication();
}
protected function resizeApplication():void {
if (!systemManager) return;
var visibleWidth:Number =
systemManager.getVisibleApplicationRect().width;
var visibleHeight:Number =
systemManager.getVisibleApplicationRect().height;
// if the visible area is less than our content then scale down
if (visibleHeight < ApplicationModel.APPLICATION_MIN_HEIGHT ||
visibleWidth < ApplicationModel.APPLICATION_MIN_WIDTH) {
var smallestScale:Number =
Math.min(visibleHeight/ApplicationModel.APPLICATION_MIN_HEIGHT,
visibleWidth/ApplicationModel.APPLICATION_MIN_WIDTH);
parentGroup.scaleX = smallestScale;
parentGroup.scaleY = smallestScale;
}
else {
parentGroup.scaleY = 1;
parentGroup.scaleX = 1;
}
}
On Fri, Apr 12, 2013 at 1:18 PM, atauri <[email protected]> wrote:
> Hi, I am using the following function, and it works like a charm to me.
> First I designed the interface for 1280*800 (using phtoshop) and then
> positioned the elements in pixels (no anchors, or relative position). It
> scales great to any phone, tablet even desktop. Hope it helps.
>
> //escalar al dispositivo (se diseñó para 1280*800)
> xScaleFactor=this.width/1280;
> yScaleFactor=this.height/800;
> ScaleFactor=Math.min(xScaleFactor,yScaleFactor);
>
> trace("ancho del dispositivo:
> "+FlexGlobals.topLevelApplication.width);
> trace("dpi del dispositivo:
> "+FlexGlobals.topLevelApplication.applicationDPI);
> trace("scalar por "+ ScaleFactor);
>
> //scalar para el dispositivo
> FlexGlobals.topLevelApplication.scaleX=ScaleFactor
> FlexGlobals.topLevelApplication.scaleY=ScaleFactor;
>
>
