Add this to the list of things I should have already known!
Story
I’ve got an html enabled text box and was trying to devise a way that I could have a hyperlink anchor tag not link to a webpage but actually do something flash. It didn’t seem possible, and I looked through all the different html css combinations I could think of. I finally resorted to trying to use some component like Deng or FlashML. FlashML had a smaller footprint and seemed to do more what I wanted, so I started investigating it. To my dismay, the support for it was few and far between. I found an older version that came with an example file and then a newer one with some documentation but no example and I found no examples any where else. So Lee, if you ever read this, some new examples could be nice. In the documentation I was reading about a functino called AddASFunction and the example html line was very interesting:
I started looking through the rest of the documentation to find this asfunction use. But all it had was:
The href attribute can include the asfunction string which allows the link provided by the anchor to call a function in Flash. More of this can be found within the addASFunction definition in this help document.
I knew I was on to something, asfunction. So a quick google search and I found the official doc! I was shocked that I had the tool to do this the whole time! Well, shocked and feeling like an idiot for never having heard of it before. I knew it could be done somehow, but had no idea that it was already a feature of htmlText in flash! So now that you know my embarrassing story, I’ll let you in on the secret.
Overview
In flash, you can allow html text within a text area. You either set the text html property as true with actionscript (my_txt.html = true;) or click the ‘Render text as HTML’ button in the properties window of the text area. You cannot enable html text on static text areas however. You can have links and various html elements (but not full html). Usually links have a url in the href attribut of the anchor tag, but flash will read a special value of ‘asfunction’ which specifies that an actionscript function is to be called rather than a url. The correct syntax is asfunction followed by a colon and then the name of the actionscript function to be called, optionally followed by a comma and a possible single argument to be passed to the specified function (href=”asfunction:functionName,argument”).
Steps
- Enable html in the text box.
- Have your function (ex: functionName) ready to be called from the html link.
- Give the href attribute of the anchor tag a property “asfunction:functionName,argument” Notice that the official documentation calls for spaces after punctuation, but any space you put after the colon (:) or comma (,) will be sent to the function in the argument, or will expect a space in the function name and give you a headache.
Example
In this example I’ve got an html enabled text box with 4 links. The first is a standard link (I hope you know what that does). The next link calls an actionscript function with asfunction. The third link sends a single argument to another function. And the last link sends multiple arguments to yet another function. Wait! Multiple arguments? I thought I said only one was supported, well this example shows how to send multiple arguments disguised as a single param and parse them. It’s pretty simple actually.
Actionscript
myHTMLText = "Sample text in an html enabled text box. "+
"Here's a normal link to <a href='http://circlecube.com' target='_blank'>circlecube</a>! "+
"And some more links that don't go anywhere, they call functions in actionscript. "+
"<a href='asfunction:clickLink'>Click this one</a>, "+
"to see the actionscript function called from the html text box. "+
"<a href='asfunction:clickWithArg,Click this too'>Click this too</a>, "+
"and see that the actionscript function you're calling can have an argument passed to it. And "+
"<a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a> "+
"to see a way to send multiple arguments from your htmlText. "+
"Also, one last example of what not to do "+
"<a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a>";
//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
myHTML.html = true;
myHTML.htmlText = myHTMLText;
myHTML.styleSheet = myCSS;
//function to be called from html text
function clickLink() {
giveFeedback("Hyperlink clicked!");
}
//another function to be called from html text, recieves one argument
function clickWithArg(arg) {
giveFeedback("Hyperlink clicked! Argument: "+arg);
}
//a simple trick to allow passing of multiple arguments
function clickWithMultipleArgs(args) {
giveFeedback("Hyperlink clicked! Multiple arguments passed: "+args);
argArray = new Array();
argArray = args.split(',');
for (i = 0; i < argArray.length; i++) {
giveFeedback("arg "+i+": "+argArray[i]);
}
}
function giveFeedback(str) {
trace(str);
feedback.text += str +"\n";
feedback.scroll = feedback.maxscroll;
}
HTML
Here's a normal link to <a href='http://circlecube.com' target='_blank'>circlecube</a>!
And some more links that don't go anywhere, they call functions in actionscript.
<a href='asfunction:clickLink'>Click this one</a>,
to see the actionscript function called from the html text box.
<a href='asfunction:clickWithArg,Click this too'>Click this too</a>,
and see that the actionscript function you're calling can have an argument passed to it. And
<a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a>
to see a way to send multiple arguments from your htmlText.
Also, one last example of what not to do
<a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a>
12 Comments
Absolutely awesome, I wasn’t aware – I haven’t had much luck with html text in the past but this is pure awesome. Pure. Multiple argument work-around I hadn’t seen before (or would’ve thought of) either so that’s excellent – thanks for taking the time to share!
Thanks for sharing. This opens a new world of possabilities!
It is maybe a good idea to mention somewhere that it is AS2 only.
In AS3 you can use a textevent, wich is well explained here
why is is always a good idea to load .css file at head section? does it speed up the page loading process?
You got to be kidding me! I've been searching for a proper explanation for the asfunction for two whole weeks now and then this, amazing, ingenious little article suddenly appears. GREAT WORK Evan
Wow!
Thanks!
Great work.
This is a great article but this works fine if the text is in the _root level. I use the text in a movie clip (_level1) and it does not work
.
Sorry guys
you have to put the required function in the same level of the targeted level 
good luck
Or use _root.functionName
Thx! Helped me out a lot!
I really like your post, is the best example I can found all over the web about this particular issue. But is all in one really short explanation, so thanks again, I still use AS2, because I’m very slow improving my AS2 understanding, maybe because I think is better know it well and later move on AS3. on the other hand I need finish the books I bought when I start with AS. I found that when you got the chance to mix the design with the AS2 on flash the results are better.
You can also use TextArea class (NOT TEXTAREA THE COMPONENT! it’s a brand new OOP class created by doitflash) instead of using TextField class every where you need to work with text in your AS3 project!
check out http://www.doitflash.com
The site produced a class named “TextArea” which is an extension to the original “TextField” class that ends to the shortcomings of TextField.
TextArea allows you to call your own custom functions right from the hyperlink inside your text block rather than just calling external links or confusing yourself by adding listener when you click the hyperlink, etc… because what if when you want to even pass arguments through your function from your text block, that’s hard but TextArea answers to that too
Here is a sample code to call a function by hyperlink inside your text block:
import com.doitflash.text.TextArea;
// set TextArea
var _textArea:TextArea = new TextArea();
_textArea.condenseWhite = true;
_textArea.autoSize = TextFieldAutoSize.LEFT;
_textArea.embedFonts = false;
_textArea.border = true;
_textArea.multiline = true;
_textArea.wordWrap = true;
_textArea.width = 200;
_textArea.holder = this;
_textArea.client = this; // must be where you have your 'allowed functions' saved
_textArea.funcSecurity = true;
_textArea.allowedFunctions(stringLink, objectLink, arrayLink, arrayObjectStringLink);
_textArea.mouseRollOverEnabled = true;
_textArea.fmlText = "<p>Pass String as arguments in this <a href='event:stringLink(simple string)'>link</a>.</p>";
/*
my custom functions that I call from _textArea.fmlText by using <a /> tags, like we used to insert hyperlinks inside our text blocks.
for example, to call stringLink() from _textArea.fmlText, you can write:
_textArea.fmlText = "my hyperlink: <a href='event:stringLink(this is my passed value)'>link</a>.";
NOTE: your custom functions arguments can be as many as you like (supported argument types: Object, Array, String)
*/
function stringLink($value:String):void
{
trace("custom function");
}
It has lots of more features and doesn’t specifically limited to this issue. Check out doitflash for more information. the site provides the platform and downloading it is also free of charge