From the author of

From the author of

To test that the text size getter works, you will need to build a movie that
receives the LocalConnection function calls from the sizeGetter movie.
Start by making a new Flash movie; set its width to 300 pixels and its height to
150 pixels. Set the movie's background color to something other than white.
Here, we chose #FFFFCC. Name the existing layer fields, and create a new layer
called actions. (See Figure 1.)

With the fields layer selected, add some static text to the stage that reads
"a little font sizing test." You can color this text red so that it
stands out from the text you'll add next.

Now add a Dynamic text field to the stage, below the static text, and have it
read "This is text - size 12." Give this field the instance name of
tf_textSize, and set the text size to 12 points. Compare your stage with that in
Figure 2.

Figure 2 This is all you need on the stage to test your text size
getter.

Now select the actions layer and open the Actions Panel (choose Window,
Actions, or press F9) and enter this ActionScript:

Stage.scaleMode = "noscale";
var receivingLC = new LocalConnection();

In the first line of code, you are telling the Stage to not scale the objects
even if the dimensions of the Stage in the Web page are larger or smaller than
the 300 x 150 that you specified for the movie. This will make it easier to
notice the text size changing.

In the second line, you create a new LocalConnection object called
receivingLC.

Here, you create a new function of the receivingLC object called
sizeText. You may recall that in the sizeGetter movie, you call this
function every time the text size in the browser changes.

The sizeText function takes one value as input, newScale.
newScale is a percentage from 1 to 100 that will tell you how much the
text in the user's browser has been scaled. The function takes the value of
newScale and computes a new value for the text of the tf_textSize field
displaying the original point size, 12, scaled by the percentage value in the
newScale variable. Finishing up the function, the code sets the X and Y
scale of the tf_textSize field to the newScale percentage.

The last line in this code connects this movie to the
LocalConnection channel named textSizerChannel. This is the
channel created by the sizeGetter movie.

Save your movie and call it testMovie.fla.

Now let's set the publish settings for the movie and have Flash MX
generate the proper HTML page for the test movie. Click anywhere on the stage,
away from any objects, to bring up the movie properties in the Properties Panel
(see Figure 3.

Click the button next to the Publish label; it will most likely read Flash
Player 6. This brings up the Publish Settings window (see Figure 4). Click the
HTML tab of the Publish Settings window and choose the Flash Only template. Set
the Dimensions to Percent, and enter 100 for both the width and the height. Be
sure to uncheck any boxes under the Playback section and click the Publish
button; then click OK to close the window.

Now you should have created a new HTML page called testMovie.html.
That's all for the test movie. The last thing you need to do is create one
final HTML page with frames that can display the test movie page and the
sizeGetter page. Create a blank Web page and enter this HTML into it:

This creates a simple set of frames with two frame rows. The test movie page
will be at the top, and the sizeGetter will be at the bottom. Save this page as
index.html, and test the page in any of the target browsers. (See Figure 5.)

If the text size of the main movie changes, you've done itgreat
work! Now when you are using this in your own Web projects, you will not want to
show that bottom frame to your end user. However, because of an issue with the
Flash player that we discovered during the development of this work around, the
sizeGetter movie needs to actually be onscreen (at least a pixel or two) (see
Figure 7).

Figure 7 The sizeGetter movie needs to have at least one of its pixels
visible to work.

The first thing you need to do is adjust your frameset code. Open index.html
and change the code to read as follows:

The adjustments here change the height of the sizeGetter frame to 4 pixels
tall, turn off the frame borders, and make sure that the frame is not sizable by
the end user.

Testing your movie, you will notice that the sizeGetter movie is still very
visible in the browser. (See Figure 8.) Open the sizeGetter.html page. Find the
BODY tag of the Web page and change it to read as follows:

If you test your page, you will notice now that the sizeGetter page is the
same color as your test movie page. The last thing you need to do is hide the
sizeGetter.swf movie. In the sizeGetter.html page, change the line that assigns
a value to the movieBg variable to read this:

var movieBg = "#ffffcc";

This changes the color of the sizeGetter movie to the same color as the test
movie. Finally, change the line where the movieName variable is
initialized to read this:

Here, you pass the debug variable as false instead of
true. As you recall from the sizeGetter movie, changing that value
hides the output fields on the stage (see Figure 9). You should now save your
work and test your frameset page one more time in the different browsers.

Remember when testing that the Flash MX LocalConnect object will
work across browsers on the same machine, so you will need to have only one
browser running at a time. If everything tests okay, you are done! (See Figure
10.) Nice work!

Figure 10 Test your final pages in all the different browser to ensure
that it all works.

To use this code in your own movie, just copy the receiving code from the
test movie and past it into your movie. Then add the sizeGetter page in a
frameset, as you did in this tutorial.