Flash Font Resizer v0.1

Making Flash text resize relative to the browser font size settings on the fly.

This idea was spawned from Niqui Merret's presentation on accessible Flash at the third Web Standards Group London Meetup.

The Flash Font Resizer is not a finished tool you can use as is.

It is an idea, which you need to polish, tweak and modify to work with your specific Flash movie.

It is also a very new idea so any comments and suggestions are very welcome. Email them to fransgaard@gmail.com, post them on my blog or post them on Accessify Forum.

And please let me know on fransgaard@gmail.com if you use the Flash Font Resizer for a project.

Note that I am using the swfobject to display the Flash, which relies on javascript, however the actual Flash Font Resizer does not require javascript to work.

Summary
Step 1
Step 2
Step 3
Known issues

Summary

The Flash Font Resizer works by having a 100% width flash file inside a div with an em controlled width.

When font size is changed in the browser the div will increase/decrease in width as it uses em's as measurement. The actionscript inside the flash movie will react and resize the flash font size accordingly based on the width of the movie stage, which in turn is based on the containing div.

Step 1

The fist step of the CSS is to create a div that resizes according to the font size of the browser. I won't go into detail about each line of code but this is where we start.

I am using 1000 px as default measurement. In the examples the css for the body tag does not contain any font sizing. So using default browser font size I end up with 62.5em being roughly equal to 1000px (nb. this was measure using IE7 and FF2).

So the css I end up with (including red border to show the boundaries of the div) is:

.ffr-measurer{
	width:62.5em;
	border:1px solid red;
}

The first step of the Actionscript is to create a function that prevents the movie from scaling everything on the stage up and down when the swf is resized. The Actionscript I have used for that is one I found a long time ago so I can't take credit for that, but it looks like this (including a blue border to visually show what is going on):

Stage.scaleMode = "noScale";
Stage.align = "tl";
var stuff = new Object();
stuff.onResize = function() {
	stretchIt();
};
function stretchIt() {
	border_mc._width = Stage.width-6;
	border_mc._height = Stage.height-6;
}

Stage.addListener(stuff);
stretchIt();

Step 2

As you have probably noticed in Step 1, the div and the containing swf can scale out of the width of your screen settings hence creating a horizontal scrollbar.

As we only need the width to determine the current browser font size, we need a mask div that crops the measuring div and the swf within.

I am also defining a height of 200px, which is the height of the swf.

.ffr-mask{
	position: relative;
	display: block;
	width:200px;
	height:200px;
	overflow:hidden;
	border: 1px solid green;	
}

To be sure the measuring div does not conflict with any other css I am making it position:absolute, so need to add some more css to that code:

.ffr-measurer{
	position:absolute;
	top:0;
	left:0;
	height:200px;
	width:62.5em;
}

The css part is now finished.

Observation: It seems that wmode in the code displaying the swf needs to be set to "transparent".

Step 3

Third and final step is to resize the flash font size.

This is done by using the text formatting function in Flash. Indeed, I have just used the example from Macromedia's help file (highlighted in bold below).

As I mentioned in Step 1 I have used 1000px as my default measurement. So when the swf is 1000px wide, the font size should be 100% as the measuring div is roughly 1000px when the browser font size is 100%.

I want my 100% font size to be 18px in the Flash movie, so we end up with a TextFormat font size of 18 * (Stage.width/1000).

This is the final actionscript code:


Stage.scaleMode = "noScale";
Stage.align = "tl";
var stuff = new Object();
stuff.onResize = function() {
	stretchIt();
};
function stretchIt() {
	var my_fmt:TextFormat = new TextFormat();
	my_fmt.size = 18 * (Stage.width/1000);
	content_txt.setNewTextFormat(my_fmt);
	content_txt.text ="When you resize fonts ...";

	border_mc._width = Stage.width-6;
	border_mc._height = Stage.height-6;
}

Stage.addListener(stuff);
stretchIt();

Another option to specify the font-size is using stylesheets within Flash.

Creative Commons License

This work is licensed under a Creative Commons Attribution 3.0 License.

No credit required, but please email fransgaard@gmail.com if you use the Flash Font Resizer for a project or modify it.

That's it so far. Comments and suggestions are very welcome. Email them to fransgaard@gmail.com, post them on my blog or post them on Accessify Forum.