circlecube

RSS comments
LinkedIn Twitter delicious fb last.fm
30 May 2008

Calling actionscript functions through HTML text | asfunction Tutorial

Author: Evan Mullins | Filed under: 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:

1
<a href="asfunction:doSomething, startFrame">link</a>

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.

Get Adobe Flash player

Actionscript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import TextField.StyleSheet;

myHTMLText = "Sample text in an html enabled text box. "+
"Here's a normal link to <a href='http://blog.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

1
2
3
4
5
6
7
8
9
10
11
Sample text in an html enabled text box.
Here's a normal link to <a href='http://blog.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>

Download Source

asfunction.zip

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS

Tags: , , , , , , ,

This entry was posted on Friday, May 30th, 2008 at 7:56 pm and is filed under tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Calling actionscript functions through HTML text | asfunction Tutorial”

  2. 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!

  4. Thanks for sharing. This opens a new world of possabilities!

  6. 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

  8. why is is always a good idea to load .css file at head section? does it speed up the page loading process?

  9. The happy Dane says: July 1st, 2009 at 9:33 am

  10. 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 :-)

  12. Wow!
    Thanks!
    Great work.

  14. 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 :-( .

  16. Sorry guys :-) you have to put the required function in the same level of the targeted level :D good luck

  18. Or use _root.functionName :D

  20. Thx! Helped me out a lot! :)

Leave a Reply