manewc » Flash Text / HTML / CSS

[AS 3] Function for Creating Text Fields

admin — Mon, 10 Mar 2008 17:52:06 +0000

Nothing exciting today as I am getting sidetracked with another web project. Anyways I found this nice little function for creating text fields over at Adobe. I thought I would just add it here to my Actionscript library.

private function createTextField(x:Number, y:Number, width:Number, height:Number,border:Boolean=false):TextField {
            var result:TextField = new TextField();
            result.x = x;
            result.y = y;
            result.width = width;
            result.height = height;
            result.background = false;
            result.border = border;
            addChild(result);
            return result;
        }

You can call the function like:

var myTxt:TextField = createTextField(10, 10, 100, 20, false);
myTxt.type = TextFieldType.DYNAMIC; // or TextFieldType.INPUT
myTxt.text = "Here is some random text";

This will place a 100px (w) x 20px (h) text field at location x=100 and y=20 and will render without a border.

[AS 3] Loading an External .HTML File

admin — Fri, 07 Mar 2008 18:52:38 +0000

A little snippet of code to pull in an html file and place the html content to a text field.

package
{
	import flash.display.Sprite;
	import flash.text.*;
	import flash.net.*;
	import flash.events.*;

	public class loadHTML extends Sprite
	{
		private var txtField:TextField;
		private var HTMLData:String;
		private var myHTMLFile:URLLoader;

		public function loadHTML()
		{
			myHTMLFile = new URLLoader();
			myHTMLFile.addEventListener(Event.COMPLETE, onLoadHTML, false, 0, true);
			myHTMLFile.addEventListener(IOErrorEvent.IO_ERROR, ioError, false, 0, true);
			myHTMLFile.load(new URLRequest("/path/to/html/file"));
		}

		private function onLoadHTML(e:Event):void
		{
			HTMLData = e.target.data;
			initTextField();
		}

		private function initTextField():void
		{
			txtField = new TextField();
			txtField.x = txtField.y = 20;
			txtField.width = stage.stageWidth;
			txtField.multiline = true;
			txtField.wordWrap = true;
			txtField.autoSize = TextFieldAutoSize.LEFT;
			txtField.selectable = false;
			txtField.htmlText = HTMLData;

			addChild(txtField);

			myHTMLFile.removeEventListener(Event.COMPLETE, onLoadHTML);
			myHTMLFile.removeEventListener(IOErrorEvent.IO_ERROR, ioError);
		}

		private function ioError(e:IOErrorEvent):void
		{
			trace ("Error: File " + e.text + " could not be loaded");
		}
	}
}

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

admin — Thu, 06 Mar 2008 13:56:10 +0000

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 = "";
			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 += "";

			addChild(myTextField);
		}
	}
}

[AS 3] Text Links calling Actionscript Functions

admin — Tue, 04 Mar 2008 13:38:50 +0000

In this demo I have utilized the Button and the Yahoo! AlertManager component. I simply created a textfield in the upper left corner with an html anchor tag that calls a function within the Actionscript code.

Here is my Document Class file TextHTMLLinks.as:

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.events.TextEvent;
	import com.yahoo.astra.fl.managers.AlertManager;
    import fl.events.ComponentEvent;
	import flash.events.MouseEvent;

	public class TextHTMLLinks extends Sprite
	{
		private var myFormat:TextFormat;
		private var myTextField:TextField;

		public function TextHTMLLinks():void
		{
			// format the text
			var myFormat:TextFormat = new TextFormat();
			myFormat.size = 16;
			myFormat.font = "Arial";
			myFormat.color = 0xffffff;

			// create the text field and add the link
			var myTextField:TextField = new TextField();
			myTextField.autoSize = TextFieldAutoSize.LEFT;
			myTextField.multiline = true;
			myTextField.defaultTextFormat = myFormat;
			myTextField.htmlText = "

Here is my title

";
			myTextField.htmlText += "

Click here for the alert box

";

			// add the listener for the link
			myTextField.addEventListener(TextEvent.LINK, clickLink);

			// add the object to the stage
			addChild(myTextField);
		}

		private function clickLink(e:TextEvent):void
		{
			if (e.text == "alert")
			{
				AlertManager.createAlert(this, "Here is my message", "My Title: Alert Box",["close alert"]);
			}
		}
	}

}