Flash: TextField actionscript hyperlink in AS3.0 March 14, 2008
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.
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.
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 the links won't persist past that flash session, or across different TextFields unless you code it that way.
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); //note Flash doesn't support a:visited
-
-
html_txt.styleSheet = style;
-
var htm:Array = new Array();
-
htm.push("
-
<p align="center">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;
-
//// update the link to the 'visited' state'
-
-
str = str.split("'event:"+evt.text+"'").join("'event:"+evt.text+"' class='visited' ");
-
html_txt.htmlText = str;
-
}
-
-
html_txt.addEventListener(TextEvent.LINK, onHyperLinkEvent);
2 responses to 'Flash: TextField actionscript hyperlink in AS3.0'
Great article, thanks! Is there a way to set a visited link in Flash?
Thanks, Troy! This a big help. i also appreciate your lightning fast response. This is a great blog. Thanks for all your hard work.
Add a Comment:
You must be logged in to post a comment.