Adding Buttons to the Web site - Exercise

Contact Us or call 1-877-932-8228
Adding Buttons to the Web site - Exercise

Adding Buttons to the Web site

Duration: 20 to 30 minutes.

We will continue work on the web site from the earlier exercises. You may open your file from earlier (called Website.fla). You may also use the one saved as, Buttons/exercises/Website.fla.

We are going to create buttons out of the navigation text. So far, the text has been sliding in from the left into position. We want the text to be turned into buttons after it's in position. To do this, we will duplicate the navigation symbol and place the new duplicate on the next frame. Follow the steps below to get it done.

Position a new instance of the navigation in a new Keyframe

  1. In the last frame (frame 75) of the text links layer, add a blank keyframe.
  2. Click on Frame 74 in the text links layer. Single click on the navigation text symbol and copy it (Ctrl+c will work.)
  3. Click on the new blank keyframe in frame 75 and Paste in Place (Ctrl+Shift+v). This will paste the navigation in the exact position as the previous frame. Duplicate the Navigation Symbol and Swap Symbol
  4. Open the Library and find the navigation symbol.
  5. Right-click on it to duplicate the symbol. Name the new symbol "navigation buttons".
  6. Since we want the new symbol in the exact same position as the last one, we can use Swap Symbol to replace one for the other.
  7. Single click on the instance of navigation in Frame 75 on the text links layer. Open the Properties window and click Swap...
  8. Browse to the newly created navigation buttons.Convert Text into Buttons
  9. Find the new symbol called navigation buttons and open it.
  10. Click on the word "home" and select Convert to Symbol (or press F8) and name it "home button".
  11. Add a new Keyframe into the down state.
  12. Select the text in the over state and add a glow filter using the Properties Inspector.
  13. Add a Keyframe in the down state and change the color of the glow to yellow. Also check knockout.
  14. Add a Keyframe in the hit state to set the size of the clickable area of the button.
  15. Now, test your movie to see if it is working (ctr + Enter on Windows or cmd + Enter on a Mac).
  16. Since the new buttons have been placed at the end of the timeline, they will only appear on the screen for the length of one frame - only a small fraction of a second.
  17. Add additional Frames to each layer so that they all extend to Frame 100.
  18. Test your movie again (ctr + Enter on Windows or cmd + Enter on a Mac). If you are satisfied with the home button, repeat the above steps for the other four buttons. Name them facilities button, photos button, videos button, contact button.

If you are done early...

  • Add additional changes in the Down state.