Hyperlinks in AS3
       by kirupa  |  12 May 2009

It's hard to create an app of any real substance these days without creating hyperlinks that load a URL when the user clicks on them. These could just be links that open a new web page, launch your e-mail app for sending an e-mail, or any other type of crazy thing you would want to do with URLs.

In this article, I will briefly show you how to use ActionScript 3.0 (AS3) to create a hyperlink - similar to the example you see below:

Click on the "Send E-Mail" or "Launch Web Page" link to either see your e-mail application launch or your browser taking you to the kirupa.com home page. Let's look at how this works.

Introducing URLRequest
For handling all types of requests, you have the URLRequest class. The following is a very simple example involving URLRequest that, when run, will load the kirupa.com home page for you:

var homeLink:URLRequest = new URLRequest("http://www.kirupa.com");
navigateToURL(homeLink);

There are only two parts to creating a hyperlink. The first part is declaring and initializing your URLRequest object:

var homeLink:URLRequest = new URLRequest("http://www.kirupa.com");

As part of your URLRequest constructor, you can specify the link you would like to see opened. Once you your URLRequest object, referenced in this case by homeLink, you are good to go. You simply have to invoke the navigateToURL method and pass in your URLRequest object as an argument:

navigateToURL(homeLink);

The combination of the navigateToURL method and your URLRequest object is all you really need to create a hyperlink, and the next section will look into the above two lines of code in the context of a more realistic application.

More Realistic Example + Window Targets
Now that I have sufficiently described the basics of how to create a hyperlink, let's look at a slightly more complicated example that probably will closely mimic how you would actually use this code.

The following is the code I used in the example animation you saw above:

function init() {
emailButton.addEventListener(MouseEvent.CLICK, EmailHyperlink);
webButton.addEventListener(MouseEvent.CLICK, WebHyperlink);
}
init();
 
function EmailHyperlink(e:MouseEvent)
{
var email:URLRequest = new URLRequest("mailto:kirupa@kirupa.com");
navigateToURL(email);
}
 
function WebHyperlink(e:MouseEvent)
{
var web:URLRequest = new URLRequest("http://www.kirupa.com");
navigateToURL(web, "_self");
}

Most of the code you see above should be very familiar to you. I am simply setting up events and event handlers so that when one of my buttons get clicked, something happens.

What is different is the following line:

navigateToURL(web, "_self");

Notice that the navigateToURL method I showed you earlier takes in another argument besides the URLRequest object. It takes the window target as an argument. In this case, my argument is _self. The range of target values you can specify are:

  • _self
    Loads the link in the current page or the current page in a Frame. This is the default selection used by Flash to open any link.
  • _blank
    Loads the link in a separate browser window. You selected _blank in the tutorial above.
  • _parent
    Loads the link into the frameset file of a frame. The frameset file controls all the frames, and setting the window to _parent will eliminate frames in the subsequent links. As you may have seen, often times, links get loaded inside frames unintentionally. Setting _parent will solve the misuse of frames!
  • _top
    Loads the link on the top frame.
  • frameName
    If you have a page containing frames, you can specify the name of your frame as well. This will allow you to load pages in particular frames.

Conclusion
This was a nice, short article, but hopefully it gave you most of the information you would ever need when it comes to using hyperlinks in code.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.