ActionScript 3 Tutorial – Using HTML and CSS « Video Training

ActionScript 3 Tutorial – Using HTML and CSS

December 3, 2008 at 4:04 pm Leave a comment

Beginners with Flash ActionScripting often don’t realize you can embed basic HTML and CSS into their code.

ActionScript Tutorial – HTML and CSS in AS 3

In this tutorial we’ll be looking at how incorporate HTML and CSS into your Actionscript. You’re probably wondering why you would want to do this and how it would be beneficial? Well, you may be working on a large Flash project that may require several different fonts. This can be pretty time consuming, as you’d have to create all the different text field and text format properties individually in Actionscript. Using HTML and CSS as a sort of text editor would reduces the amount of code you’d have to write. The Flash player has limited support for HTML and CSS tags (shown below) however it does cover the most common tags, certainly enough to use it as text editor. Below we’ll create 2 examples of an application, first we’ll create the Stylesheet within our Actionscript and secondly we’ll use an external CSS file and load it into our application.

Code Example Download ( includes working files and code examples )

HTML and CSS tags supported by the Flash player;

CSS Tags

<font-family> <font-size> <font-style> <font-weight> <color> <text-align> <margin-left> <margin-right> <display>

Inside Actionscript

In this method we’ll be creating everything inside our actionscript, this means we’ll effectively have to create all the stylesheet properties using actionscript. We’ll do this by creating new objects that’ll act as our CSS selectors; we’ll then target these objects inside our text fields using HTML tags. As we are creating the Stylesheet inside Actionscript we need access to the StyleSheet class, so the first thing we’ll do is create a new StyleSheet object called cssStyle. This will give us access to all the properties, methods and events of the StyleSheet class.

var cssStyle:StyleSheet = new StyleSheet();

We’ll create a new object called body this will give us access to the Object class; the object class is at the root of the ActionScript class hierarchy. Think of the objects in the rest of the code as a HTML tags, for example we have body, header and manContent.

var body:Object = new Object();

We’ll set the font for this Object using the fontFamily property to Arial.

var body.fontFamily = “Arial”;

Next we’ll create the header for the application, headers have to stand out so we’ll make sure our properties reflect that. Again we start by creating a new Object but this time it’s called header.

var header:Object = new Object();

We want the header to stand out so we’ll change the font size using the fontSize property to 18px.

header.fontSize = 18;

Using the color property we’ll change the colour of the header text to red.

header.color = “#FF0000″;

To make it stand out that little bit more we’ll make the header bold by changing the fontWeight property to bold.

header.fontWeight = “bold”;

We’ll create another object called mainContent and set the fontSize property to 14 px.

var mainContent:Object = new Object(); mainContent.fontSize = 14;

Using the setStyle() method we add each style to the css instance of the stylesheet class.

cssStyle.setStyle(“.header”, header); cssStyle.setStyle(“.mainContent”, mainContent); cssStyle.setStyle(“body”, body);

We create a new TextField object called theText, this TextField object will give us access to all the properties, methods and events of the TextField class. We’ll use this TextField object to hold all our text.

var theText:TextField = new TextField();

Using the X and Y properties we position the TextField where we want on the stage.

theText.x = 425; theText.y = 100;

We set the width of the TextField to 300px using the width property.

theText.width = 350;

We need to set the multiline property to true to ensure that the text is set on multiple lines, if this was set to false all the text would remain on a single line.

theText.multiline = true;

We want to make sure the text inside the TextField always word wraps the text. To do this we set the wordWrap value to true.

theText.wordWrap = true;

We set the TextFieldAutoSize property to LEFT; this sets the text to left justified.

theText.autoSize = TextFieldAutoSize.LEFT;

We use the styleSheet property to set the cssStyle stylesheet to our TextField.

theText.styleSheet = cssStyle;

Think of these next lines as an HTML page, we have our body tag along with our header and mainContent classes.

