Styling text with an external CSS in ActionScript 3
February 21st, 2010 § Leave a Comment
This post couldn’t have been written without the precious help of Samuel Gentile, which taught almost everything that I know about ActionScript.
When developing websites with ActionScript, I often put texts using textfield.htmlText instead the ordinary textfield.text property. The main advantage is that you can style the text body by an external CSS, so if you need to change quickly the text style, you won’t have to open the ActionScript code and embed a new character.
If you just want to use standard characters for your SWF, it comes very handy and does not require much more time than styling a textfield with an ordinary (but less flexible) textFormat variable. So let’s see how to do this.
You can download the code and the files here
In this example we want to output in the SWF a certain text nested into the structure of an XML file and then we want to style it with a Cascade Style Sheet.
So here’s our XML file:
<?xml version="1.0" encoding="UTF-8"?> <root> <section> <name>San Diego - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 1 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Osaka - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 2 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Zagreb - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 3 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Barcelona - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 4 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Melbourne - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 5 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Goa - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 6 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Dakar - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 7 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> <section> <name>Shanghai - ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶</name> <description><![CDATA[Description 8 ~¡¢£¤¥¦§¨©ª«¬_®¯°±²³’´µ¶ <>]]></description> </section> </root>
We want to create a vertical pile of textfields. The names will be displayed in black and in bold. The descriptions will be displayed in a dark grey. Here’s the css we’re going to use:
/*
Styling textfield in As3 with stylesheets
*/
/* Works for all textfields */
body
{
font-family: "Helvetica", "Helvetica Neue", "Arial", "Verdana", "Tahoma", sans-serif;
font-size: 12px;
text-align: left;
}
/* Styles only elements of the "name" class */
.name
{
color: #000000;
font-weight: bold;
}
/* Styles only elements of the "description" class */
.description
{
color: #2B2B2B;
font-weight: normal;
}
And here’s our ActionScript 3 code:
package {
/*
* @author Andrea Collet
*/
/**************************************************************************
* Import classes
**************************************************************************/
import flash.display.MovieClip;
// These classes are needed to create a textfield and to make textfields
// understand css
import flash.net.URLLoaderDataFormat;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.StyleSheet;
// This class is needed to process xml documents
import flash.xml.*;
// These classes are needed to retrieve documents from remote or
// local URLs
import flash.net.URLLoader;
import flash.net.URLRequest;
// This class are needed to tell to the SWF when a file has
// been downloaded
import flash.events.Event;
public class main extends MovieClip
{
/**************************************************************************
* Declare variables
**************************************************************************/
var namesArray:Array;
var descriptionsArray:Array;
var tfNamesArray:Array;
var tfDescriptionsArray:Array;
var xmlLoader:URLLoader;
var xmlUrl:URLRequest;
var xmlDoc:XML;
var itemList:XMLList;
var cssLoader:URLLoader;
var cssUrl:URLRequest;
var cssDoc:StyleSheet;
function main()
{
loadXml();
}
/**************************************************************************
* Load the xml
**************************************************************************/
function loadXml():void
{
xmlUrl = new URLRequest("xml/myXmlDocument.xml");
xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, onXmlLoaded);
xmlLoader.load(xmlUrl);
}
function onXmlLoaded(evt:Event):void
{
xmlDoc = new XML(evt.target.data);
itemList = xmlDoc.section;
xmlLoader.removeEventListener(Event.COMPLETE, onXmlLoaded);
loadCss();
}
/**************************************************************************
* Load the css
**************************************************************************/
function loadCss():void
{
cssUrl = new URLRequest("css/style.css");
cssLoader = new URLLoader();
cssLoader.addEventListener(Event.COMPLETE, onCssLoaded);
cssLoader.load(cssUrl);
}
function onCssLoaded(evt:Event):void
{
cssDoc = new StyleSheet();
cssDoc.parseCSS(evt.target.data);
cssLoader.removeEventListener(Event.COMPLETE, onCssLoaded);
readData();
}
/**************************************************************************
* Create Array of strings
**************************************************************************/
function readData():void
{
namesArray = new Array();
descriptionsArray = new Array();
trace("texts as strings\n");
for (var i:uint = 0; i < itemList.length(); i++)
{
namesArray.push("" + "" + itemList[i].name + "" + "");
descriptionsArray.push("" + "" + itemList[i].description + "" + "");
trace(namesArray[i]);
trace(" " + descriptionsArray[i]);
}
createTexts();
}
/**************************************************************************
* Create Textfields
**************************************************************************/
function createTexts():void
{
tfNamesArray = new Array();
tfDescriptionsArray = new Array();
trace("\n\nTexts as textfields:");
for (var i:uint = 0; i < itemList.length(); i++)
{
tfNamesArray[i] = new TextField();
tfNamesArray[i].x = 10;
tfNamesArray[i].y = i * 40;
tfNamesArray[i].width = 500;
tfNamesArray[i].selectable = false;
tfNamesArray[i].wordWrap = true;
tfNamesArray[i].multiline = true;
tfNamesArray[i].styleSheet = cssDoc;
tfNamesArray[i].htmlText = namesArray[i];
tfDescriptionsArray[i] = new TextField();
tfDescriptionsArray[i].x = 30;
tfDescriptionsArray[i].y = (i * 40) + 15;
tfDescriptionsArray[i].width = 500;
tfDescriptionsArray[i].selectable = false;
tfDescriptionsArray[i].wordWrap = true;
tfDescriptionsArray[i].multiline = true;
tfDescriptionsArray[i].styleSheet = cssDoc;
tfDescriptionsArray[i].htmlText = descriptionsArray[i];
trace(tfNamesArray[i].htmlText);
trace(" " + tfDescriptionsArray[i].htmlText);
addChild(tfNamesArray[i]);
addChild(tfDescriptionsArray[i]);
}
}
}
And this is our result:
The first thing we have done is to load the xml and the css to ensure that all the needed data is loaded (we could have put some code to check for errors, but that’s not related with this post). Then we stored all the data in two arrays of strings, one for the name fields and one for all the description fields. Lastly, we created all the textfields, given them a position, assigned them a stylesheet and put the strings into their htmlText property.
We have been careful to put the right tags to style our text, otherwise it would have been displayed all with the same default font (in my system is Times New Roman, but it may vary depending on your operating system and fonts you have installed). The tags were put inside the strings, before and after each item text:
namesArray.push("<body>" + "<span class=\"name\">" + itemList[i].name + "</body>" + "</span>");
descriptionsArray.push("<body>" + "<span class=\"description\">" + itemList[i].description + "</body>" + "</span>");
Try to change the font-style field in your CSS, as instance using “Georgia” or “Trebuchet”, or changing the font-size or weight, then re-run (not re-compile!) your swf. You’ll see how it’s easy to change typography.
