Start the Flash program. Click "Flash File(ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation project.
Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button, and type in the code below to import the Flash utilities necessary to utilize the Flash style sheet and text field classes.
import flash.display.Sprite;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
Type the code starting at the next line of the ActionScript 3 editor to create a StyleSheet object named "style" to store all CSS selectors in and a general Object named "heading" to store the styles for the heading selector.
var style:StyleSheet = new StyleSheet();
var heading:Object = new Object();
Type the code starting at the next line of the ActionScript 3 editor to set the values of properties of the heading selector such that the text selected with the heading selector will have: a bold font weight, a color of magenta, a 16-point font size, a letter spacing of 3 pixels, indentation of 50 pixels, underlining, a font type of Times Roman and a leading of 20 pixels.
heading.fontWeight = "bold";
heading.color = "#FF00FF";
heading.fontSize = 16;
heading.letterSpacing = 3;
heading.marginLeft = 50;
heading.textDecoration = "underline";
heading.fontFamily = "Times";
heading.leading = 20;
Type the code starting at the next line of the ActionScript 3 editor to create another object called "body" to create a HTML selector named "body" that sets the tag's fontStyle property to italic and the leading property to 20 pixels.
var body:Object = new Object();
body.fontStyle = "italic";
body.leading = 20;
Type the code starting at the next line of the ActionScript 3 editor to attach the heading and body selectors created to the CSS style object.
style.setStyle("heading", heading);
style.setStyle("body", body);
Type the code starting at the next line of the ActionScript 3 editor to create: a TextField named "label"; the HTML text (with the header and body selectors applied) that will be placed into the TextField, attach the style sheet to the TextField and display the TextField and its style sheet formatted text on the Flash stage.
var label:TextField = new TextField();
label.height = 200;
label.width = 500;
label.styleSheet = style;
label.htmlText = "<heading>Hello is indented 50 pixels and has the \n\"heading\"styles associated with the \nheading Style selector.</heading>. <body>\nNext lines are sperated with 20 pixels of leading\nThe next line down\nThe next line</body>";
addChild(label);
Copy and paste the code into the ActionScript 3 editor to ensure the code syntax is error free and the cascading style sheet program runs correctly.
import flash.display.Sprite;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
var style:StyleSheet = new StyleSheet();
var heading:Object = new Object();
heading.fontWeight = "bold";
heading.color = "#FF00FF";
heading.fontSize = 16;
heading.letterSpacing = 3;
heading.marginLeft = 50;
heading.textDecoration = "underline";
heading.fontFamily = "Times";
//heading.textAlign = "center";
heading.leading = 20;
var body:Object = new Object();
body.fontStyle = "italic";
body.leading = 20;
style.setStyle("heading", heading);
style.setStyle("body", body);
var label:TextField = new TextField();
label.height = 200;
label.width = 500;
label.styleSheet = style;
label.htmlText = "<heading>Hello is indented 50 pixels and has the \n\"heading\"styles associated with the \nheading Style selector.</heading>. <body>\nNext lines are sperated with 20 pixels of leading\nThe next line down\nThe next line</body>";
addChild(label);
Click "Test Movie" in the Control menu to play the Cascading Style Sheet program. Observe that the text is formatted with the selector properties you specified in the StyleSheet object.