06Mar

[AS 3] CSS and Flash: Adding Styles to a Text Field

6 comments so far

I thought it was interesting that we could add some CSS to the content in our Flash movies. Although there aren’t a lot of styles that can be applied, the basic styles are applicable. Here is a little demo of adding styles to html tags and CSS classes.

Here is the document class:

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.StyleSheet;

	public class FlashCSS extends Sprite
	{
		private var css:StyleSheet;
		private var body:Object;
		private var headerOne:Object;
		private var headerTwo:Object;
		private var paragraph:Object;
		private var myTextField:TextField;

		public function FlashCSS()
		{
			var css:StyleSheet = new StyleSheet();

			// create the styles
			var body:Object = new Object();
			body.fontFamily = "Arial";

			var headerOne:Object = new Object();
			headerOne.fontSize = 20;
			headerOne.fontWeight = "bold";
			headerOne.color = "#336699";
			headerOne.leading = 12;

			var headerTwo:Object = new Object();
			headerTwo.fontSize = 16;
			headerTwo.color = "#333333";

			var paragraph:Object = new Object();
			paragraph.color = "#000000";

			// set the styles
			css.setStyle("body", body);
			css.setStyle(".headerOne", headerOne);
			css.setStyle(".headerTwo", headerTwo);
			css.setStyle(".paragraph", paragraph);

			// generate the text field
            var myTextField:TextField = new TextField();
            myTextField.autoSize = TextFieldAutoSize.LEFT;
            myTextField.multiline = true;
			myTextField.width = stage.stageWidth;
			myTextField.wordWrap = true;

			// THIS IS IMPORTANT HERE TO CALL THE CSS BEFORE YOU PPO
			myTextField.styleSheet = css;

            myTextField.htmlText = "<body>";
			myTextField.htmlText += "Welcome To My Site";
			myTextField.htmlText += "Here Is My Subtitle

";
			myTextField.htmlText += "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.

";
			myTextField.htmlText += "Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.";
			myTextField.htmlText += "</body>";

			addChild(myTextField);
		}
	}
}

Share/Save/Bookmark

Categories: Actionscript 3, Flash Text / HTML / CSS

Thursday, March 6th, 2008 at 5:56 am and is filed under Actionscript 3, Flash Text / HTML / CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “[AS 3] CSS and Flash: Adding Styles to a Text Field”

  1. Posted by cmdrhlm 29th September, 2008 at 10:52 am

    I can’t get it to work. I’ve done everything to the letter.
    I don’t get any error’s, it simply won’t apply itself, so the text comes out unformatted.
    This is what I have so far.

    var css:StyleSheet = new StyleSheet();
    var header:Object = new Object();
    header.fontsize = 20;
    header.fontweight = “bold”;
    header.colour = “red”;
    css.setStyle(”.header”, header);

    var txtField:TextField = new TextField();
    txtField.multiline = true;
    txtField.wordWrap = true;
    txtField.styleSheet = css;
    txtField.x = 200;
    txtField.htmlText = “”;
    txtField.htmlText += i.getName();
    txtField.htmlText += “”;

    Please, please, please reply. I’ve tried many different ways of formatting the text, but none of them seem to stick. There must be something really basic I’m missing.

    -c

  2. Posted by Paul 28th October, 2008 at 5:20 am

    Hello!
    Great work!
    I have a strange problem with a styled textField and a htmlText loaded from XML file. I get a comma sign in SWF after a word in span.
    For example (in XML file): “After these words comma appearRest of the text.”
    In pure AS3 (like in your example) everything is OK.

  3. Posted by Paul 28th October, 2008 at 5:22 am

    Could you help me with the problem above ?
    Thanks very much

  4. Posted by Paul 28th October, 2008 at 5:35 am

    grrrr… Sorry, i don’t know how to add html code here :/
    I’ll try again :)

    …
    For example (in XML file): “<span class=’headerOne’>After these words comma appear</span><span class=’headerTwo’>Rest of the text.</span>”
    …

    Thanks

  5. Posted by admin 28th October, 2008 at 6:00 am

    Hey Paul, I am currently on vacation .. will be back on town on Thursday - if this issue isn’t resolved at that point feel free to post another comment here or email me as a reminder - can you post your files somewhere so it can be downloaded?

    Thanks, Morgan

  6. Posted by MikeS 3rd November, 2008 at 10:54 am

    Hey, I’m having a very similar problem. I went about my a little bit differently. I’m loading an external HTML and CSS. Everything checks out fine and i’m not getting any errors, but it just will not format the text!

    What can cause flash to ignore a stylesheet???
    Thanks!!

    Mike S

Leave a reply