Flash Usability, Part 4: Building the Main Movie
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.)
)
Figure 1 Create a new layer, and name your layers actions and fields.
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.
Next, enter this code in the Actions Panel:
receivingLC.sizeText = function (newScale)
{
tf_textSize.text = "This is text - size " + (12 * (newScale / 100));
tf_textSize._xscale = newScale;
tf_textSize._yscale = newScale;
}
receivingLC.connect("textSizerChannel");
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.
)
Figure 3 The Properties Panel showing the movie properties.
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.
)
Figure 4 The Publish Settings 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:
<html>
<head>
<title>text size test</title>
</head>
<frameset rows="*,40">
<frame name="main" src="testMovie.html" marginwidth="0"
marginheight="0" scrolling="no">
<frame name="support" src="sizeGetter.html" marginwidth="0"
marginheight="0" scrolling="no">
</frameset>
</html>
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.)
)
Figure 5 The frameset page running in Internet Explorer on Windows.
Change the text size of the page, and compare your results to Figure 6.
)
Figure 6 The sizeGetter works!
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:
<html>
<head>
<title>text size test</title>
</head>
<frameset rows="*,4" frameborder="0" framespacing="0" border="0">
<frame name="main" src="testMovie.html" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0" noresize>
<frame name="support" src="sizeGetter.html" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0" noresize>
</frameset>
</html>
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:
<body onLoad="initSizer()" bgcolor="#ffffcc" text="#000000"
Here, you've added the BGCOLOR property to the Web page. Make sure that the color you assign it is the same color as your test movie.
)
Figure 8 The sizeGetter frame is almost hidden.
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:
var movieName = "sizeGetter.swf?debug=false&startHeight=" +
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.
)
Figure 9 The sizeGetter page is now hidden to the end user.
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.