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.

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums New, Upcoming, and In-Progress Tutorials How to Help out kirupa.com Writing Tutorials

Cheers! Kirupa Chinnathambi facebook | twitter