Calling actionscript functions through HTML text | asfunction Tutorial

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:
[cc lang=”html”]
link
[/cc]
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

1. Enable html in the text box.
2. Have your function (ex: functionName) ready to be called from the html link.
3. 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.
[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/05/asfunction.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”500″ height=”375″]

[/kml_flashembed]

Actionscript

[cc lang=”actionscript” lines=”40″]
import TextField.StyleSheet;

myHTMLText = “Sample text in an html enabled text box. “+
“Here’s a normal link to circlecube! “+
“And some more links that don’t go anywhere, they call functions in actionscript. “+
“Click this one, “+
“to see the actionscript function called from the html text box. “+
“Click this too, “+
“and see that the actionscript function you’re calling can have an argument passed to it. And “+
“click me three and four “+
“to see a way to send multiple arguments from your htmlText. “+
“Also, one last example of what not to do “+
“Click for nothing“;

//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; } [/cc]

HTML

[cc lang=”html”]
Sample text in an html enabled text box.
Here’s a normal link to circlecube!
And some more links that don’t go anywhere, they call functions in actionscript.
Click this one,
to see the actionscript function called from the html text box.
Click this too,
and see that the actionscript function you’re calling can have an argument passed to it. And
click me three and four
to see a way to send multiple arguments from your htmlText.
Also, one last example of what not to do
Click for nothing
[/cc]

Download Source

asfunction.zip