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.
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(); 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
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.
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;
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post