| Cascading Style Sheets (CSS) is a method to define styles that can be applied to text and other elements within an HTML page. CSS documents contain rules defining which fonts a block of text should use, what kinds of spacing should be around certain elements such as images or table cells, or which colors are used with particular elements. When you use a style sheet, you can apply a single set of rules to every page within your site and have the site look consistent while maintaining the ability to change the rules and have the changes appear on every page you have applied the style sheet to immediately. Flash boasts support for the original CSS1 specification as a way to format HTML-formatted dynamic or input text within a SWF file. Note There are different versions of CSS. CSS2 has additional properties for formatting, although Flash does not support CSS2. Refer to http://www.w3.org/TR/REC-CSS1 for the CSS1 specification.
Although Flash supports only a subset of CSS1's properties, it is an excellent feature to use, because it allows you to easily format a block of HTML tagged text and have it look consistent with the rest of the site. There are two ways of adding style sheets to your Flash document: loading in a style sheet at runtime and defining the style sheet using ActionScript. Because you'll be using the same styles throughout the entire Tech Bookstore application, which is contained within several different SWF files, it is easier to use an external style sheet and load it into each of the separate SWF files. You can also use the same style sheet in the HTML pages you might also create, to help maintain consistency throughout your site, regardless of whether the page contains a SWF file or is only HTML code. 1. | Open the reviews.fla document again from the previous exercises and lock the form layer.
Open the reviews.fla document you worked on in previous lessons and lock the form layer. Select Frame 1 of the actions layer, in which you will add ActionScript in the following step. In the third step, you will create the external style sheet file that styles the text.
| 2. | Add ActionScript to reviews.fla, which will load a CSS file into reviews.swf at runtime.
In Frame 1 of the actions layer, add the following code before the existing code:
var flash_css = new TextField.StyleSheet(); flash_css.load("styles.css"); flash_css.onLoad = function(success:Boolean) { if (success) { review_txt.styleSheet = flash_css; } else { trace("Error loading CSS file."); } };
The code listed is similar to using LoadVars in earlier exercises. The first thing you do is create a new Timeline variable named flash_css to contain the new style sheet and then load an external CSS file called styles.css. You haven't created styles.css yet, so if you were to save and test this, you would see "Error loading CSS File" in the Output window. The next block of code triggers when Flash receives an onLoad event and takes a single parameter (success), specifying whether or not the style sheet has successfully loaded. If the style sheet loads, the code assigns the style sheet to the reviews_txt TextArea instance. If it wasn't loaded successfully, an error is sent to the Output panel, notifying you that it has failed.
If you test the SWF file now by pressing Ctrl+Enter (or Cmd+Return on the Mac), you see that Flash displays the error message in the Output panel, saying that the SWF file couldn't find the CSS file. This occurs because you currently don't have the style sheet in the TechBookstore directory yet.
 | 3. | Create a Cascading Style Sheet file called styles.css to define the text styles. Save the file into the TechBookstore folder.
Open any text editor on your computer, or even an editor such as Dreamweaver that has specific support for CSS. If you are using a PC, you probably have Notepad installed; if you are on a Mac, you should have TextEdit installed. Enter the following code and save the file as styles.css:
p { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #000000; } .headline { font-family: Arial,Helvetica,sans-serif; font-size: 24px; color: #999999; }
The style sheet defines two styles. One style applies to the <p> tag, and another style is a custom style called headline, which you will apply to the book's title in each review. The headline style will be grey text and 24 pixels in size to help differentiate the headline from the rest of the text making up the review. Save the file into the TechBookstore folder on your hard drive and close the text editor.
| 4. | Test reviews.fla again. If everything works correctly, save the document and publish the FLA file to generate an updated SWF file.
Test the Flash document by pressing Ctrl+Enter (or Cmd+Return on the Mac). Now if you click on the title of a book, Flash loads in the book's review and applies the style sheet to the TextArea. Save the file and republish the Flash document to update the SWF file in the TechBookstore folder.
 |
|
