Ross Sheppard High School
Web Page Design and Construction
Student Learning Guide
Creating Web Links in a Flash Movie

	When you have finished this project, you will be able to:
	create Web links in a Flash movie

1. Create a new folder called Flash Web Links on your personal drive space. Save everything to do with this project in that folder.
   
   
2. Start a new project in Flash.
   
   
3. Leave the frame speed and movie size set for the defaults.
   
   
4. For this project, you will learn how to create a Web link - (a link to another Web site) - using an "Object Symbol" and a "Text Symbol".
   
   
5. You will learn how to create a Web Link with an "Object Symbol" first.
   
   
6. Create a rectangle on the stage that:
   • has a graduated blue fill
   • has a 2 point red line
   • has a 5 point rounded corner
     
     
7. Convert the rectangle to a symbol. (F8) (Use the pointer tool to surround the entire rectangle to be sure that you choose both the Fill and the Border) When the Symbol Properties window opens, change the property to a Button, and put the name of this symbol in the Name box. (Rectangle) Click OK when you are done.
   
   
   
   
8. Whenever you create a symbol in Flash, it is added to a library of symbols that is associated with that movie. This has been the case for your other projects as well; you just haven't accessed them. Access the library now by clicking on Window on the Menu Bar, then selecting Library. Your library for this movie will open:
   
   
   
   
9. Notice that your rectangle has been added to the library. Notice also the icon associated with this symbol is a button.
   
   
10. Create another rectangle with the properties of your choice. Use the select tool and then using F8, convert this new rectangle to a symbol. Use the Graphic option, NOT button. Give this symbol a name of Rectangle 2. Once you have finished it will be added to your Symbol Library:
    
    
    
    
11. From now on, you should open the Library for all of your movies. You will need them to change certain properties of the symbols as you work through each project.
    
    
12. In order to make a symbol a Web link, you need to set the mouse properties of the symbol. In the Library Window, double click on the Rectangle icon symbol to open it's properties:
    
    
13. Your project window has changed slightly. You are currently looking at the properties of the first rectangle. Notice how the time line of Layer 1 has changed so that you can see 4 boxes above the timeline.
    
    
    
    
14. The four Boxes over the timeline are the mouse properties: Up, Over, Down, and Hit. These describe the various things that a user could do with the mouse:
    • Up is when the mouse button is released (normal)
    • Over is when the mouse passes over the symbol
    • Down is when the mouse button is depressed
    • Hit is when the mouse button is released after being depressed
      
      
15. You need to add a key frame to each of these instances, and then indicate what should happen during that instance.
    
    
    1. Add the key frames by clicking in the Timeline Box below the Over box, and pressing the [F6] key, or by clicking Insert on the Menu Bar, then Keyframe.
       
       
    2. Repeat this for the Down box and the Hit box.
       
       
    3. We will be identifying what will happen with each instance later.
       
       
    4. 
       
       
16. When you are done, click the Scene 1 button to return to your stage.
    
    
    
    
17. Now that you have created a button, you need to enable it. On the Menu Bar, click Control, then select Enable Buttons. This will enable all of the buttons on your stage.
    
    Note: you will not be able to work with or change properties of symbols that are buttons unless you disable the buttons using the CONTROL menu item and then unselecting the ENABLE BUTTONS option. (Clicking on the option a second time to remove the check mark)
    
    
18. To this point you have created a button, set the mouse actions, and enabled the button - but when you run the movie, clicking on the button does nothing because you have not set the action of that button - in this case, the URL or Web site that you want it to go to. You will know that the buttons are enabled by seeing your cursor change to a hand when it is over the button.
    
    
19. Disable the button actions (See note above) and right click the button on the stage . Select Properties to open the Instance Properties window. Click the Actions tab.
    
    
    
    
20. Click the large "+" sign and then select Get URL. The program will place commands into the property window.
    
    
21. In the URL space type the entire URL of the Web site you would like this button to go to. For this example, use the MacroMedia Web site:
    http://www.macromedia.com
    
    
    
    
22. Click OK when you are done.
    
    
23. Create a URL location of your choice for the second rectangle you made. (Review the instructions and repeat them for the second rectangle.)
    
    
24. Save your movie, Publish it, and open it in a browser. Clicking the buttons should take you to the MacroMedia Web site, and the site of your choice.
    
    
25. Next, you will learn how to use a text symbol as a button.
    
    
26. Select the Text tool and set the font properties to 28 point and Bold, type the following text:
    
    The Microsoft Web Site
    
    
27. Using the pointer tool select all of the text and then convert the text to a symbol ensuring that you create a Button (See instruction #7 if you forgot how) Name this symbol Microsoft.
    
    
28. In the Library, double click the icon for the Microsoft text to open the button properties
    
    
    
    
29. Add a key frame to each of the button actions. (Instructions #12 to #16 if you forgot)
    
    
30. Each of the actions can cause something different to happen to the text as the mouse acts on it.
    
    
31. Click in the Timeline Box below the Over box. ("Over Keyframe") Change the text color to a different color. When the user passes the mouse over the text, it will change colour.
    
    
32. Click on the Timeline Box below the Down box ("Down Keyframe") and change the text to yet another colour. When the user clicks the mouse button, the text will change color.
    
    
33. The last key frame to change is the Hit Keyframe. There is a problem in the way the Hit works. Currently, when the user clicks on a Line of the letter it will work - but if the user clicks on a blank spot (the open part of the letter O for example), then nothing happens. to solve this problem, you need to create a clear rectangle the same size as the text box so that there are no "holes" in the text.
    
    
34. Click on the Timeline Box below the Hit box ("Hit Keyframe"). Select the rectangle draw tool and draw a box the same size as the text box over the text. For now, it does not matter what the box attributes are. This will create a box behind the letters.
    
    
35. Click the Scene 1 button to return to the stage.
    
    
36. In the same manner that you created the Action for the rectangle, create the URL Action for the text. (See instructions #19 to #21 if you forgot how.) The URL for Microsoft is:
    
    http://www.microsoft.com
    
    
37. Save the project, publish it and then run it in a browser. The buttons should work; if not, review the instructions and your procedures.
    
    
38. You can also combine effects that you have learned already - for example, you could have a button with an Alpha Tween that faded in to become a button with an URL. (This would be cool huh?)
    
    
39. Add two more URLs to your Web, demonstrating some of the effects you have learned.
    
    
40. Line up all of the buttons in scene 1 in a way that they look neat
    .
41. Don't forget to Publish the movie so that it can be viewed in a browser
    
    
42. Click here to see the marking guide for this project.
    
    
43. Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded.