We all know CSS works well in Flex. But a little-known secret is that you can use CSS in Flash as well. It's not without its limitations, but some of the more basic CSS text styles are available. Here's a list of rules you can apply to text fields:
<ul> <li>color</li> <li>display</li> <li>font-family</li> <li>font-size</li> <li>font-style</li> <li>font-weight</li> <li>kerning</li> <li>leading</li> <li>margin-left</li> <li>margin-right</li> <li>text-align</li> <li>text-decoration</li> <li>text-indent</li> </ul>
Now that we're clear on the things you can do with CSS in Flash, it's important to know its limitations. Those limitations are:
<ul> <li>The primary unit of measure is in pixels — _em_ and _points_ are converted to pixels.</li> <li>CSS in Flash doesn't "cascade" because you can only assign one style sheet per text field.</li> <li>While there is a margin-left and margin-right, there is no margin-top or margin-bottom.</li> <li>You cannot modify list item markers.</li> <li>Type selectors and class selectors cannot be combined (li.mySelector).</li> </ul>
In this video tutorial, I'll create a dynamic text field and set the text using the htmlText property. Using this property, the text field will render standard html markup complete with headers, lists, image tags and more. Once I've set the text, I'll style it first using programmatic style sheets and then with a dynamically-imported CSS file.
Related Articles
- Tutorial: An Introduction to Papervision3D
- Setting Up the Flex SDK
- Tutorial: Using the Flint Particles API to Simulate Rain on a Screen
This article is filed under Flash, ActionScript & Silverlight and has the following keyword tags: Adobe, tutorial, video, Flash, CSS.
