Learn Flash: Links & Hyperlinks

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Links/Hyperlinks

 

Free Flash Tutorial

 

 

 

A Hyperlink is a technical term that means when you link from one web page to another. So a Link or a Hyperlink is the same thing. Making hyperlinks in Flash is easy. The principles are similar to making links in a standard HTML web pages but you create them through the Flash program. In this tutorial you will learn how to make hyperlinks in Flash that link one web page to another. You will also learn the difference between Absolute Links and Relative Links and when to use one as not the other. This tutorial also covers the actionScript need to control Framesets.

ActionScript

 

Absolute Links

 

Relative Links

 

Window Options & Frameset Links

 

Cross Ref: 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

 

Cross Ref: Want to know how to make: Email Links

 

Flash MX: If you are using Flash MX you should look at the original version of this tutorial: Hyperlinks Flash MX

 

Example: Download the Flash file  Beg 015a

 

Example of a button with a hyperlink to the webwasp home page.

Step One: Setup a New Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. If the General Tab is not selected, select it: General Tab
  3. Select Flash Document:
  4. Click: OK
  5. Note: You should now be able to see a new Flash document:

  6. Go to: Modify > Document (Ctrl J)
  7. Set the size to: 200 x 130 px
  8. Select a: Background colour

    I selected: CCCCFF


    My background Colour.

  9. 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.

Cross Ref: If you want to learn how to create your own button go to the tutorial: Buttons

  1. Go to: Window > Common Libraries > Buttons
  2. Open one of the button folders by double clicking on it:
  3. Select a button:

    I selected: Push Buttons:


    I selected: Push Button - Blue.

  4. Warning: Not all buttons are buttons! DO NOT choose Asset, Component, Knob or Faders.
    Look for the Button Icon:

  5. Select a button and drag the: Button onto the Stage

    Tip: To Check to see that the button that you have selected is really a button and not a component or other type of object. Select the Button and look at its properties in the Property Inspector: Window > Properties (Ctrl F3)


    The Property Inspector displays the type of object: Button


Step Three: Adding the ActionScript to the Button

If someone clicks on the button the button needs to have the appropriate ActionScript so that it knows what to do. In this section you will place the ActionScript on to the button including the URL. This will send the user to another web page.

    Definition: The URL is a technical term which means Uniform Resource Locator!! In normal language URL means web address such as: www.webwasp.co.uk

  1. Select your: Button

  2. Open the Actions Panel: Window > Actions (F9)


  3. The Actions Panel


    Flash MX/5: Window > Actions or F9 or Right Click > Actions (Mac: Ctrl Click)

    The Actions Panel has two Modes:

    • Normal Mode: Use of Menus and Options only. Menus give code with full syntax. Syntax errors not possible!
    • Expert Mode:Type, Copy (Ctrl C) & Paste (Ctrl V). Use of Menus gives partial code only.

      Note: In Flash 8 Normal Mode is now called Script Assist On and Expert Mode is Script Assist Off.

    Flash MX 2004: Window > Development Panels > Actions or F9

    Important: The Actions Panel in Flash MX 2004 only has one mode so the information in this tutorial about two modes (Script Assist On and Off) does not apply as it only has an expert typing mode. You will not be able to use the Script Assist method described. The use of the Actions Panel Menus will give partial code only which is different to the code as stated in this tutorial. I recommend that you type or copy (Ctrl C) and paste (Ctrl V) then edit the code that you require.


    CS3 / Flash 8: Window > Actions or F9 or Right Click > Actions (Mac: Ctrl Click)

    In Flash CS3 and Flash 8 Adobe have brought back the old Flash MX Normal/Expert mode to the Actions Panel. Yeah!! (not available in MX 2004). To make it seem like a new feature they have re-named it: Script Assist which is either switched on or off. Look for the new button in the Actions Panel:

    • Script Assist On: Use of Menus and Options only. Menus give code with full syntax. Syntax errors not possible!
    • Script Assist Off: Type, Copy (Ctrl C) & Paste (Ctrl V). Use of Menus gives partial code only.

    Switching Script Assist On & Off: Click the Script Assist button or go to the Side Menu Button:   

    Script Assist is on if ticked :

  4. Go to the Action Panels side Menu button: and tick: Script Assist

  5. Tip: Before you use the Actions Panel make sure the correct object is selected. In the top left corner of the Actions Panel it must say: . If it does not say Actions - Button you have not got your Button selected.


    Actions - Button is displayed in top left corner of the Actions Panel.

  6. Click on: Plus Sign > Global Functions > Browser/Network > getURL


    Click on the blue Plus Sign and follow the menu to: getURL

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


    Type the web address in the options area where is says: URL

    Your button should now work !!

    Note: If you want to copy and paste the script it is here:

    on (release) {
        getURL("http://www.webwasp.co.uk/");
    }

    See notes above about pasting into the: Actions Panel


