Obeying browser text size changes when using noScale

In response to my previous post, Making Flash movies obey browser text size changes, someone asked in the comments whether this method works when Stage.scaleMode is set to “noScale” (like it is automatically in every Flex SWF, for example, and in many Flash applications.) Setting the scaleMode of the Stage to "noScale" lets Flash developers control the layout of a Flash application in response to a change in the size of the Stage. It's how you create liquid layouts in Flash.

The answer to the question is that, yes, this method will work when using noScale and you can decide exactly how to handle the layout of your SWF when the stage size changes.

Here's the example from the previous post, refactored with some custom scaling code: You can view the example online and download the source code.

This is a snippet of just the custom scaling code from the above example: 

// The scale mode is set to no scale
Stage.scaleMode = "noScale";
Stage.align = "TL";

// Listen for resize events
Stage.addListener(this);

var margin:Number = 20; // pixels, same on all sides

// Calculate aspect ratio of the text items clip
// so we don't distress the text while scaling
var textItemsAspectRatio = textItems._height/textItems._width;

// Ditto for the picture
var pictureAspectRatio = picture._height/picture._width;

function onLoad()
{
  // Carry out the resize code for the first time.
  onResize();
}

// Custom layout code
function onResize()
{
  // Store the stage dimensions as we'll be
  // using them frequently
  var sw:Number = Stage.width;
  var sh:Number = Stage.height;

  // Scale the background
  background._x = 0;
  background._y = 0;
  background._width = sw;
  background._height = sh;

  // Scale the text. This is a quick and dirty way of
  // doing it and it distresses the text
  textItems._x = margin;
  textItems._y = margin;
  textItems._width = sw - (margin*2);
  textItems._height = textItems._width * textItemsAspectRatio;

  // Scale the picture
  picture._y = textItems._y + textItems._height;
  picture._x = margin;
  picture._width = sw - (margin*2);
  picture._height = picture._width * pictureAspectRatio;

  // If you think this is a lot of work (and it is),
  // check out how easy it is to do the same thing
  // with layout constraints in Flex 2.
}

Wow, it had been a long time since I'd written any custom scaling code. Makes you realize how much simpler life is with Flex 2 and its awesome layout constraints.

Comments