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

##### Tutorial Details
• Difficulty: Basix
• Program: Flash CS5
• Estimated Completion Time: 10 mins

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.

The following is an exercise from Foundation Flash CS5 For Designers by Tom Green & Tiago Dias.

Congratulations to our three winners who all won a signed copy! And if you weren’t so lucky this time, help yourself to a sample chapter courtesy of FriendsOfEd. Enjoy!

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();
var linkSpan:SpanElement =new SpanElement();
var span:SpanElement = new SpanElement();
span.text = " to download the files for this book.";


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.SpanElement;


Tags: BasixTips
• Alex

Nice to see a new Friends Of Ed Flash book.I’m a big fan of this publisher and of course Tom Green’s efforts.But this is kinda off topic…Chapter 14 exercise files archive is corrupted.So Tom…do something for your fans:-)

• Tom Green

First I have heard of this. I’ll look into it.

• Tom Green

Alex, I have made FOE aware of this and they are looking into it. I’ll get back to you when they get back to me. Thanks for the catch.

• http://snaptin.com Ian Yates
Staff

Sorry about this guys, we were experiencing problems with the content delivery network responsible for all files on the Tuts+ sites. The devs have since sorted things out.

Thanks for bringing it to our attention!

• Alex

It took a while but FOE finally fixed that (and another one) archive.Thanks Tom.

• http://itvillage.site11.com It Village

great stuff