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.
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 ]
The following steps will guide you in
creating a hyperlink:
Create a new document in Flash MX
by going to File | New. A new, blank Flash MX movie will be
displayed.
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 ]
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 ]
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.
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.
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 ]
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.
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!
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/mx/hyperlink.htm