| Although you can't display every type of HTML inside Flash (only the most basic tags are supported), Flash supports a limited version of Cascading Style Sheets (CSS). (You can view the whole list by searching for "Supported CSS properties" in Flash's Help panel.) You can use CSS to define text styles like a word processor. When you change the CSS definition, the text that uses the styles automatically updates. You can store CSS definitions within Flash or in external .css files. To get you started, the following task exploits the main features of CSS. Try It Yourself: Display Text by Using CSS In this task you'll control text display by using CSS code: 1. | For this task, we'll store the CSS declaration in a .css text file. Use Notepad or a simple text editor to create a file with the following contents:
bodyText { font-family: Verdana; color:#000000; font-size: 10px; } headline { font-family: Verdana; color:#006600; font-size: 24px; } a:hover{ color:#FF0000; font-size: 10px; text-decoration:underline; }
| 2. | I'll give you a quick translation, even though this is standard CSS. We've defined two styles "bodyText" and "headline". In addition the a:hover defines how the text with hyperlinks shall appear when the cursor hovers over the link. Save the text file in a new folder and name it styles.css.
| 3. | Create a new Flash file and save it in the same folder as the CSS. You can name it usesCSS.fla.
| 4. | Place onstage a dynamic text field and make the margins as wide as the stage. Give this text an instance name myCssText_txt.
| 5. | Select the first keyframe and open the Actions panel (or press F9). Type the following code into the Actions panel:
//set some properties and clear the field myCssText_txt.selectable=false; myCssText_txt.html=true; myCssText_txt.text=""; //define a new style sheet and attach it to the text field myStyles= new TextField.StyleSheet(); myCssText_txt.styleSheet = myStyles; //define what happens when it loads myStyles.onLoad=function(){ //populate the text field using our new styles myCssText_txt.htmlText = "<headline>this is a headline</headline>"; myCssText_txt.htmlText += "<bodyText>this is the body </bodyText"; myCssText_txt.htmlText += "<bodyText>this is a "; myCssText_txt.htmlText += "<a href='#'>link</a></bodyText>"; } //commence loading myStyles.load("styles.css");
The comments (text appearing after //) should help explain what's going on. First, I set the selectable and html properties and clear the text field. Next I define a style sheet and apply it to the text field. The last line begins loading the .css file. But, not until it's fully loaded (inside the onLoad method), do we populate the text field.
Incidentally, to let the user navigate to a new web page, you can replace the # with an URL of your choice.
| 6. | Test the movie.
I know you typed a lot of code in the preceding task, but it's just so cool, I really wanted to include this feature. Remember that when you publish to the Web, you'll need to include the .swf and the .html (as usual) but also the styles.css file. It gets loaded every time the user visits the site. What that means is you can change the styles (by editing that .css file) users will see the changes the next time they visit. You never have to touch the source .fla file and republish. In some ways, this task is a good introduction to next hour where you learn about modularizing your Flash site. Here, you're keeping the layout style separate from the actual content which is a great way to make updates easy.
|
|
