Flash Usability, Part 3: Building the Web Page
- Internet Explorer 5 and Up
- Netscape and Mozilla
- Opera 5 and Up on Windows and MacOS
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
When designing any Web page, its recommended that you have as many different Web browsers at your disposal as possible so that you can adequately test your page for your different users. It's also nice to have at least a Macintosh machine and a Windows machine with those various browsers installed so that you can be sure your pages work across the major platforms. At the least, it's good to have a friend you can bother who has the other platform so that you can send files to test and take screenshots of.
Internet Explorer 5 and Up
The first target browser is Microsoft Internet Explorer, or IE. IE makes up the largest percentage of browsers on the Web, and you can safely assume that a large majority of users reaching your Web site will be using IE. Because most of the popular browsers render things differently on the page, it is necessary for you to "sniff" out the browser so that you can easily target that browser with specific JavaScript.
Open your favorite text editor and create a simple Web page called sizeGetter.html. Enter this HTML to start:
<html> <head> <title>text size getter</title> </head> <body text="#000000" topmargin="0" leftmargin="0" marginwidth="0"marginheight="0"> </body> </html>
Now, just below the TITLE tag, paste WebReference.com's latest JavaScript Sniffer code. This code will be used to determine the browser, version, and platform of your users and help you to write code that handles each browser case correctly. Because this is a fairly long script, we will not display it in this article.
<head> <title>text size getter</title> <script language="JavaScript"> <!-- ===== Begin WebReference.com JavaScript Sniffer // code goes here... // ======= End WebReference.com JavaScript Sniffer --> </script> </head>
After the opening BODY tag, create a DIV element on the page and give it the ID of textSizer:
<div id="textSizer" style="background:#ff0000;margin:0;
Notice that the DIV element's background color is red. This is simply to make it easy to distinguish on the page. You will also notice that the initial visibility of the DIV element is visible. When you are finished testing, you will change that value to hidden, to keep it from showing to the user.
The text inside the DIV is given the generic font family of sans-serif; in our exploration, the sans-serif fonts gave more accurate readings when the text size was changed in the browser. For example, if the text was sized to the Small setting in IE for Windows, its enclosing DIV would be about 15 pixels tall. If you then set the size to Smallest, the width of the font would change slightly, but the height would remain 15 pixels. With the standard sans-serif font, however, setting the text size to Small yields a 16-pixel-high DIV, and Smallest produces a 15-pixel-high DIV.
Now save and test your page. You should see something similar to that in Figure 1.
)
Figure 1 The DIV element with the enclosed test text.
So far, so good! You can test that the DIV behaves as expected by changing the text size from Medium to Largest. You should notice the DIV's height change with the change of the text. If so, you're ready to move on.
Next you will add another SCRIPT section to your page. This section will contain the functions to determine the size of the DIV as the text size changes.
Just below the ending SCRIPT tag for the JavaScript Sniffer code you pasted in, add this code:
<script language="JavaScript">
function getTextSize()
{
var returnSize = 0;
if (is_ie5up) {
returnSize = document.all["textSizer"].offsetHeight;
}
return returnSize;
}
After starting the new SCRIPT section, this code defines a new function, getTextSize(), that uses the is_ie5up variable (made available by the JavaScript Sniffer code) to check to see if the user's browser is IE 5 or better. Then it sets the returnSize variable to the current height of the textSizer DIV using the offsetHeight property. The offsetHeight property returns the actual height, in pixels, of the DIV, which should reflect the size of the text inside it. After the returnSize variable is set, it is returned to the calling function, which you will define next.
Add this code following the getTextSize() function definition:
function checkTextSize()
{
if (currentTextSize != getTextSize()) {
currentTextSize = getTextSize();
document.sizerMovie.height = currentTextSize;
}
}
Here you define the checkTextSize() function. Its job is to compare the current size of the DIV (using the value returned by getTextSize()) to the variable currentTextSize. If the two values are not the same, the currentTextSize variable is set to the new height of the DIV. Depending on the browser and platform, the Flash movie element on the page (which you will create a little later) gets its height set to the current height of the DIV.
Now add the following code to finish the function definitions:
function initSizer()
{
if (is_ie5up) {
window.setInterval("checkTextSize()", 300);
}
}
var currentTextSize = 19;
</script>
The initSizer() function simply checks to see if the proper browser is available and if it is Internet Explorer 5 or better. If it is, the checkTextSize() function is instructed to check the DIV size repeatedly every 300 milliseconds. This is how you will know that the user has changed the text size.
Finally, you initialize the currentTextSize variable to 19 and close out this SCRIPT section.
For all of this to work, you still need a few things: You need to call the initSizer() function to start the repeating check for the size of the textSizer DIV, and you must embed the sizeGetter Flash movie into the page. Let's start with calling the initSizer() function. Change the BODY tag that you added when creating this page to this:
<body onLoad="initSizer()" text="#000000" topmargin="0" leftmargin="0"
marginwidth="0" marginheight="0">
Now when the page is finished loading in the browser, the checkTextSize() function will be told to repeatedly check the DIV height and compare it to its last known height in the currentTextSize variable.
Next, you will add another SCRIPT section that will assemble the proper OBJECT and EMBED tags for the sizeGetter.swf movie that you created earlier. Add the following the code directly before the HTML that defines the textSizer DIV element:
<script language="JavaScript">
var movieBg = "#cccccc";
var movieWidth = "150";
var movieHeight = 18;
var startHeight = 18;
var objectName = "sizerMovie";
var embedName = "sizerMovie";
if (is_ie5up && is_mac) {
movieHeight = 17;
startHeight = 17;
objectName = "unused";
}
var movieName = "sizeGetter.swf?debug=true&startHeight=" + startHeight;
var htmlOut = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"' +
' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0"' +
' width="' + movieWidth + '" height="' + movieHeight + '"' +
' id="' + objectName + '" align="">' +
' <param name="movie" value="' + movieName + '">' +
' <param name="quality" value="high">' +
' <param name="bgcolor" value="' + movieBg + '">' +
' <param name="menu" value="false">' +
' <embed src="' + movieName + '" quality="high" bgcolor="' + movieBg +
'"' +
' width="' + movieWidth + '" height="' + movieHeight + '"' +
' name="' + embedName + '" align="" menu="false" swliveconnect="true"' +
' type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>' +
'</object>';
document.write(htmlOut);
</script>
This looks like a bunch of complicated JavaScript, but it's actually very simple. The first four lines in this script set variables that will be used for the sizeGetter movie's background color, width, and height. The startHeight variable is set to 18; this is the standard height of the DIV element in IE for Windows when the text inside it is at its normal (medium) text size setting. This value is passed into the sizeGetter movie via the Query String method.
The objectName and embedName variables are used to hold the identifiers for the OBJECT and EMBED tags that display the Flash movie on the page.
The if statement checks whether the user has an IE 5 or better browser and that he is using a Mac. If this is the case, the movieHeight and startHeight variables are set to slightly smaller numbers. This is because, in IE on the Mac (as well as some of the other browsers on the Mac), the font sizes are slightly smaller than with Windows. The objectName variable also gets changed because IE on the Mac adds both the OBJECT tag and the EMBED tag to the Document Object Model of the page. That is, instead of picking the OBJECT tag (as IE for Windows does) or the EMBED tag (for all other browsers), IE on the Mac makes both available in JavaScript. This causes problems when trying to set the height of the sizerMovie object with the checkTextSize() function that you defined earlier. So, you rename the OBJECT movie as unused because the Mac version of IE actually uses the EMBED tag to display the Flash movie.
The movieName variable holds a string representing the URL of the movie, sizeGetter.swf, and the two variables that will be passed onto the movie: debug and startHeight.
The htmlOut variable is then set to a string that combines the previous variables and the OBJECT and EMBED tags to display the Flash movie properly on the page. The document.write() function then prints the value of the htmlOut variable to the page so that the browser can interpret it as if it was plain HTML. Notice that the value for the ID parameter in the OBJECT code and the value for the NAME parameter in the EMBED code are different. This is important because typically they are kept the same.
Finally, the last line completes the SCRIPT tag.
This code is now finished for IE. Make sure that you save your work! Open the file using IE 5 or better on a Windows machine to see if it all works right.
You should see a wide red rectangle with the sizeGetter Flash movie running inside it (see Figure 2). The height field in the Flash movie should read 18, and the percent field should read 100%. Change the text size to Largest using the text size button in the browser, shown in Figure 3.
)
Figure 2 You should now see the Flash movie and DIV in your
browser.
)
Figure 3 Change the text size in Internet Explorer with the text size button.
The text in the DIV and the Flash movie should have become larger, and the two fields in the sizeGetter Flash movie should now display different readings. Compare your results to those in Figure 4.
)
Figure 4 When set to the Largest setting, the text is about 133%
larger.
Now try setting the browser text to the Smallest setting. The Flash movie's values should change once again. (See Figure 5.)
)
Figure 5 The Smallest size setting yields text about 83% of its original
size.
Now open the file on IE 5 or better on the MacOS. (See Figure 6.)
)
Figure 6 The MacOS version of IE displaying the sizeGetter page.
Change the size of the text in the MacOS version of IE. You should see the Flash sizeGetter movie change just as it did in the Windows version. (See Figure 7.)
)
Figure 7 Changing the text size in Mac IE should change the size of the
sizeGetter movie as it did in IE for Windows.
If your results are similar to those in the figures above, then you are finished coding for Internet Explorer on both the Windows and Mac platforms. You are now ready to move on to adding the code necessary for the sizeGetter movie to work in Netscape and Mozilla browsers.