Search code examples
actionscript-3flashairresolutionmobile-application

How to make a fluid/liquid Air application using Flash?

What I need is take advantage of the all area of the screen, independent of user's screen proportions. By default, Air apps scales proportionately from the inside out. This would be great if we hadn't so different screens sizes and proportions in Android.

Angry Birds is a good example of what I call of fluid layout, it always scales/zooms the three layers(front, game and background layer) accordinly.

My app is mostly a inteface based game, the user must see some info and click on some buttons. I think I could base my scale primarily in the user screen's width, and use a scroll if needed. The problem is how do that.

Solution

  • Fluid / liquid / responsive layouts would likely imply a layout manager of some kind.

    This functionality is built in to Flex.

    Per Flash, and more specifically to what you've noted per requirements it sounds like some basic scaling and positioning is what you desire.

    Layers

    As you've noted, different layers will have different requirements per scaling:

    • background
    • game play
    • interface / controls

    Background and game play might be a single layer; however, you may want different constraints on the foreground user controls for readability and interaction.

    Setting up the stage

    If you want to control scaling, you should set:

    import flash.display.StageAlign;
import flash.display.StageScaleMode;

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

    This also assists with orientation change of mobile devices swapping between portrait and landscape.

    Browsers can be resized; so, you need to listen for resize events:

    stage.addEventListener(Event.RESIZE, resizeHandler);
stage.dispatchEvent(new Event(Event.RESIZE));

function resizeHandler(event:Event=null):void
{
    /* scale code ... */
}

    Positioning

    Top and left positioning are always easy, because top-left is 0x0 coordinate. Right and bottom require subtracting a DisplayObject width from stage.

    Right align example:

    mc.x = stage.stageWidth - mc.width;

    Bottom align example:

    mc.y = stage.stageHeight - mc.height;

    Keeping something in the center of the stage:

    mc.x = (stage.stageWidth * 0.5) - (mc.width * 0.5);
mc.y = (stage.stageHeight * 0.5) - (mc.height * 0.5);

    Scaling

    You need to determine what your constraint is to avoid blank / empty regions on the stage.

    This can be implemented using a ratio variable:

    var ratio:Number = 1.0;

    Proportional scaling:

    ratio = stage.stageWidth / gameMovieClip.width;
gameMovieClip.scaleX = ratio;
gameMovieClip.scaleY = ratio;

    Stretch display object to fit stage:

    gameMovieClip.scaleX = stage.stageWidth / gameMovieClip.width;
gameMovieClip.scaleY = stage.stageHeight / gameMovieClip.height;

    Best fit algorithms require fitting the minimum constraint of your display object within a bounds. There are libraries that can assist with this, such as Greensock auto fit area.

    auto-fit-area

    Virtual Cameras

    Virtual cameras have been popular in Flash. The concept is that you design your view then pan and zoom a camera to show a specific region.

    O'Reilly ActionScript for Non-Coders

    v-cam

    Virtual camera FLA example:

    Virtual camera example:

    Google "Flash virtual camera" or "Flash v-cam" for examples.