Flash: TextField actionscript hyperlink in AS3.0

In this article we cover how to get flash.text.TextFields HTML anchors/hyperlinks, to call actionscript functions, how to use CSS to style the up, over/hover and down/active and [UPDATE] visited states similar to hyperlinks in normal html, and targetting windows.

The applications of this are numerous. Perhaps clicking a hyperlink will deeplink into your Flash application without navigating away, or perhaps it would open up a dictionary definition on the term.

Here's the FLA

In this example clicking on the 3 links will show in the bottom text box where the link was meant to go.  This is based on the event handler receiving a flash.events.TextEvent.LINK event, as dispatched by formatting the '<a href=..' to dispatch the link event instead of the default navigateToURL.

The 'blog1' and 'blog2' links both go to the same URL, when either are clicked on both will change to the visited style.   This change color requires a hack, as the 'a:visited' isn't one of the CSS tags supported by Flash.   However we CAN overwrite the CSS style to display a different style, on the click.   This is more complex as we have to figure out, a) are we interested in changing all links that point to that location? or b) just the one that was clicked on?.   Keep in mind that this is a hack, and differs from the way browsers behave in that the links won't persist past that flash session, or across different TextFields unless you code it that way.

You can detect mouseRollOvers using the TextField.getCharIndexAtPoint(x:Number, y:Number) This will return the current character the mouse is over. From there you walk forward and backwards to the end of the word (looking for whitespace), and then presumably do something useful.  You can use for adding graphic end signs which I cover here.

An example with with code of this is at gamelan's site.  Source for a simpler example that highlights text is presented here. What he does in that is search through the body text for the desired word, draw a rectangle to match that words boundaries, place it over the TextField and adjust it's blend properties so that it appears highlighted, that shape could easily have button like properties. Another fun example is his inspiring labs.

In a future article I'll discuss how to clean and process HTML, and replace the links with internal flash link's if you are using CMS'd, progressive enhancement websites, with Flash as the RIA style/presentation layer.  So the same HTML will work as expected when in HTML only site (e.g. for search bots) or in the Flash only.

import flash.text.StyleSheet;
import flash.events.TextEvent;
 
var style:StyleSheet = new StyleSheet();
 
var hover:Object = new Object();
hover.fontWeight = "bold";
hover.color = "#00FF00";
var link:Object = new Object();
link.fontWeight = "bold";
link.textDecoration= "underline";
link.color = "#555555";
var active:Object = new Object();
active.fontWeight = "bold";
active.color = "#FF0000";
 
var visited:Object = new Object();
visited.fontWeight = "bold";
visited.color = "#cc0099";
visited.textDecoration= "underline";
 
style.setStyle("a:link", link);
style.setStyle("a:hover", hover);
style.setStyle("a:active", active);
style.setStyle(".visited", visited);
 
html_txt.styleSheet = style;
var htm:Array = new Array();
htm.push("
 
Example of HTML hyperlinks calling actionscript in AS3.0
 
");
htm.push("
 
 Click to visit <a href="event:http://www.TroyWorks.com">home</a> ");
htm.push("<a href="event:http://www.TroyWorks.com/blog/">blog1</a> ");
htm.push("<a href="event:http://www.TroyWorks.com/blog/">blog2</a>");
html_txt.htmlText= htm.join("");
 
function onHyperLinkEvent(evt:TextEvent):void {
	trace("**click**"+ evt.text);
	define_txt.text = ( "Clicked on " + evt.text);
	var str:String = html_txt.htmlText;
	str = str.split("'event:"+evt.text+"'").join("'event:"+evt.text+"' class='visited' ");
	html_txt.htmlText = str;
 
}
 
html_txt.addEventListener(TextEvent.LINK, onHyperLinkEvent);

Directing the click to specific target
You can redirect a link to a particular window by switching based on the text link e.g.

function onHyperLinkEvent(evt:TextEvent):void {
	trace("**click**"+ evt.text);
     switch(evt.text){
         case "home.html":
         case "aboutus.html":
         case "contactus.html":
                  onHyperlinkClick(evt.text, "_home");
         break;
        case "wiki":
                  onHyperlinkClick(evt.text, "_wiki");
         break;
        default:
                  onHyperlinkClick(evt.text, "_new");
         break;
 
    }
}
//uses 	import flash.net.navigateToURL;
	function onHyperlinkClick(URL : String, target : String) : void {
			trace("onHyperlinkClick " + URL);
			navigateToURL(new URLRequest(URL), target);
		}

Tagged as: css, html, hyperlink, stylesheet, textevent