Help with scaling

[quovadimus02]

I'm looking for some advice on how to achieve a scaling effect. My movie will be running at 100% width and height of the browser window and I'm looking to scale some elements based on how big the display area is. An example of what I'm trying to achieve can be seen here (Select "portfolios", "Gemma Booth Photographer", and then "Fashion". Then resize the browser window to see how the image and the nav scale. I know I need a stage resize handler function but I'm not sure how they get the elements to scale proportionally. Also how do they get the images to maintain a good resolution at all sizes? Any ideas and or thoughts are greatly appreciated.

[moagrius]

i just checked that link (and followed the clicks you mentioned), and there's no scaling. he's just got everything in one clip, aligns it to the vertical bottom and horizontal center.

[quovadimus02]

How do they set the minimum and maximum dimensions then? Cause it only scales so small and the same is true for how large it will get as well.

I started playing around a bit with some code and came up with this thus far. It scales proportionally to the stage width, but if the image is taller than the viewable area some of it gets cut off. Also need to figure out how to implement a minimum size ( 650x494) and a max size (1110x837). Any ideas on how to improve this?

code:

---

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

stage.addEventListener( Event.RESIZE, resizeHandler );

function resizeHandler( event:Event = null ) {

	var stageWidth:Number = stage.stageWidth;

	var stageHeight:Number = stage.stageHeight;

	if ( image_mc.width > image_mc.height ) {

		image_mc.width = stageWidth;

		image_mc.scaleY = image_mc.scaleX;

	} else {

		image_mc.height = stageHeight;

		image_mc.scaleX = image_mc.scaleY;

	}

} 

// Resize on init

resizeHandler();

---

[moagrius]

again, the link you showed, there is no scaling. nothing changes size.

but to answer your questions - you can just constrain that variable you're using, like so:

var stageWidth:Number = stage.stageWidth;
// make it AT least your minimum size
stageWidth = Math.max(stageWidth, 650);
// make it no larger than your maximum size
stageWidth = Math.min(stageWidth, 1110); 

then proceed as you were. do the same thing with stageHeight.

[quovadimus02]

Doh. No wonder I was having trouble figuring it out, I was making it way more complicated than it had to be with all kinds of conditional statements running through my head. Thanks for the help.

[moagrius]