Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Hyperlinks

Free Flash Tutorial

A hyperlink is when you link from one web page to another. Creating hyperlinks in Flash is not difficult and very similar to linking in HTML. Though how you do it in Flash is slightly different.

Note: A hyperlink is not an internal link from one part of your flash movie to another. If you wish to learn how to link within your Flash movie go to the beginners tutorial: Creating Links within a Flash Movie

 

Version: If you are using Flash 8 or Flash MX 2004 you should go here: Flash 8 Hyperlink Tutorial

Example: Download the Flash file  Beg 015a

Step One: Setup a New Document

1. Open Flash and a new document will be created automatically.
2. Go to: Modify > Document
3. Set the size to: 200 x 130 px
4. Select a: Background colour
5. Click: OK

Step Two: Place a Button on Stage

To create any sort of link in Flash you must have a button. A button is simply something for the user to click on. You can choose a button from a preset library, which is what we will do, or create your own. If you want to learn how to create your own button go to the beginner tutorial: Buttons

1. Go to: Window > Common Libraries > Buttons.
2. Open one of the button folders by double clicking on it. I selected: Push Buttons
   DO NOT choose Component, Knob or Fader. The actionscript for these buttons are different!
3. Select a button and drag it onto the stage. I selected: Push Button - Blue

Step Three: Adding the ActionScript URL

1. Right click (Mac: Ctrl Click) on the button and select: Actions
2. The Actions panel has two modes: Normal and Expert. Make sure it is in Normal. You do this by clicking on the side menu button ( ) which is just under the cross on the top right hand side of the panel. Select Normal
3. Click on the: Plus sign > Actions > Browser/Network > GetURL
   URL simply means web address (Uniform Resource Locator - for those who like jargon)
4. In the top section of the Actions panel you will see URL. Type the web address in here. I typed: http://www.webwasp.co.uk
   
   Web Address: Absolute
   
   The web address can be either absolute or relative. Absolute means that you put the full URL of the page. This page is:
   
   http://www.webwasp.co.uk/tutorials/a15-hyperlink/hyperlink.htm
   
   The absolute URL of the webwasp home page is:
   
   http://www.webwasp.co.uk
   
   When you are linking to a web page on a site other than your own use the full web address or in the jargon: Absolute URL
   
   Note: In Step three, Point 4 above, I typed in an absolute address. I did this so that the link will still work when you download the file to your computer. If I typed a relative address it would work on this page, but not when you down loaded the file.
   
   Web Address: Relative
   

   A relative address is where you don't put the full URL, just the file name. The relative address of this page would be:
   
   hyperlink.htm
   
   If I used this in my Flash example above, it would open this page, but only if the Flash movie is in the same location as the page you are trying to open. If you don't specify the full URL, just the name of the HTML page, the browser will look for it in the same directory (folder) and at the same address as the one you are currently viewing.
   
   You use relative links to pages on your own site. There are two reasons for this.
   
   One: When you test you work on your hard drive a relative link will find the relative file on your hard drive. If you place the full URL the browser will look on-line for the page, which gets confusing, and may give you incorrect results.
   
   Two: You can move your entire site from one server to another or to an Intranet or local hard drive or even to a CD or Floppy disk and the site will still work. If you don't do this you would have to up-date every link and that's no fun!
   
   Relative Links: Folders
   
   For a relative link to work you do not have to have all your files in the same folder. The location of this page is:
   
   http://www.webwasp.co.uk/ - The root directory for the site.
   tutorials/ - The folder for all the tutorials on this site.
   a15-hyperlink/ - The folder for all the files for this tutorial.
   tutorial.php - This HTML file that is this web page.

   Note: I do not use index.html or index.htm but index.php The reason is not important to this tutorial and in truth they are all very similar. They are all web page files. If you wish to learn about PHP see the tutorial: PHP

If I want to link from the Home page to this page, the relative link would be:

tutorials/a15-hyperlink/MX/tutorial.php

The other way around - a link from this page to the home page would be:

../../../index.php

../ makes the page go up hill or to the folder one level up. The home page is three levels from this point. Remember the location of this file is:

tutorials / a15-hyperlink / MX

Thus the home page is up three levels. After this there is no where to go as you will be in the root directory and that is the end of a relative links possibility.

If you find this folder business confusing just place all your files in one folder or location. Relative links will then work.

Step Four: Adding the ActionScript - Window


Your Action Panel should still be open and look like this.

If you wish you can select a Window Option. This controls how the page will open in relation to the browser. If you do not set the Window option the page will simply open it same browser window. So you do not have to set this option. The choices are:

Self
Loads link into the current browser window.

Blank
Loads the link into a new Browser Window. I selected blank in the example above.

Frames: Parent
Loads the link into a frame-set page. If you use farmed web pages you will know what to do with this, if you have never used framed web pages don't. In my opinion Framed pages are a waste of time. Search engines may make a dogs dinner of your site and if a search engine takes you to a page outside the frame-set, you lose all the links and the site useless.

Frames: Top
Also to do with a frame-sets. It loads the link on the top frame.

Note: In Flash test mode your chosen Window mode may not work correctly as the text mode does not play in a Browser. Don't worry it will work when you publish your movie into a web page.

Frames: Names
If you want to link to a specific Frame other than the one that the Flash Movie is in you will need to include the Frame Name. This is not easy to do in Nora ml Mode so I suggest that you switch to Expert Mode and simply type in the Actions panel. After the web page name type a comma and then add your Frameset Name like this:

on (release) {
    getURL("webPageName.htm", "framesetName");
}

Note: Remember the "quote-marks". If you do not place quotation marks Flash will look for a variable, which is not what you want.

Example: To see a range of Framesets showing both Flash Movie and HTML links: Frameset Example

Good luck and I hope this tutorial has helped.