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

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

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://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

This entry was posted in tutorial and tagged , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

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

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

  3. Posted March 3, 2011 at 9:15 am | Permalink

    Great article, I’ve been stressing over this for hours. Is there a way you can trigger a Mouse event through the TextEvent action like you do with the ones shown?

    I’m trying to get a similar example to navigate within the flash timeline and control actions in my movie but I can’t get it to work without errors…

    ie…
    function myMouseEvent(event:MouseEvent = null) {
    MovieClip(this.parent.parent).removeMovie(Event);
    trace(this.parent+”Action Sent”);
    }

    I get this error and can’t work out why?

    Any help would be gratefully received as I have just about tried everything,

    Thanks in advance if possible,

    Si

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>

  • Recent Posts

    WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

    Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin: PSD to WP on Prezi Tweet

    wordpress_wordcamp_atlanta_2012_feb_2_3

    Speaker at WordCamp Atlanta 2012

    I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how [...]

    Adobe-like Arrow Headers | CSS-Tricks

    Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks. Tweet

    snow

    Snow via Javascript & Canvas – Tis the Season

    After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]

  • Recent Shares

    Link: Responsive Images: How they Almost Worked and What We Need

    Mat discusses the options for getting responsive images along with responsive designs. We can use various means (server-side, client-side, mobile-first, html5 data attributes, cookies…), but none are fully satisfactory, especially with new browsers prefetching images before cookies can be set or html is even fully read and parsed. He states that bandwidth sniffing is… a [...]

    Screen shot 2012-01-26 at 2.46.59 PM

    Yiibu – About the site…

    Here’s a great article about the process of responsive design & mobile first design and how to practically use them both in a project. This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web or (Mobile First Responsive Design). via Yiibu – About this site…. Tweet

    gridpak

    Link: Introducing Gridpak | Erskine Labs

    Here’s a great tool to make responsive grid layouts. Thanks to Erskine Labs! Introducing Gridpak | Erskine Labs. Tweet

    css-multiply

    Link: HTML5 multiply filter with canvas | Alberto Gasparin

    Here’s a great little script I found useful today as I was working on having dynamic effects applied to javascript via canvas. “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.” Thanks to the canvas APIs I was [...]

  • Recent Comments

    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...
    Matt

    Matt

    I needed to store url variables from advertising tracking servers – this method works like a...
    Evan Mullins

    Evan Mullins

    @Saket – you may want to look into swfaddress. I believe it will be more what...