Tutorial details:
Written by: Jed Wood
Time: 30 minutes
Difficulty Level: Intermediate
Requirements: Flash MX
Topics Covered: A few ideas for user control of text size. Some discussion of accessibility and usability
Assumed knowledge: Variables, Paths, Objects, Methods, Flash MX Event Model.
Download FLA

Introduction:
In case you haven't seen, there's been quite a buzz in the last few months about the usability and accessibility of Flash. I won't cover all the heated opinions and evangelizing, but if you want a good place to start, try Flazoom. Certainly, the fact is that Flash MX has made significant improvements in accessibility with some screen-reader compatibility. Standardized components and tab order have increased general usability. But let's admit it- too many Flash sites have 8 pt space-aged fonts that are only readable by beady-eyed basement dwelling code writers. With HTML, our low-vision user has the option to zoom in and out on the text. This tutorial will demonstrate on option for allowing the same control over Flash text.

Before you start:
The middle section of the actionscript here is used to create some buttons on the fly. I won't go into much detail about that, because you can check out Billy Ts tutorial on "Using Dynamic Content In MX" (see related articles)

If you want to follow along with your own copy of Flash MX, there are 4 quick things you'll need to do "manually,"  (although it would be possible to write some actionscript that would do most of it). 1- make a new Flash document with a dark background (so our light text shows up). 2- create a small text box up near the top left that says "Text Size." 3- Create another text box in the middle of the stage. Call this one "mainContent" in the instance name box of the property inspector. Make sure it's set to be dynamic, multiline, and word-wrap. Also, since our theme here is usability, make sure you push the little button that say "Ab" right next to the "multiline" drop down menu. This will allow users to select our text. We just might have something that people want to quote! 4- Finally, drag a scrollbar from the component library right onto that "mainContent" text box. It should snap to the right side. Give it the name of "myScrollBar" in the property inspector.

On to the actionScript:

Well, seems simple enough. I'll break this up into 4 sections. Thanks to the MX event model, all the actionscript is together on one frame (see Guy Watson's excellent tuto rial on Flash MX Event Model) (see related articles). So here's our first section:

// point size of the smallest text option
smallestSize = 8;
// difference in points between the text sizes
difference = 3;
// number of text size options. 3 or 4 is probably best
options = 4;
// the content that will go in our main text box
breakingNews = "This is where the latest breaking news or whatever would go.
If it's very long, we'll have to take advantage of the scrolling text boxes in Flash MX.
Allowing the user to change the text size will let those with poor eyesight have a more
pleasant reading experience, and those with keen eyesight won't have to scroll as much"
;
// puts the content into the text box
mainContent.text = breakingNews;

All we've done is set up 5 different variables, which are hopefully explained by the comments above each line. The "breakingNews" variable can easily be pulled from an external source such as a text file, XML, or PHP (see Jesse's tu torial on LoadVariables) (see related articles). For convenience, I've just typed it right in. We've made the other variables so that we can quickly and easily experiment with how many options to allow and what sizes our users will see.

On to the Section 2:

//create a new TextFormat object
myTextFormat = new TextFormat();
//Next three lines assign the font type, size, and color
myTextFormat.font = "Arial";
myTextFormat.size = smallestSize + difference;
myTextFormat.color=0xCCCCCC;
//applies this textformat to the "mainContent" text box.
mainContent.setTextFormat(myTextFormat);

Make note here of the size property. We're setting the "default" size to be one level up from the smallest available. In this case that means the starting size will be 11.

This third section is where Billy's tutorial comes in:

for(i=0;i<options;i++){
        //create a temporary variable to store the text size
        temp = (smallestSize + (i*difference));
        //make some simple buttons
        _root.createEmptyMovieClip(i, 100+i);
        _root[i].lineStyle(2, 0xCCCCCC, 100);
        _root[i].beginFill(0xCC6633, 100);
        _root[i].moveTo(-12, -12);
        _root[i].lineTo(12, -12);
        _root[i].lineTo(12, 12);
        _root[i].lineTo(-12, 12);
        _root[i].endFill(-12, -12);
        _root[i]._x=((130)+(i*35));
        _root[i]._y=20;
        //the next 5 lines are a really long way of saying "put a
        //letter "A" on my button, and make that letter the font size that it represents"
        _root["aTextFormat" + i]= new TextFormat();
        _root["aTextFormat" + i].size=(temp);
        _root[i].createTextField("tinyText", 200+i, (-5-i),(-5-i),20,20);
        _root[i].tinyText.text = "A";
        _root[i].tinyText.setTextFormat(_root["aTextFormat" + i]);
       
        //set up a variable that will live forever on the button, denoting its text size
        _root[i].mySize = temp;
        //when this button gets pressed, call the "changeSize" function
        _root[i].onRelease = function() {
                changeSize(this.mySize);
        }
}

Whew! A little longer than our previous sections. First, we're setting up a loop that will repeat for as many times as we've set our "options" variable to be, in this case 4.
As you can see by the comments, most of the next lines create our little square buttons and put the letter "A" on them.
But at the bottom we've got some key lines, which I'll print again:


_root[i].mySize = temp;
That gives us a clear and easy way of storing the actual text size that each of our buttons represents.


_root[i].onRelease = function() {
Okay, so when this button gets pushed, we want it to perform a certain function. Note: thanks to MX, we don't have to be so literal about making buttons be actual button instances. In our case, our little "buttons" are technically movie clips.

changeSize(this.mySize);
All we're doing is calling a function named "changeSize." That function is going to be looking for a parameter, so we'll pass that along. "this.mySize" just says "get me the value that's stored in this button's variable named "mySize."

But for our 4th section, we'll need to write that function named "changeSize" that we called in the section above.

changeSize = function(newSize) {
        //change the "size" property of our myTextFormat object to the size the button tells us.
        myTextFormat.size = newSize;
        //tell our myTextFormat to apply its new settings to our mainContent text box
        mainContent.setTextFormat(myTextFormat);
        //reset scrollbar
        myScrollbar.setScrollTarget(mainContent);
}

So our function takes that newSize parameter, updates the myTextFormat with that new size. Then the myTextFormat re-applies itself to the mainContent text box. And finally, we have to remind the scrollbar that it needs to change. Otherwise, our newly enlarged text will push right out of the box and we won't be able to scroll to it!