• flickr
  • linkedin
  • twitter
  • rss
Rescale Module Wrapper

Rescale Module Wrapper

This is a pretty handy wee class, for if you make something you want to scale down, but not scale up when the screen size is bigger.

So all you need to do is wrap your module into a .swf built off this class, and in the HTML set the width/height of the flash box to 100%. (Also rename the URLrequest on line 37 to whatever your .swf is called).

package  
{
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.StageScaleMode;
import flash.display.StageAlign;

/**
 * ...rescales the module down as required, or centers it if able.
 * @author lblair
 */
public class Wrapper extends MovieClip
{
var module:MovieClip; 
var moduleSize:Object; // module size in pixels, width and height.
var p:Number; // percentage scale that the module is at.

public function Wrapper() 
{
addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event):void 
{
removeEventListener(Event.ADDED_TO_STAGE, init);

// set scalemodes.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;


// load module
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
loader.load(new URLRequest("shell.swf"));
}

private function loadCompleteHandler(e:Event):void 
{
module = MovieClip(e.target.content);
moduleSize = {height:module.height, width:module.width}; // set the height and width of the module, so we can rescale as required using those as percentages.
addChild(module);

addScaleListeners();
resizeHandler();
}

private function addScaleListeners():void
{
stage.addEventListener(Event.RESIZE, resizeHandler);
}

/// gets the stage size, versus the modules base size, and rescales down if the stage is too small, or centers the module if it's too big.
private function resizeHandler(e:Event = null):void 
{
// get heightpercentage and widthpercentage. We then rescale based on the smaller of the two.
var hp:Number = stage.stageHeight/ moduleSize.height;
var wp:Number = stage.stageWidth / moduleSize.width;

var tp:Number; // targetPercentage. which percentage we use to do the calculation.
if (hp < wp? tp = hp:tp = wp); // set which percetnage to use for our scaling. 

if (tp < 1) {
// rescale and center
module.scaleX = module.scaleY = tp;
} else {
// center it at scale:1.
module.scaleX = module.scaleY = 1;
}
module.x = stage.stageWidth / 2 - module.width / 2;
module.y = stage.stageHeight / 2 - module.height / 2;
}

}

}
Tech Reference:

Larry's a 30-something chap interested in travel, being a dork and changing the world via less boring training.

Leave a reply