asfunction (TextEvent.LINK) Tutorial for AS3 | Flash HTML Link to call actionscript function | Tutorial

Google Buzz

Overview

Earlier I wrote a tutorial article about asfunction in as2. Now that I’ m into as3, surprise surprise asfunction has been depreciated and now to replace it is the LINK TextEvent. Dispatched when a user clicks a hyperlink in an HTML-enabled text field, where the URL begins with “event:”. The remainder of the URL after “event:” will be placed in the text property of the LINK event.
This differs from the asfunction method in that we must add an event listener (addEventListener) to the textField object, the event listener specifies which function will be called in the event of a link click and there is no way to send arguments along with the event (AFAIK). But it’s easy enought to use one link event function for all your link events and put in a simple switch statement to coordinate the desired results…

Steps

  1. Use event in the href attribute. (href=”event:eventText”)
  2. Listen to the textField (theTextField.addEventListener(TextEvent.LINK, linkHandler);)
  3. Handle the link event (function linkHandler(linkEvent:TextEvent):void {…)

Example

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var myHTMLText:String = "Sample text in an html enabled text box.\n"+
"Here's a normal link to <a href='http://bloc.circlecube.com'>circlecube</a> putting the link into the href attribute like normal!\n"+
"<a href='event:clickLink'>Click this circlecube</a>, to see the text event link in action! \n"+
"And some more links that don't go anywhere, but they do call functions in actionscript. "+
"Click this to move <a href='event:moveUp'>UP</a>, click me move back "+
"<a href='event:moveDown'>DOWN</a>.\n"+
"Also, one last example <a href='event:testing'>click for a trace test</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.styleSheet = myCSS;
myHTML.htmlText = myHTMLText;

myHTML.addEventListener(TextEvent.LINK, linkHandler);

function linkHandler(linkEvent:TextEvent):void {
    switch (linkEvent.text) {
        case "clickLink":
            clickLink();
            break;
        case "moveUp":
            moveUp();
            break;
        case "moveDown":
            moveDown();
            break;
        default:
            giveFeedback(linkEvent.text);
    }  
}
//function to be called from html text
function clickLink():void {
    giveFeedback("Hyperlink clicked!");
    var myURL:String = "http://blog.circlecube.com";
    var myRequest:URLRequest = new URLRequest(myURL);
    try {            
        navigateToURL(myRequest);
    }
    catch (e:Error) {
        // handle error here
        giveFeedback(e);
    }
}

//another function to be called from html text, recieves one argument
function moveUp():void {
    feedback.y -= 10;
    giveFeedback("Up");
}

//a simple trick to allow passing of multiple arguments
function moveDown():void {
    feedback.y += 10;
    giveFeedback("Down");
}

function giveFeedback(str):void {
    trace(str);
    feedback.appendText(str +"\n");
    feedback.scrollV = feedback.maxScrollV;
}

Source

Download the fla here: textlinkevent_as3.fla

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
This entry was posted in tutorial and tagged , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Jeremy
    Posted 13 January 2009 at 3:43 pm | Permalink
  2. Posted 1 October 2009 at 10:06 am | Permalink

    Hi Evan, I put a link onto my blog of this tutorial.
    Thanks .)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>