Using

If you stumbled upon this page without having completed the first page, do take a few moments to catch-up with us. Click here to return to the previous page. For everyone else...you, let's continue to learn more about the ActionScript of this animation.

Code Explanation
The following section will explain why the code works the way it does:

var format = new TextField.StyleSheet();

Before we can use CSS in Flash, we have to first create a new object to control the flow of the CSS data throughout your animation. This line creates a new style sheet object for use in Flash. The variable format will be used in the place of new TextField.StyleSheet();

A more important note is that the variable format now has access to all the cool methods that the Style Sheet class has. For example, you can simply type format.load to load a CSS file. Simply put, this line bridges the arcane code contained in the Style Sheet class and the simple code we all enjoy so much.

---

var path = "http://www.kirupa.com/.../flash.css";

This line specifies the location of the CSS file that will be loaded into Flash.

---

var quick = "<br><p class='one'>The quick Kirup...";

The variable quick contains the text that will be displayed in the text field. The actual line is quite long, so I only reproduced a very small portion above. As you can notice, the text is formatted with HTML tags. HTML tags will be rendered properly because, if you remember, you clicked the Render Text as HTML button in the Text Properties panel. I will elaborate on this line later.

---

format.load(path);

In this line, you tell Flash to load the CSS file to the object format. Remember that format is just an extension of the TextField.StyleSheet() object/class you read earlier.

---

format.onLoad = function(loaded) {
 if (loaded) {
   output.styleSheet = format;
   output.text = quick;
 } else {
   output.text = "Error loading CSS file!";
 }
};

This function actually applies the CSS formatting to the text field you created in your movie. Before we apply the CSS file though, I make sure to tell Flash to ensure the CSS file loads first before displaying the text in the text field. Only after the CSS file loads do I tell Flash to transfer the data in format and the HTML text in quick to the text field named output.

Of course, there are times when the CSS file may not load because of a misspelled name in the URL, so I have an escape command that displays "Error loading CSS file!" when the CSS file does not fully load. You can test it out by simply adding a random character to the URL in the variable Path and previewing the animation.

---

---

Quick Run-Through
This section provides a quick review of this animation. First, you have a text field named output. At the same time the text field appears, the code is churning in the background. First, the variable format is bestowed with all the powers of the Textfield.StyleSheet object/class. Next the path of the CSS file and the text that will be displayed in the text field are created.

The section of code is concluded by a function that activates when the movie loads (onLoad.) First, Flash checks to make sure the CSS file is loaded, and if the CSS file is loaded, the style sheet gets applied to the text field, and finally the HTML text is displayed in the text field also. Of course, the HTML text is rendered into regular text formatted with the CSS styles you applied just one line earlier.

You are not quite done with this tutorial though. While you should be able to understand the code behind the animation, you may be interested in CSS and the properties of CSS that Flash supports.

Let's proceed to the next page.