Step Four: Web Address:
Absolute Links

There are two ways of typing a web address: Absolute or Relative. Absolute means the full URL of the page. This page is:

http://www.webwasp.co.uk/tutorials/a15-hyperlink/index.php

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. So if I wanted to link to Google I would type: http://www.google.com/

If you use an absolute address it does not matter where your computer is located it will always find the web page.

In the previous section I typed in an absolute address: http://www.webwasp.co.uk/ 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.

Definition: You may have seen http:// in a web address. It stands for Hyper Text Transfer Protocol. In normal English it means the 'language' spoken between computers on the Internet.

Definition: www stands for World Wide Web. Normally you would type this.

Tip: With an absolute address the best thing to do is look at the page in your web browser. For example this page looks like this:


The URL is clearly visible in the Address line. Copying it eliminates typing errors.

If you right click (Mac: Ctrl click) on the Address in your Web Browser you can copy the link directly. Then return to Flash and paste it into the Actions Panel: Ctrl V


Step Five: Web Address:
Relative Links

A relative address is where you don't put the full URL, just the file name. The relative address of this page would be:

index.php

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 page 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 off-line straight from 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 from the Intranet to a local hard drive or even to a CD or Floppy disk and the site will still work.

Warning: If you don't use Relative Links within pages on your own site and you latter wish to move your site to a new location (web address) or let users view it via a CD you would have to up-date every link on every page and that's no fun! There are link checking programs that can help you do this - but still it is better to just use relative links from the start.

For example I could move the entire site from webwasp.co.uk to My_Other_Site.com and theoretically everything would still work (in reality I would not do this as even if the internal links still worked external links coming into the webwasp site from other sites would not work). But it does mean that I can move the site to a laptop and work on the site off-line from anywhere - I don't need to be connected to the Internet or on my own machine. The site can be updated, all the internal links can be checked off-line and when everything is perfect - uploaded. You could not do this with absolute links.

Definition: Internal Links are links within a site. External Links are links coming from and going to, other web sites.


Web Address: Relative/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/tutorials/a15-hyperlink/tutorial.php

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.

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

tutorials/a15-hyperlink/tutorial.php


Folder Structure: The bottom index.php is the site's home page and the other is this 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

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

../../index.htm

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

tutorials/a15-hyperlink/

Thus the home page is up two 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 Six: Adding the ActionScript - Window Options

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


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

Note: If your Action Panel is not open to get back here do the following

  1. Select the: Button
  2. Open the Actions panel: Window > Actions (F9)

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 in same Browser Window which is the default for web links. So you do not have to set any of these options and if you are not sure do not use any of these options. 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 here:

Example: Download the Flash file  Beg 015a

 

Example of a button with a hyperlink to the webwasp home page.

 


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 problematic. Search Engines 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 Test Mode does not play in a Web Browser but in a Flash Player. Don't worry about this as it will work when you publish your movie into a web page.

Cross Ref: If you need to know how to publish your Flash Movie see: Publishing a Flash Movie


Frame 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 with Script Assist on so I suggest that you switch it off 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.

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


62582 visitors to this page since March 06

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.