Creating a Hyperlink
       by kirupa  |  10 April 2003

Flash is no longer just a program that you use to create cool special effects and animations. Flash is used extensively for navigation and other interactive purposes. A key facet to navigation is hyperlinks. You are familiar with hyperlinks in browsers; you click on a link and a page loads. Flash, on the other hand, works differently.

Note
To learn how to create a Hyperlink using ActionScript 3, read the Hyperlinks in AS3 tutorial instead.

Creating a hyperlink is not too difficult, but it does require some moderate degree of effort until you get used to hyperlinking Flash. This tutorial will help you get introduced to the 'art' of hyperlinking in Flash!Creating a hyperlink is not too difficult, but it does require some moderate degree of effort until you get used to hyperlinking Flash. This tutorial will help you get introduced to the 'art' of hyperlinking in Flash!

[ click the Flash button above ]

Creating a Hyperlink
The following steps will guide you in creating a hyperlink:

  1. Create a new document in Flash MX by going to File | New. A new, blank Flash MX movie will be displayed.
  2. From the Tools panel, click the Oval Tool and draw a circle in your drawing area. Once the circle has been drawn, select the circle with your mouse pointer.

[ circle after having been selected ]

  1. Once the circle has been selected, press F8 or go to Insert | Convert to Symbol. The Convert to Symbol dialog box appears. In the Name field, give this circle a name. I will call this circle "Hyperlink". In the Behavior section, select the Button option. Your Convert to Symbol dialog box should look like the following image:

[ circle after having been selected ]

  1. Press OK to close the Convert to Symbol dialog box. The circle is now a button. Right click on the circle and select Actions. The Actions panel will expand for you to input actions.
  2. From the Actions panel, click on the plus symbol ( + ) found near the middle of the panel. Once you click the plus symbol, go to Actions | Browser/Network | getURL.
  3. You will see the URL, Window, and Variables field displayed in your Actions panel. In the URL field enter: http://www.kirupa.com. Click the Window field/drop-down menu and select _blank. Your Actions panel will look like the following image:

[ the action panel after filling in the fields ]

  1. Save the file and preview the animation in your browser by going to File | Publish Preview | HTML. Click on the button, and you will see a new browser window open.

Window States
You may have noticed, that when the button was clicked, it opened a page in a new window. Sometimes you may not want every link to open in a new window. Maybe you want the link to open in the current window. That is where the Window field of the button Actions plays a large role.

In this tutorial, you clicked the Window drop-down menu/field and picked _blank from one of four choices. To make it easier for you understand the Window states, I have provided a brief explanation about each selection in Window drop-down menu:

  • _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.

If you are curious as to how my FLA looks like, click the link below. You should note that my version of the FLA is an exact replica of the example you saw near the top of this page. In other words, the FLA contains the 'click the button' text and buttons states!

Download Source File

Need 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. Plus, we have a large collection of smileys you can use

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 at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

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.