Making the Most of Flash MX 2004 and Its New CSS Control
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Importing CSS Definitions
The coolest part about the new CSS support in Flash is that you can use your existing style sheets, provided the style is supported. However, the format of your CSS file matches the CSS standard of which you may be familiar. Here is a simple declaration that you can save in a file called my_styles.css:
.headline {
font-family: "Arial", "Arial";
font-size: 28px;
color: #003399;
}
.main {
font-family: "Arial", "Arial";
font-size: 12px;
color: #000000;
}
The preceding code defines the styles .headline and .main. (Notice that the period is part of the name as a matter of convention so that I don't accidentally overwrite a built-in function.)
Now all you need to do is load those definitions into your app and start formatting text by tagging with .headline and .main. That's two steps: Load, and then apply the format. The form is "define what to do once it loads, then start loading." The code below shows how you can import and then apply the CSS styles previously defined to a text field instance my_txt.
Import and Display CSS Styles
var my_css = new TextField.StyleSheet();
my_css.onLoad = function(success) {
if (success) {
displayText();
} else {
trace("error loading");
}
}
my_css.load("my_styles.css");
function displayText () {
my_txt.styleSheet = my_css;
my_txt.htmlText = "<.headline>This is a headline</.headline><br>";
my_txt.htmlText += "<.main>this is the main style</.main>";
}
First I create the my_css variable into which I put an instance of the TextField StyleSheet object. That object has its onLoad event defined (to react when data is loaded), and then I commence loading (using load()). Notice when the data does finally load, I trigger my function displayText(), which goes and assigns the styleSheet property of the text field, which finally gets populated in the last couple of lines.
So, CSS is pretty cool. You can even define a.hover for when the user rolls over a hyperlink. Check this out:
//added to your my_styles.css file:
a:hover{
font-family: "Arial", "Arial";
font-size: 12px;
text-decoration: underline;
color: #0000FF;
}
//then put this inside the displayText() function above:
my_txt.htmlText+="<.main>click this
<a href='#'>hyperlink</a>!</.main>";
Just replace # with an URL or asfunction if you want it to really do something. Also, if you set the my_txt's selectable property to false, the cursor won't flicker between an I-beam and finger. Keep in mind your a:hover tag should use the same font family size as text has normally. Now the <a> tag makes sense, and you can perhaps more fully understand how you can use CSS to mark up a lot of text in Flash
Formatting CSS Inside Flash
Whereas I definitely like keeping CSS styles in an external file, there are a couple reasons to define the format inside Flash. First, it makes it easy to make modifications to text and styles while the movie plays. If you want to give users the power to select their font size (to take a simple example), there's no reason to define a bunch of variations of your style. Second, CSS style definitions within Flash use a convention that's nearly identical to the TextFormat object. You could argue this is both an advantage and disadvantage, because although you're not leveraging the CSS standards you are recycling Flash skills.
Whether you define the CSS inside Flash or in a CSS file, the last step is always the same: You set a text field's styleSheet property and then use your custom tag as with any HTML. It's the stage where you define the CSS that differs. Here's what it looks like first in CSS, and then in Flash:
//inside a css file:
.myTag {
font-family: "Arial", "Arial";
font-size: 12px;
color: #000000;
}
1 //the equivalent but entirely inside Flash:
2 var styles = new TextField.StyleSheet();
3 styles.setStyle(".myTag",
4 {fontFamily: 'Arial',
5 fontSize: '12px',
6 color: '#000000'}
7 );
8 my_txt.htmlText="<.myTag>here it is!</.myTag>"
Basically, you just make an instance of the TextField.StyleSheet() object. Then, you just define each style using the setStyle() method. Notice this method accepts two parameters: the name you'll use (as a string) and the properties you want to set in the form of a generic Flash object. Just like how your CSS file can have more tags, you can continue to execute the setStyle() method as many times as you want. Finally, line 8 just shows how you apply the style the same way you would using a CSS file.
At this point, the only advantage of defining the tags inside Flash is that you don't need to wait for a CSS file to fully load. However, earlier I said defining the style inside Flash makes it easier to reformat on-the-fly. What's cool is that after you assign a style to a text field's styleSheet property, any subsequent changes to the style are immediately reflected in the text! Here's an example that's exciting if only for the potential it offers:
_root.onMouseDown = function() {
styles.setStyle(".myTag",
{fontFamily:'Arial, fontSize:'22px', color:'#000000'});
};
Obviously, you'll probably only want to change styles at key moments. For example, maybe the user presses a button and all the important words highlight.
The Last Step
Deciding whether to store your CSS inside Flash or as a separate CSS file is entirely up to you. To help decide which approach makes sense, consider these points:
External CSS files remain in their native format. Therefore not only are you using a standard format, you also can recycle and use the same files elsewhere in your site.
External CSS files must fully load before you use them, so there's an additional step you must follow.
Internal (Flash-defined) styles are more closely aligned with ActionScript syntax. This includes the TextFormat object, which is discussed next.
Internal styles also enable you to make changes at runtime. Although you could load two separate styles (using external CSS) and then reformat the text when you want to make a change, it's a little easier with internal styles.