Skip to main content
A
Anonymous
August 17, 2011
Answered

Proper way to scale assets for multiple devices

  • August 17, 2011
  • 3 replies
  • 991 views

I am working on an ActionScript Mobile app which I intend to build for iphone 3gs, iPhone 4 and iPad 1&2.

What is the correct way to scale assets such as background images so that I may be able to use the same graphical assets for all of the mobile devices above?

Using AIR 2.7 and in my app descriptor file I have specified "cpu" for renderMode and "true" for fullScreen. From what I have read, the fullscreen bug in AIR 2.7 is only present when using gpu as the rendermode w/ fullscreen, so I don't think that is what is going on.

I have a background image which is supposed to fill up the entire screen for all devices. This image is in a swc file and has these dimensions: 960 x 640

In my main class I have included the following:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

When I test on iPhone 4, it looks fine and fills up the entire screen as expected. When I test on iPad 1, the image is not wide enough and is a bit too short. Shouldn't the following code force the background image to fill the entire screen regardless of device?

backgroundImage.width = stage.stageWidth;
backgroundImage.height = stage.stageHeight;

Instead, it makes the backgound really small in the upper left hand corner for all devices. Can someone shed some light here?  I am stumped.

Hopefully I am doing someone stupid and it is an easy fix..Thanks!

This topic has been closed for replies.
Correct answer sanika Kulshreshtha

I have it inside the onEnterFrame event and that seems to automatically detect it on start up and when the phone orientation changes, never had a problem with it. They way I am doing it is probably a little resource consuming because as I understand it onEnterFrame events tax the system a lot so if you listen for an orientation change it will still work and probably work better and your app will run smoother. Let me know if you work it out I can probably update the way I do it


This is a known bug that stageHeight and stageWidth are get correct if you query for them in the constructor. You need to listen for Resize event. As I understand, this is an acceptable workaround. Please let us know if it breaks your application in any way.

Thanks,
Sanika

3 replies

A
Anonymous
August 18, 2011

Thanks for all the responses! I am basically doing what Colin suggested, listening for resize event at startup. I then set the values of two variables to stage.stageHeight and stage.stageWidth,  last I remove the listener since my app is fixed to portrait orientation

A
Anonymous
August 17, 2011

Here is what I have been doing. Do what you did by scaling the stage to the top left and fill the entire screen.

Now set up an onEnterFrame event to give your background image dimensions. Since you want one image to work for all the devices it has to be an image that works even if part of it is not showing so design with that in mind.

So lets say your image is iPad screen size 768 wide x 1024 tall. I pad is a 3/4 screen ration so 3 wide by 4 tall in proportion.

Set up a variable that measures the screen ratio, so something like

var frameRatio = stage.stageWidth / stage.stageHeight;

this will return a result of 0.75 or 3/4

Now since you know this you can set up an if else statemenet (excuse my sloppy code, do not copy paste)

if (frameRatio >= 0.75)

backgroundImage.height = stage.stageHeight;

backgroundImage.scaleX = backgroundImage.scaleY <------ this will scale the image proportionally to match the height.

else if (frameRatio < 0.75)

backgroundImage.wdith = stage.stageWidth; <------ notice if its less than .75 we now make the image first fill the stage to the stage's width

backgroundImage.scaleY = backgroundImage.scaleX  <---- notice these are flipped so now we proportionally scale the height based on the width

This works well for me even with orientation changes. Its easiest to set you background image point of refrence to the center and then orient it by simply dividing the stageWidth and stageHeight by 2 for the x and the y values respectively.

Let me know if that helped at all I can post an actual line of code if need be.

A
Anonymous
August 17, 2011

Thanks InklingNest for the tips. Do you listen for the resize event on startup in order to obtain the actual stage.stageWidth and stage.stageHeight??

A
Anonymous
August 17, 2011

I have it inside the onEnterFrame event and that seems to automatically detect it on start up and when the phone orientation changes, never had a problem with it. They way I am doing it is probably a little resource consuming because as I understand it onEnterFrame events tax the system a lot so if you listen for an orientation change it will still work and probably work better and your app will run smoother. Let me know if you work it out I can probably update the way I do it

Colin Holgate
Colin Holgate
Inspiring
August 17, 2011

You have to look at the stage size at the right time. Try using a resize event on startup, and look at the stage size then.

A
Anonymous
August 17, 2011

Thanks, it didn't occur to me to listen for the resize event since I figured nothing is really being resized on the mobile device as would be the case with a desktop browser. You would think that as the app is firing up on a given mobile device that it would be aware of fullscreen stage width and height  during initialization...

Thanks again!

B
boat5
Inspiring
August 17, 2011

fyi that fullscreen /gpu bug on iOS was corrected a few weeks back in the updated 2.7 SDK

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices