Quirky AS3 browser resize Help Please!

programming flash
1

Hello All-

I have been battling against this browser resize issue for what seems like monthes. After several variations, my code is more effective, less concise and still not stable. I am basically trying to make my bg resize to the full browser and my site movieclip to center. If the browser gets smaller than the site MC then the site MC should constrain to fit in the browser. What I have right now works like 98% of the time, but still screws up and makes the site tiny or too big sometimes. I was hoping that someone else has gone through this and may be able to comment or drop in some good code. As I said mine got uglier and uglier as time went. I kind of hate this code. If I didn’t write it, I’d say the author was insane… which I kind of am.

anyhow, any help is mucho appreciated.

here’s the code for a look.


import gs.TweenLite;

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

var siteHeight:Number = 600;
var siteWidth:Number = 850;
var siteRealHeight:Number = 600;
var siteRealWidth:Number = 850;

var siteAspectRatio:Number = 850/600;
var theFactor:Number;
var stageOldHeight:Number = 600;
var stageOldWidth:Number = 850;

var resizetimer:Timer = new Timer(1500,3);
    
resizetimer.addEventListener("timer", firstResizeHandler);
    
init();

function init() {
    stage.addEventListener(Event.RESIZE, resizeHandler);
    TweenLite.to(site, 1, {scaleX:1, scaleY:1});
    resizetimer.start();
}

function firstResizeHandler(event:TimerEvent):void {    
position();
}

function resizeHandler(event:Event):void {    
position();
}

function position(){
    
    bg.width = stage.stageWidth;
    bg.height = stage.stageHeight;
    
    if(stage.stageWidth < siteWidth) {
        siteResizeWidth();
    }
    if(stage.stageWidth > stageOldWidth && stage.stageWidth < 850) {
        siteResizeWidth();
    }
    if(stage.stageHeight < siteHeight) {
        siteResizeHeight();
    }
    if(stage.stageHeight > stageOldHeight && stage.stageHeight < 600) {
        siteResizeHeight();
    }
    var siteX:Number = (stage.stageWidth)/2 ;
    var siteY:Number = (stage.stageHeight)/2 ;
    
    TweenLite.to(this.site, 0.5, {x:siteX, y:siteY});
    
    stageOldHeight = stage.stageHeight
    stageOldWidth = stage.stageWidth;
}

function siteResizeWidth(){
    theFactor = stage.stageWidth/stageOldWidth;
    site.width = (site.width*theFactor);
    
    siteWidth = (siteWidth*theFactor);
    siteHeight = siteHeight*theFactor;
    site.height = site.height*theFactor;
}

function siteResizeHeight(){
    theFactor = stage.stageHeight/stageOldHeight;
    site.height = (site.height*theFactor);
    
    siteHeight = (siteHeight*theFactor);
    siteWidth = siteWidth*theFactor;
    site.width = site.width*theFactor;
}

thanks for the help!
michael

2

First up, always use constants where you use listeners - TimerEvent.TIMER, instead of the string literal “timer”.

But the timer isn’t what you should be using - there’s an event Event.RESIZE that’s triggered when the stage is resized. Listen for that instead, as opposed to polling with a timer, which is what you’re doing.

I’m not sure why you’re tweening the background rather than just setting its width and height (possibly more predictable than setting its scaling directly?). All you should need is the width and height of the “fixed” portion of your site, and the aspect ratio. The current full stage size can be grabbed with stage.stageWidth and stage.stageHeight. Set your background based on whichever is greater, stageWidth or stageHeight.

3

I am using the stage resize event listener for everything except the initialization sequence. For some reason I was having some problems when the fiel loaded so I added the timer to make sure the position() function would fire when the page loaded. The major problem I am having is with maintaining the size integrity of the site movie clip which should always be centered and should constrain to the browser when the browser gets smaller than the site movieclip. The site movieclip should then get larger until it hits its original size when a user re-expands the browser. This is the functionality that is quirky. It seems to mess up the sizing every so often.

thanks for the reply btw.

anybody been down this road?