CSS (Cascade Style Sheets) are a great way to format HTML, XHTML, XML ect... Also a great tool to format flash text fields. In this tutorial I'll show you how to use CSS and Flash together.
First off I'll go through the basic rules of CSS flash properties. Flash will only recognise what the TextFormat properties hold, here is a basic explanation below.
- TextFormat.color = 0xFFFFFF; would be { color:#FFFFFF; }
- TextFormat.size= 14; would be { font-size: 14px; }
- TextFormat.leading = 1.5; would be { line-height: 1.5; }
A great way to get familiar with Flash's TextFormat properties is to set up a new var in flash, actually I'll show you.
- Create a new flash file, call it css_test.fla,
- on the first frame type in this :
then when you type in test_fmt then hit full stop (.) a panel will pop up and show you all the properties associated with the TextFormat class.
OK lets start. First off lets make the CSS File.
- Create a new file and name it flashStyleSheet.css
- You can use a pain text editor or your favorite html editor
- Next lets start with the first line
/* This will be used for regular text and <p></p> tags within flash */
p { color: #000000; font-family: font_regular; font-size: 14px; }
/* The .bold class is for bold text within flash */
.bold { color: #000000; font-family: font_bold; }
/* The .italic class is for italic text within flash */
.italic { color: #000000; font-family: font_italic; }
/* This is used for a-href links within flash*/
a:link {font-family: font_regular; font-size: 14px; color: #FF0066; text-decoration: underline;}
/* This is used for a-href mouse hovers*/
a:hover{font-family: font_regular; font-size: 14px; color:#0099FF; text-decoration: none;}
/* The .text-title class is just one type of style we are using for our text titles */
.text-title{font-size: 21px; font-family: font_regular; color:#FF0000;}
That's it for our css file.
Next let's setup our flash file.
- Create a new flash file
- name it flashCSS.fla
- Next lets start with the first line
var flashCSS = new TextField.StyleSheet();
// Url path to the css file
var cssURL = "CSS/flashStyleSheet.css";
// Start the StyleSheet object load process
flashCSS.load(cssURL);
// Check to see if the file has loaded into flash
flashCSS.onLoad = function (success:Boolean){
if(success){
trace('Successfully loaded');
// If it loads, call the text field function
loadTextField();
}else{
// If there was an error, make sure you are pointing to the write path to the css file
trace('There was an error loading the [CSS] file');
}
}
function loadTextField(){
// Setup a new String variable to hold your html text
var htlmString:String = new String();
// REGULAR WITH LINK
htlmString += '<span class="text-title">Welcome to our web site. This is a REGULAR text example.</span><br />'
+ '<p>Lorem ipsum dolor <a href="http://www.in2net.com.au">sit amet</a>, consectetur adipiscing elit. Donec leo. Ut vestibulum ornare risus. Proin lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ligula.'
+ 'Donec dui. In mattis, felis nec adipiscing auctor, elit velit interdum metus, ut feugiat justo justo eget arcu.</p><p></p>'
// BOLD
+ '<span class="text-title">This is a BOLD text example.</span><br />'
+ '<span class="bold">Fusce porttitor, risus quis cursus eleifend, lorem nibh rhoncus dui, vitae lacinia nulla nunc eu nisl. Sed sit amet est. Etiam at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed interdum lacus ultrices arcu.</span><p><br /></p>'
// ITALIC
+ '<span class="text-title">This is a ITALIC text example.</span><br />'
+ '<span class="italic">Donec sed purus vitae tortor tincidunt sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor lorem, faucibus eu, tincidunt bibendum, molestie nec, augue. Fusce augue urna, ultricies non, convallis vel, ultricies et, justo. Praesent sit amet enim vitae diam auctor condimentum. Proin neque lacus, gravida in, tempus nec, pellentesque eget, magna. Duis et eros vel mauris porta tincidunt. Morbi ege enim nec felis accumsan luctus.</span>'
// CREATE A TEXT FIELDS AND IT'S PROPERTIES
var txtField:TextField = this.createTextField("txtField", this.getNextHighestDepth(), 100, 100, 600, 0);
txtField.autoSize = true;
txtField.html = true;
txtField.wordWrap = true;
txtField.multiline = true;
txtField.antiAliasType = 'advanced';
txtField.embedFonts = true;
txtField.styleSheet = flashCSS;
txtField.htmlText = htlmString;
}
That's it we're finnished to view the full source code Click Here