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="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    • Recent Posts

      WordPress updates plugin directory

      New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great! I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins). [...]

      Short Head

      Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

      Img Set?

      Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

      Triudo

      A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo Tweet

      Git – the paradigm shift

      A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

      Tweening Lib comes to Javascript!

      I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

      Responsive CSS Tricks

      Here are a few useful css tricks to remember when building responsive design sites from web designer wall Embedded Link 5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on [...]

      Picture element of srcset attribute?

      Bruce details the reasons and story behind the srcset attribute which is now introduced as an alternative to the picture element. Some aspects of the attribute are nice (like the fact that it's an attribute and not a new element, so it's creating up new elements with for problems. It's adapting currently used elements to [...]

      SVG Preloader with Raphael JS

      Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well. Embedded Link Make a stylish preloader with SVG | Tutorial | .net magazine Many sites neglect users with slow connections. Ian Culshaw explains how to use [...]

      CSS3 Button/Icon set

      I've been secretly hoping to see a few of these pop up once the whole icon font idea spread through the nets. I really like this idea and it's a very nice implementation too! I only see some quality issues on a couple of the icons (such as youtube), but it's awesome and I hope [...]

    • Recent Comments

      Bruce Brownlee

      Bruce Brownlee

      Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
      versaena

      versaena

      how to give color at runtime…… thank you
      Mobile Websites

      Mobile Websites

      I disagree, mobile websites are the future – desktop websites and mobile websites...
      Matt Fasick

      Matt Fasick

      That's cool. I like the ripple effect as well.
      Nico

      Nico

      hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
      Evan Mullins

      Evan Mullins

      Agreed! I've just seen some people get pretty heated about separating all functionality...