Flash CS5 for Designers: TLF and Hyperlinks + Sample Chapter!

Every type of TLF text in Flash — Read Only, Selectable, and Editable — supports hyperlinks. All it takes to add a link in a text container is to type in your text, select a few words, and enter the desired URL into the Properties panel. Optionally, you can enter a target as well.

If you want the whole text container hyperlinked, use the Selection tool to select the container itself, and then use the Link and Target properties in the Advanced Character options area of the Properties panel in the same way.

Applying a hyperlink to text

As easy as this approach is, a downside is the hyperlink underline added to the text. It simply can’t be removed. Still, hyperlinks may be absolute, such as http://www.SuperSite.com/thisPageHere.html, or relative, such as../thisOtherPage.html. For relative paths, it’s important to know that the path will be determined not from the point of view of the SWF, but from the HTML file that contains it.

For example, you may choose to keep all your HTML files in the root of your website. Because you’re an organized developer, you may choose to put all your image files in their own subfolder of the root, and you may just do the same with your Flash content. From a SWF’s point of view, the relative path to all HTML files requires stepping back one folder. So, if a SWF links to one of those pages, you might be tempted to precede the destination’s filename with ../, but don’t! The HTML file that contains the SWF in question is already in the same folder as the destination page, and it’s the containing HTML file’s point of view that matters.

Using ActionScript to Add Hyperlinks to TLF Text

As you saw in the previous example, you can use a piece of text in a container to trigger an event on the Flash stage. It goes without saying that the same piece of text can be used to launch a web page. Rather than rehash everything done previously, open the enclosed TLF_Hyperlink_AS.fla file and let’s see how this is accomplished.

Step 1: Select

Scroll down to line 32 of the Script pane.

Select the word NONE, and change it to UNDERLINE. The result of this change is to actually have the clickable text look like a common HTML hyperlink that uses an underline.

Step 2: LinkElement()

Press the Enter (Windows) or Return (Mac) key twice, and enter the following code block:

var link:LinkElement = new LinkElement();
link.href = "http://www.friendsofed.com";
var linkSpan:SpanElement =new SpanElement();
linkSpan.text = "Click here ";
link.addChild( linkSpan);
var span:SpanElement = new SpanElement();
span.text = " to download the files for this book.";
p.addChild(link);
p.addChild(span);
textFlow.addChild(p);

As you may have gathered, all items in a TLF container are influenced or managed by elements. The first two lines establish that a variable called link will be managed by a LinkElement and will be placed in a LinkElement() object. The next line uses the common href tag from HTML to identify the link.

Now that you have established where the link is going — to the friends of ED website — you create a span for the text that will be clicked, put the text into the span, and use the addChild() method to put the linkSpan on the stage.

The rest of the code adds the remaining text, associates the link to the text in the sentence (p), puts the sentence on the stage, and flows it into the textFlow container.

Step 3: Test

Save the file, and test the movie. The text containing the link, as shown below, is blue and sports a rather spiffy underline. Click the link, and the friends of ED homepage opens.

Using the UNDERLINE constant adds the common HTML underline users are used to.

Import Statements Used for This Exercise

These are the import statements used for this exercise:

import flash.display.Sprite;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.Configuration;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.formats.TextAlign;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.edit.EditManager;
import flashx.undo.UndoManager;
import flashx.textLayout.formats.TextDecoration;
import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.elements.SpanElement;