4. Animating Text Introduction to Web-based Text Text is an essential component of the web and web-based animations. Look at most commercial websites and you'll see dozens of banner ads and animations, many of which are text-based or text heavy. Edge provides a tool for creating text to populate your animations natively. That means you don't have to first go to Photoshop, Illustrator, Fireworks, or Flash to save the text as an image or as vector outlines. The Edge Text tool actually creates HTML-based text and formats it using CSS and JavaScript specifications. This opens a world of possibilities to your Edge animations, but erects a few barriers, as well. The fact that text formatting is a mixed bag on the Internet won't surprise any hardened web designer. But some Flash developers may be in for a little shock to learn that the text they created in an Edge animation could display completely differently than they designed it. In either case, to get the most from the Text tool, you'll have to accept certain facts about web-based text: · Text on the web is vector-based. It is not dependent on the resolution of the screen or output device. It can be enlarged or reduced in size without affecting display quality and uses less disk space and bandwidth than image-based text. · Formatting is not intrinsic to the text; it is applied separately by cascading style sheets (CSS) and/or by other means. · Fonts applied to the text are supplied by the user's computer, not the designers. If the user doesn't have the font, the text will be displayed in a font that they do have. (And the result may not be a good one.) · Some or all aspects of the formatting may not be compatible with the device displaying the text, which may result in undesirable formatting or, worse, no display at all. Some fixes to these problems are in the works through the development and adoption of HTML5 and CSS3, but those solutions are still several years away, if they arrive at all. So, below you will find some tips to help you build effective animations that work today. Simple Solutions to Web Text Problems Since Edge doesn't save text as an image or in some proprietary file format, you'll have to abide by few simple rules that will ensure your text displays properly in all your animations: A. Favor fonts common to both Windows and the Mac operating system, such as Arial, Times New Roman, Trebuchet MS, Tahoma, and Verdana. Use other fonts as desired, but accept that they may not be available. Also remember that your animations may be viewed on cell phones and other mobile devices. Fonts are just as big of an issue there as well. B. Design for success. Know your target audience. Avoid specifications that may not work in all environments. For example, avoid subtle differences in color or font size; some devices may not display the settings correctly. C. Test, test, test. Check the animation on multiple systems, browsers, and devices. Don't assume that the animation works because it works on your computer. Edge animations use HTML5, CSS3, and JavaScript specifications that won't work in some older browsers and on certain mobile devices. Of course, these limitations will often place too much of a burden on your creative juices. In such instances, you'll want to fall back on the use of images or other alternatives. We'll examine the use of web graphics in Chapter 5. For now, let's learn how to use the Edge Text tool.