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.
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);
AS3: Bug with TextField.appendText with whitespace
In Flash 9.0 r28, 9.0 r48 when appendingText I get wonkiness.
-
output_txt.appendText("A:\r");
-
output_txt.appendText("B:");
Outputs
A:B:
Should Be
A:
B:
In another case, when using other tabs and newlines, I've also had it do something like this
Outputs
A
:B:
Weird!
The solution I've found is adding an extra space at the end (after the \r)
-
output_txt.appendText("A:\r ");
-
output_txt.appendText("B:");
Outputs
A:
B:
FlashCS3: Tip to speed compilation
Flash CS3 has improved compiling speed over Flash8, however seemingly innocent use fonts can still bring compile times to a halt. with a font like Futura, an missed 'embed All' can turn your compile times to 30-45 seconds, as every compiler requires Flash to copy every character in the entire world...every time. Needless to say 15-30 seconds doesn't seem like much, but if your compiling often, this can reduce
Going through and removing font embedding from every textfield is somewhat tedious. But you can use the MovieExplorer to help drill down, you may even find text fields you've missed. I'm sure somebody has a JSFL to help.
The other tips are when using Flash CS3 and blessed with a timeline, put a temporary script (gotoAndPlay) to skip the intros and tutorials to delve into the heart of the what your working on at any given time. When using Cogs you can do similar things by passing a non-default initial state in the constructor.