Jed Wood

Jed is currently an Interaction Designer for Bose. He uses Flash for everything from quick-and-dirty conceptual prototypes to final implemention, depending on the project.

View all articles by Jed Wood

So here's the whole thing in one chunk:

// point size of the smallest text option
smallestSize = 9;
// 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;
//create a new TextFormat object
myTextFormat = new TextFormat();
//Next three lines assing 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);
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 it the 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);
        }
}
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);
}

Good work.
BUT WAIT, THERE'S MORE! What if your art director just won't accept those little extra boxes at the top the screen? Or what about those people with low vision that are already used to using the standard browser keyboard shortcuts for zooming in and out on text? Let's see what we can do:

We're going to set up an object that will be triggered when the right key combination gets pressed.

changeTextByKeys = new Object();
changeTextByKeys.onKeyDown = function () {
        if (Key.isDown(17) && Key.isDown(187)) {
                myTextFormat.size = myTextFormat.size + difference;
                mainContent.setTextFormat(myTextFormat);
        } else if (Key.isDown(17) && Key.isDown(189)) {
                myTextFormat.size = myTextFormat.size - difference;
                mainContent.setTextFormat(myTextFormat);
        }
}
Key.addListener(changeTextByKeys);

Seems like a nice enough piece of code, and again takes advantage of the Flash MX event model that Guy's tutorial introduced us to. It works great when we try it in the Flash player. HOWEVER, when we publish it to an HTML page (which you can quickly try on your own), we find a problem: Flash will only listen and do its job when the browser has zoomed all it can zoom (about 4 times). So I won't bother explaining all that code. Instead, we'll have to try something similar, but with Flash 5 type of code. This time I've added some comments to help explain what's happening:

//tell Flash to run this function at the start of every frame
_root.onEnterFrame = function () {
        //check to see if both the COMMAND/CONTROL key AND the "+" key are pressed at the same time
        if (Key.isDown(17) && Key.isDown(187)) {
                //if so, bump up the text size
                myTextFormat.size = myTextFormat.size + difference;
                mainContent.setTextFormat(myTextFormat);
                myScrollbar.setScrollTarget(mainContent);
                //or if it's with the "-" key, then decrease the size
        } else if (Key.isDown(17) && Key.isDown(189)) {
                myTextFormat.size = myTextFormat.size - difference;
                mainContent.setTextFormat(myTextFormat);
                myScrollbar.setScrollTarget(mainContent);
        }
}

So the (17) and the (187) and the (189) are key codes that represent those keys. Unfortunately, this code still doesn't perform with absolute precision, but at least it's working okay, and is hopefully better than nothing (again, give a quick look by publishing to HTML).

I've included one final example, just to cover as many usability bases as I can. The most immediate flaw I saw with our two examples above is that we don't provide any feedback to the user of what size they are currently viewing. So I've used some less dynamic and more "old-fashioned" code below, as one possible solution.

Okay, I think that's enough for now. I hope that even if none of these examples are useful in your own work, they may have at least sparked some ideas of what we can do to help more people appreciate all the fantastic interactions that Flash makes possible.

I must quickly acknowledge wired.com for partly inspiring this whole tutorial.