TextFieldLink – AS3

Hey guys!

Finally I decided to make this blog a place to share the lil’ goodies I come across or make myself during my work 🙂 Hopefully it’ll also help you in yours too!

Today’s special is something called “TextFieldLink“. As the name implies, it is a subclass of flash.text.TextField (and thus inheriting all properties and functions of a traditional TextField). The only difference is that when you hover the mouse on it, the text content will be underlined, exactly like a link (href element) on an html page!

What it does is that it employs defaultTextFormat and setTextFormat, as well as htmlText to handle the appearance of the text inside TextFieldLink. You can use any TextFormat you want, any html content you want, the TextFieldLink will automatically handle the “underlining” for you 😉 Only 1 warning though, that this has not been tested with StyleSheet, so, please watch out when you apply css on TextFieldLink instances for it might not work at all!

Ok now what about usage? Many of us have the habit to put normal TextFields on the stage during authoring time, and TextFieldLink is exactly designed to help you with that! For example you have a TextField named “my_tf” on frame 1, then this line of code will “convert” it to TextFieldLink and replace the TextField instance with the TextFieldLink instance automatically, without you calling “removeChild”, “addChild”, or actually anything at all!

var textFieldLink:TextFieldLink = TextFieldLink.create(my_tf);


And it’s as simple as that!

Of course you then need to add CLICK event listener to the TextFieldLink instance (just like an ordinary button) to make it really work! Imagine, you can have a “link text” that appears like an ordinary html element inside a swf file (trust me, sometimes you want that :P) which, upon clicked on, will pop out a new window, download a PDF file, or even log you in or out of the web, etc. etc.

textFieldLink.addEventListener(MouseEvent.CLICK, onTextFieldLinkClickedHandler);
function onTextFieldLinkClickedHandler(event:MouseEvent):void
	// do whatever you want here


The source file for this class can be downloaded here

That’s all. Hope it helps 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s