FlasherDotOrg: AS3 Tutorials Part I (HTML Text & Hyperlinks)

HTML Formatting & Hyperlinks

Return to the Tutorials page

Goal: Apply HTML formatting to specific text in a text field and create two hyperlinks; one to a webpage and another to an email address.

Imported classes: flash.display.Sprite, flash.text.TextField and flash.text.TextFieldAutoSize

Methods: TextField(), TextFieldAutoSize() and addChild()

Flash version: Flash 9 Professional

Download final version

The ActionScript 3.0 Foundation Elements can be found in the Members' Section.

In this tutorial we will create two text fields. The first will receive HTML formatting and contain a hyperlink to a webpage. The second text field will contain a hyperlink to an email address.

Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it HTMLText_Hyperlinks and save it inside the FlasherAS3_PartI folder. In the Document Class box of the Properties panel, type HTMLText and then save the changes.

Open a new ActionScript file, name it HTMLText and then save it inside the Code folder.

You now have twenty-two separate files on your computer:

In the FlasherAS3_PartI folder -
LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla, CircleEllipse.fla, Sprites.fla, MovieClips.fla, Filters.fla, InheritingClasses.fla, FormattedText.fla, LoadExternalText.fla and HTMLText_Hyperlinks.fla.

In the Code subfolder -
LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as, MovieClips.as, Filters.as, InheritingClasses.as, FormattedText.as, LoadExternalText.as and HTMLText.as.

Keep both HTMLText_Hyperlinks.fla and HTMLText.as open as we will be working with both of them simultaneously.

Return to HTMLText_Hyperlinks.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your changes.

Return to HTMLText.as and type in the following code:

Line 01: package
Line 02: {
Line 03: public class HTMLText extends Sprite
Line 04: {
Line 05: public function HTMLText()
Line 06: {
Line 07: }
Line 08: }
Line 09: }

screenshot 1

Save the changes.

This tutorial will require the Sprite, TextField and TextFieldAutoSize classes so let's import them now.

Place your cursor at the end of line 2 and press Return/Enter.

On line 3 type: import flash.display.Sprite;

Press Return/Enter.

On line 4 type: import flash.text.TextField;

Press Return/Enter.

On line 5 type: import flash.text.TextFieldAutoSize;

Press Return/Enter to add a blank line on line 6.

Place your cursor at the end of line 10 and press Return/Enter.
All of our HTML text code will be placed between the constructor function's opening & closing curly braces.

screenshot 2

Save the changes. The set up is done; let's create some HTML text!

Let's create two text fields (myText and emailLink). First, let's give them each internal scope and place them in the main class instead of the constructor function as we may want to reference them from another custom class (AS file) in the future.

First, create the myText text field. Place your cursor at the end of line 8 and press Return/Enter.

On line 9 type: internal var myText:TextField = new TextField;

Press Return/Enter.

On line 10 type: internal var emailLink:TextField = new TextField;

Press Return/Enter to make line 11 a blank line.

Your code should look like this: [ view code ]

Now let's set the text value to A flash a day keeps life exciting! - FlasherDotOrg.

Place your cursor on line 14.

On line 14 type: myText.text = "A flash a day keeps life exciting! - FlasherDotOrg";

Press Return/Enter.

To ensure the text field automatically adjusts to the length of the text value add the autoSize property and set it to LEFT.

On line 15 type: myText.autoSize = TextFieldAutoSize.LEFT;

Press Return/Enter.

And finally, place the text field on the stage by utilizing the addChild() method.

On line 16 type: addChild(myText);

Your code should look like this: [ view code ]

Save the changes and then test the movie. Our text string now sits in the upper left corner of the stage.

screenshot 5

Excellent! Now let's add the second text field to the stage.

Return to line 16 in the code and press Return/Enter twice. Beginning on line 18 set the text value of the emailLink text field. That value is Email us here. Then place the text field on the stage.

On line 18 type: emailLink.text = "Email us here";

Press Return/Enter.

On line 19 type: addChild(emailLink);

Your code should look like this: [ view code ]

Save the changes and test the movie.

screenshot 7

Looks like there's one more thing to add...The default location of both text fields is x=0, y=0. Let's move the emailLink text field down the stage a little ways so there's no overlapping.

Place your cursor at the end of line 19 and press Return/Enter.

On line 20 type: emailLink.y = 20;

Your code should look like this: [ view code ]

Save the changes, test the movie, and now both text fields can be clearly seen on the stage because emailLink has moved down twenty pixels.

screenshot 9

Are you familiar with HTML formatting? HTML consists of instructions set in tags that are placed at the beginning and end of the text to be formatted.

Let's make the text string on line 14 italic by adding an tag at the beginning of the sentence and a tag at the end of it.
(Note: this tutorial does not teach HTML coding.)

Return to line 14 and change the code to match the following:

Line 14: myText.text = "A flash a day keeps life exciting! - FlasherDotOrg";

Your code should look like this: [ view code ]

Save the changes and test the movie.

screenshot 11

Interesting! The text on the stage reflects exactly what was typed in the text string, including the HTML tags.

What we need to add is the htmlText property! The text property will accurately reflect whatever is placed between the quotation marks. However the htmlText property will also reflect the HTML representation of the text field's contents.

Return to line 14 and change the code to match the following:

On line 14 type: myText.htmlText = "A flash a day keeps life exciting! - FlasherDotOrg";

Your code should look like this: [ view code ]

Now save the changes and re-test the movie.

screenshot 13

Ah, ha! Now the sentence is in italics. Let's try another one.

Return to line 14. This time let's make "FlasherDotOrg" bold and add an underline.

On line 14 type:
myText.htmlText = "A flash a day keeps life exciting! - FlasherDotOrg";

Your code should look like this: [ view code ]

Save the changes and test the movie.

screenshot 15

Now "FlasherDotOrg" is bold and underlined. You know what that formatting would be perfect for? A hyperlink to a website!

An HTML hyperlink begins with the <a href> tag and ends with the </a> tag. The website URL is placed inside the </a> tag. Return to line 14 and change the code to match the following:

On line 14 type: myText.htmlText = "A flash a day keeps life exciting! - <a href='http://www.flasherdot.org/'>FlasherDotOrg</a>";

Instead of placing double quotation marks ("") around the URL, a single quote ('') is placed before and after the URL.
(Note: the line of code may wrap around to the next line. This is normal and will not disrupt anything. The line number remains the same.)

Your code should look like this: [ view code ]

Save the changes and test the movie. Now click on the word "FlasherDotOrg" and the browser goes right to the website as we directed it to. Pretty cool!

screenshot 17

So how about adding a link to an email address?

Linking to an email address is done in much the same way. Return to line 18. Change the code to match the following:

On line 18 type: emailLink.htmlText = "Email us <a href='mailto:mail@mail.org'>here</a>";

Your code should look like this: [ view code ]

Save the changes and test the movie. When you click on the word "here", your Email Editor will launch (i.e. Eudora, Outlook) and a new email opens. The email address has been placed in the "To" section and is ready to go...

screenshot 19

And that's all there is to it!

So if you are going to be adding a hyperlink or HTML formatting, always set the text value through the htmlText property. If you need to brush up on HTML tags, do a quick search in a search engine. There are numerous, free charts and tutorials explaining basic HTML coding.

Next up, it's time to move forward into programmatic animation; animating objects on the stage using ActionScript 3.0! [ Programmatic Animation tutorial ]