Linking to External Webpages Using AS3

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner

This tutorial will teach you how to use ActionScript 3.0 to link from your Flash project to another webpage using the navigateToURL() method.

Using the navigateToURL() Method

Linking to another webpage in AS3 is achieved by using the navigateToURL() method. This method is used in the following format:

navigateToURL(myURL, window);

Where the URL is passed as an instance of the URLRequest Class and the window is the target window to open the link. It must remembered that you cannot pass the URL directly to the navigateToURL() method as it must be first passed through a URLRequest instance. The example below shows an actual example on how this is achieved:

var myURL:URLRequest = new URLRequest("http://www.republicofcode.com/");
navigateToURL(myURL, "_blank");
The var keyword is used to create a variable. You can learn more about AS3 variables by reviewing our tutorial on this topic.

You can instantiate your URLRequest inside your navigateToURL() to write less code:

navigateToURL(new URLRequest("http://www.republicofcode.com/"), "_blank");

The window argument at the end is optional. You can remove it if you want the link to use the default option which is to open in the same page that hosts the Flash movie.

navigateToURL(new URLRequest("http://www.republicofcode.com/"));

However, if you want to explicitly state that you want the link to open in the same window then you can use the _self as your value:

navigateToURL(new URLRequest("http://www.republicofcode.com/"), "_self");

Other options available are "_blank" to open the link in a blank new window or the name of whatever window you have if you are using frames layout on your website.

Practical Example

In this section we will create a simple example in which a button will be created to link to another website.

Start off by creating a new FLA in AS3 format.

AS3 - Link URL New FLA

Go through Window>Component to open the Components panel. Expand the User Interface category and drag an instance of the Button component to your stage. You can go through Windows>Components Inspector to open this panel and configure the Label of your button.

AS3 Link Button on Stage

Now select your button and then access the Properties Inspector to assign the instance name my_btn to this button. Using instance names makes it easy for us to refer to our objects using ActionScript.

AS3 Instance Name Link

Our button is now ready, it is time to start the ActionScript. Right-click the only frame you have on your timeline and select Actions to open up the Actions panel.

In order to command our button to execute any action, we need to use an event listener registered with the MouseEvent.CLICK. This event listener will invoke a function called onClick which we have defined, without any actual content, below:

my_btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void{

}
You can learn more about AS3 Event Handling by reviewing our tutorial on this topic.

We will tell our onClick listener function to call the navigateToURL() method to open a link to our website this way:

my_btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void{
navigateToURL(new URLRequest("http://www.republicofcode.com/"), "_blank");
}

That should do it. You can now test your movie by going through Control>Test Movie to see you functional button in action!

This concludes our tutorial. I hope that you learnt something new from it. If you have any questions or comments feel free to make a post at the Republic of Code Forum.

- End of Tutorial