theText.htmlText = “<body>”; theText.htmlText += “HTML and CSS in ActionScript 3.0 ”; theText.htmlText += “In this method we’ll be creating everything inside our actionscript, this means we’ll effectively have to create all the stylesheet properties using actionscript. We’ll do this by creating new objects that’ll act as our CSS selectors; we’ll then target these objects inside our text fields using HTML tags. As we are creating the Stylesheet inside Actionscript we need access to the StyleSheet class, so the first thing we’ll do is create a new StyleSheet object called cssStyle. This will give us access to all the properties, methods and events of the StyleSheet class. ”; theText.htmlText += “</body>”;

Finally we add our TextField to the display list by using the addChild() method.

addChild(theText);

External Method

In this method we’ll load an external CSS file into our Actionscript and use that to format the text in the application. This requires us to create a simple loader to load the CSS file into the application, let’s take a closer look at the code below.

First thing we’ll do is create a new String object called pageContent. Inside this String object we have the text that’ll be used in the application, you’ll notice inside the String there is some HTML tags. The HTML tags will be styled by our external Stylesheet.

var pageContent:String = “<H1>External Method</H1>\n\n In this method we’ll load an external CSS file into our Actionscript and use that to format the text in the application. This requires us to create a simple loader to load the CSS file into the application, let’s take a closer look at the code below.”;

Next we create a new Sprite object called textContainer, this Sprite object will hold all our content. A Sprite is just a movie-clip without a timeline.

var txtContainer:Sprite = new Sprite();

We position the Sprite object on the stage by changing the X and Y properties to 50 and 100px respectively.

txtContainer.x = 50; txtContainer.y = 100;

Using the addChild() method we add the Sprite object to the stage, this will add it to the display list making it visible when we preview or publish the file.

addChild(txtContainer);

First we create a new TextField object called myText, this TextField object will give us access to all the properties, methods and events of the TextField class. Later we’ll add our String content to this TextField, for now we’ll just add some basic properties such as width, height and word wrap.

var myTxt:TextField = new TextField();

Using the width property we’ll change the width of the TextField to 300px.

myTxt.width = 300;

We want to make sure the text inside the TextField always word wraps the text. To do this we set the wordWrap value to true.

myTxt.wordWrap = true;

We set the TextFieldAutoSize property to LEFT; this sets the text to left justified.

myTxt.autoSize =TextFieldAutoSize.LEFT;

We want the TextField to be added to the Sprite container object, by assigning the addChild() method to the txtContainer adds the TextField to the Sprite object.

txtContainer.addChild(myTxt);

Since we’re using an external document we need to load that document into our Actionscript, we’ll do this by setting up a simple loader.

First we’ll create a new URLLoader object called cssLoader. This object will give us access to all the properties, methods and events of the URLLoader class.

We’ll use this to load the data. var cssLoader:URLLoader = new URLLoader();

Next we want to request the file to load, we do this by creating a new URLRequest object. Inside the brackets we point to the file that we want to load into our application, for our code we point to the CSS file.

var cssRequest:URLRequest = new URLRequest(“/loadercss.css”);

We’ll give our cssLoader an addEventListener() method to listen for a COMPLETE event. The COMPLETE event essentially listens for when the loader has finished loading, it’s basically listening for the css file to finish loading. We’ll call this addEventListener() cssLoaderComplete.

cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);

Using the load method of the URLLoader class we load in the file from the URLRequest object. cssLoader.load(cssRequest);

Next we’ll set up a function for our cssLoaderComplete eventListener, this function will fire when the css file has finished loading. Inside the function we have a number of different things happening, first we create a new Stylesheet object called css this will give us access the stylesheet class. The parseCSS() method of the stylesheet class fills our stylesheet object with the CSS we have loaded into the application. We then set our myTxt TextField to use the CSS Stylesheet object and finally we add the text inside the pageContent String into our TextField.

function cssLoaderComplete(evt:Event):void { var css:StyleSheet = new StyleSheet(); css.parseCSS(URLLoader(evt.target).data); myTxt.styleSheet = css; myTxt.htmlText = pageContent; }

Entry filed under: ActionScript. Tags: actionscript 3 tutorial, Beginners ActionScript 3 Tutorial.

Adobe Air Tutorial – Create a Application Beginners Java Programming Tutorial – Datatypes

Video Training – Tutorials