Question

i want to build a project base on actionscript3.and it needs to re-size its stage area to fit the the customer’s web browser’s viewing size or fit it when customer change the web browser’s size.

There is no fixed aspect ratio but have a minimal(for example 640×480) size and a maximum size(1600×1000). when the customer’s web window’s length is less than the minimal size , a scroll bar would appear in that dimension ,so the user can see the whole stage using scroll bar .when customer’s web window’s size is larger than maximum size ,the flash application would appear at the top-center.and it needs to be working on most of the web browsers including IE 6.

when the stage size is changed ,the content on the stage wouldn’t scale.in my case,the project has dozens of view,every view needs to handle size change and rearrange their elements, i thought this would be a huge work,so need any suggestion to build a project like this.

Answer 1

Firstly, the resizing will be managed by JavaScript / CSS, not ActionScript. That said, there are some things that you need to do in ActionScript to prepare for this behaviour.

Firstly, you mentioned that you don’t want all of the content in the SWF to scale with the web page. To counter this default behaviour, you need to change the scale mode that the stage will use:

stage.scaleMode = StageScaleMode.NO_SCALE;

Another thing that I find makes scalable websites easier to work with is to set the top-left corner of the SWF to 0,0. By default if you scale up a SWF, 0,0 will remain in the same place with some ‘padding’ representing the new size. By that I mean, if you scale up the SWF by 200 pixels across and it was originally 400 pixels across, 0,0 will fall 100 pixels into the SWF from the left side rather than representing the top-left corner. Here’s what you can do to correct that:

stage.align = StageAlign.TOP_LEFT;

These two things will help your embedded SWF act in a more expected manner which will likely help you throughout your project.

Finally, you mentioned that you have many viewable objects on the screen that need to react to the stage / browser window being resized. This is quite easy to deal with using Event.RESIZE. You can attach a listener to the stage to deal with this event and pass information across to each of your viewable objects reflecting the changes.

You can create a class that has a handleResize() method, which will be a base class for your view objects:

class ViewComponent extends Sprite
{

    public function handleResize(width:int, height:int):void
    {
        trace(width, height);
    }

}

Each of these objects can be listed within another class that manages the overall view, like this:

class ViewManager extends Sprite
{

    public var viewComponents:Vector.<ViewComponent>;


    public function ViewManager(stage:Stage)
    {
        viewComponents = new Vector.<ViewComponent>();
        stage.addEventListener(Event.RESIZE, _manageResize);
    }


    private function _manageResize(e:Event):void
    {
        for each(var i:ViewComponent in viewComponents)
        {
            i.handleResize(e.target.stageWidth, e.target.stageHeight);
        }
    }

}

This way you can simply list your ViewComponents within the ViewManager and deal with each appropriately in it’s own class by overriding handleResize().