Teaching > Flash notes

CSS and Flash

Internal CSS and Flash

Create a new flash document. Select the type tool and create a large text area on the screen, changing the type to dynamic. Then give it an instance name of myText.

Create a new layer, rename it actions and then open the actions paneland type the following code:

var style:StyleSheet = new StyleSheet();
style.setStyle("p",{color:"#CC0000"}); 
style.setStyle("p",{fontSize:"60"});
myText.styleSheet = style;
myText.htmlText = "<html> <body><p> hello!!</p></body></html>";

You create a new style sheet and attach this to a variable called style. Then we define styles we are going to apply using the setStyle, here we are manipulating the p attribute. Then you attach the style to the dynamic text box and specify that the text will be html text.

Control / Test Move

Save your file as internalCSS.fla

External CSS


Using notepad create a CSS file with the following code

 p {
 font-family: Times New Roman, Times, _serif;
 font-size: 44;
 font-Style: italic;
 margin-left: 10; 
 }

Now in flash modify the code you created earlier to match below:

var CSSLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest("mystyle.css");
var style:StyleSheet = new StyleSheet();

CSSLoader.load(cssRequest);
CSSLoader.addEventListener(Event.COMPLETE, cssLoaded);

function cssLoaded (event:Event):void{
     style.parseCSS(CSSLoader.data);
     myText.styleSheet = style;
     myText.htmlText = "<html> <body><p> hello!!</p></body></html>";
}

The URLLoader and URL Request have beenused before in the loading image example. Here we load the CSS file and when this is loaded the function CSS is called. This assigns the data from the file as CSS to the style variable and assigns this to the text.

Control / Test Movie

Save your file as externalCSS.fla.

You can look in the help file and this will gie you a list of all the css attributes you can use within flash.