Table of Contents |
Hack 46 HTML and CSS in Flash
Flash MX 2004 offers increased HTML formatting support and adds CSS support. Use them together to create pages that look like Flash but load like traditional HTML pages. Text in Flash can be formatted in numerous ways, such as using an instance of the TextFormat class to apply formatting to a TextField instance [Hack #42] . For those who prefer using HTML formatting tags, Flash MX and later support basic HTML formatting. Flash MX 2004 adds support for CSS formatting, which makes it easy to apply and change text styles across an entire Flash presentation. Formatting text in Flash the way you can in HTML, however, doesn't make Flash behave entirely like HTML in a browser. One of the biggest problems with Flash sites is that you can't always see them load in the same way a simple HTML page does. An HTML page displays most of its assets as soon as they load, so you can see the page building up. There is no need for a preloader or any streaming or other bandwidth management. Flash sites may be better than HTML for animation and interactivity, but the counterintuitive way that Flash sites tend to load is disconcerting to many users. In particular:
Although both of these issues can be fixed by good Flash design, Flash MX 2004's HTML formatting support allows you to load a number of assets directly into text fields in the same way traditional HTML loads into the browser. Formatting Text with HTMLText fields typically render text literally. So, if you want to display verbatim text, you can use the TextField.text property. In this example, the HTML tags are ignored for formatting purposes and rendered as literal text: myText.text = "Enter any <b>HTML formatted</b> text here"; trace(myText.text); // Displays: Enter any <b>HTML formatted</b> text here However, to tell Flash to render the contents of a text field as HTML, set the html property to true and assign the HTML text to the htmlText property, as follows (note the bolded output): myText.html = true;
myText.htmlText = "Enter any <b>HTML formatted</b> text here";
trace(myText.text);
// Displays:
Enter any HTML formatted text here The string you equate to myText.htmlText can have any of the following HTML formatting tags within it: <a> (with attributes href and target), <b>, <br>, <font> (with attributes face, color, and size), <i>, <li>, <p>, <span>, and <u>. The class attribute is also supported, allowing you to make CSS class definitions, and you can also make CSS style definitions, as we shall see in a moment. There are a couple of differences between the Flash and HTML implementation of some of these tags. First, if you surround a block of text with <a> and </a> (the hyperlink or anchor tag) in Flash, it will not change text style to imply a link (it doesn't automatically create underlined blue text). You have to set the formatting explicitly with other tags. For example, to make a link appear with underlining, use the <u> tag: myText.html = true; myText.htmlText = "This is a <u><a href = 'somelink'>link<\a><\u>"; This yields the text shown in Figure 6-17, with the word "link" acting as a link. Figure 6-17. Flash text using the anchor and underline tags together to create an HTML linkHowever, there is a better way to create HTML-like formatting using Flash MX 2004's support for CSS. Formatting with CSSCascading Style Sheets (CSS) allow you to specify formatting using a stylesheet (stored either internally or externally in a .css file). Changing the stylesheet makes it easy to change the text styles throughout your entire presentation. Flash MX 2004 supports the HTML class attribute to define stylesheets, allowing you to add CSS formatting to your text. For example, you can define a stylesheet with a text style that makes hyperlinks blue [Hack #93] . You should also note that, when using external text files to define your CSS, you need to make sure that your CSS is fully loaded before using it, something browsers handle for you when loading stylesheets for HTML pages. The following code snippet correctly loads an external stylesheet named myExternalCSS.css and uses it to format some HTML text within a Flash text field: // Define a new StyleSheet object var myStyle = new TextField.StyleSheet( ); // When the stylesheet loads, use it to format the text myStyle.onLoad = function( ) { myText.styleSheet = this; myText.html = true; myText.htmlText = myHTML; }; myStyle.load("myExternalCSS.css"); myHTML = "<p class = 'title'>Creating an efficient walk cycle</p>" myHTML+= "<br><p><span class = 'emphasis'>Scribble</span> moves very " + "quickly in the final work, far too quickly for the viewer to see " + "the lack of frames. He also spends a lot of time in the air, thus " + "minimizing the slide walk effect.</p>" myHTML+= "<p>You can see an example of him moving <a href = " + "'someURL'>here</a>.<br><br>" myHTML+= "<p>Of course, when two designers get together, easy options " + "always go out of the window...(etc).</p>" The CSS file, myExternalCSS.css, is a simple text file defining our CSS classes and styles: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none; color:#909090; } .emphasis { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none; color:#404080; } .title { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-decoration: none; color:#8080A0; } a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: none; text-decoration: underline; color:#8080A0; } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; color:#333355; } a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; color:#444444; } a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; color:#C08080; } There are a few things to notice here:
Figure 6-18 shows the results of using the preceding code and CSS file, assuming the Stage contains a dynamic text field named myText. Figure 6-18. CSS formatted text in FlashEmbedding ImagesThe real beauty of Flash MX 2004's HTML support is using the <img> tag's src attribute to embed a JPEG image in a text field. For example, the following changes (shown in bold) to the preceding code specify an image within one of our <p> tags: myHTML = "<p class = 'title'>Creating an efficient walk cycle</p>"
myHTML+= "<br><p><img src = 'walk.jpg' align = 'right'> " +
"<span class = 'emphasis'>Scribble</span> moves very " +
"quickly in the final work, far too quickly for the viewer to see " +
"the lack of frames. He also spends a lot of time in the air, thus " +
"minimizing the slide walk effect.</p>"
myHTML+= "<p>You can see an example of him moving <a href = 'someURL'>here</
a>.<br><br><br><br>"
myHTML+= "<p>Of course, when two designers get together, easy options always go out
of the window...(etc)</p>." The preceding code yields the results shown in Figure 6-19. Figure 6-19. CSS-formatted HTML text, complete with embedded image, loaded at runtimeWhen the HTML text is parsed at runtime, the image is loaded. You will see the text appear first. Then, once the image has loaded, it too will appear, and the text will wrap to accommodate it. Just like browser-rendered HTML! Note that the <p> and <img> tags can be a little nonstandard in their operation:
Final ThoughtsFlash MX 2004 includes much greater control of text via subsets of standard HTML and CSS definitions. To keep the Flash Player small, Macromedia has not provided a full implementation, and there are some differences from browser-based CSS. The subset of supported tags and CSS definitions has been carefully chosen. Tags such as headings are not supported, but you can easily define your own custom CSS classes or styles to take their place. Although a number of designers have complained about the lack of support for any HTML-based tables or advanced CSS block and margin formatting, the HTML/CSS support allows you to quickly and easily load and position large amounts of text and images at runtime, something that was previously problematic. More importantly, Flash MX 2004's support of CSS and HTML allows you to better separate your text and image content from the Flash site user interface (and even keep it separate from the SWF file), something that can make your content much more flexible for offline and online updates. |
Table of Contents |