For a project, we’ve been meaning to implement some accessibility features such as providing the ability to resize all of the text in the application. The problem with this is that it requires a lot of overhead to build your application so that it can handle dynamic text sizes. I wanted instead to try some scaleX and scaleY action on the entire Flex application, emulating the way Firefox (and other similar browsers) now handle page resizing.

For the most part, this worked really well. You need some UI to set the scale value (for example, a slider component). Then, in your application you can just set the scaleX and scaleY values to the value of that component.

Things get slightly more tricky when you include the PopUpManager. When you rescale the Application, any pop-ups (which are placed a layer above the Application clip) remain unscaled. Attempting to cast systemManager to a DisplayObject, and rescaling that ended up breaking the application since the content would no longer fill the entire stage.

A less elegant solution was to simply rescale the pop-ups as they are added via PopUpManager. While working it out, a friend suggested to add an event listener for when popups are added, and to rescale the pop-ups then (so there’s no need to manually rescale the pop-ups). That’s what I came up with. The important caveat here is that you need to add/create your pop-ups in the PopUpManagerChildList.POPUP child list. I was having fun so I added keyboard commands just because I’m that kind of guy. A… keyboard command adding… guy.

Instructions: Click somewhere on the flash movie to give it focus. Move the slider (or press Ctrl & - or Ctrl & = ) (or Command for OS X) to rescale the content.

This movie requires Flash Player 9

<script id=script-e6a80db5-b547-459a-95a1-379427404dc2 type=’text/javascript’>swfobject.embedSWF(‘/assets/swf/scale-test/ScaleTest.swf’, ‘swf-e6a80db5-b547-459a-95a1-379427404dc2’, ‘600’, ‘400’, ‘9 ‘, false, false, false, false, function() { var e = document.getElementById(‘script-e6a80db5-b547-459a-95a1-379427404dc2’); e.parentNode.removeChild(e); });</script>

Source code here.

A few flaws with this method:

• Images will look trashy when scaled. The only thing you can do about this is stick with vector graphics. Unless having the image in perfect clarity is critical to your application, I think it’s fine to let the user gain the functionality to rescale the application at the sacrifice of image clarity.
• The text in buttons (that don’t explicitly define a size) will sometimes get truncated (ie, “Cancel” becomes “Can…”). If the buttons are allowed to auto size, I don’t see why the text would truncate. Annoying. I still want to play with this and see if I can figure it out.
• If you are focused in a TextField, pressing Ctrl & - or Ctrl & = will input - and = characters into the TextField! You can’t prevent this, unfortunately, but you could provide a work around if you really wanted to.