Problem
I'd like a brief example of how to scale assets, such as bitmap images, for use on multiple screens. For example, using a bitmap in a desktop application and in a mobile application.
Solution
If you want to scale assets, you can do that by getting the stage width and height, and based on that info, either scale down or reposition the graphics. Detailed explanation has the code but in general it's listening for the stage. RESIZE, and then adjusting graphics accordingly.
Detailed explanation
/*SCALE CONTENT*/
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
function setPosition():void
{
//Always place the bike in the upper right
theBike.x = stage.stageWidth - theBike.width;
//Stretch the footer, but dont' distort it!
theFooter.width = stage.stageWidth - 10;
theFooter.y = (stage.stageHeight - theFooter.height)-5;
nav.x = stage.stageWidth/2;
nav.y = (stage.stageHeight - theFooter.height)-5;
//Adjust the text box width and height
theText.width = stage.stageWidth - 50;
theText.height = (stage.stageHeight - theText.x) - 250;
//theTitle.x = stage.x;
//Always place the scrollbar to the right of the text
myScrollBar.x = theText.x + theText.width;
myScrollBar.height = theText.height;
//Update the scrollbar
myScrollBar.update();
//if there is no content to scroll, remove the scrollbar
if (myScrollBar.enabled)
{
myScrollBar.visible = true;
}
else
{
myScrollBar.visible = false;
}
//Change the number of columns based on the width
if (stage.stageWidth < 500)
{
theText.columnCount = 1;
}
else if (stage.stageWidth > 500 && stage.stageWidth < 800)
{
theText.columnCount = 2;
}
else if (stage.stageWidth > 800)
{
theText.columnCount = 3;
}
}
setPosition();
//Resize layout
stage.addEventListener(Event.RESIZE, resizeLayout);
function resizeLayout(e:Event):void
{
setPosition();
}
I did an eSeminar on this topic last week and you can find the recording here: http://seminars.adobe.acrobat.com/p66321764/. You can grab the assets at: http://dl.dropbox.com/u/4132308/FlashMultiscreen.zip.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Report abuse
