Web Workshop: Flash Rollover

Use Flash to add dynamic navigation to your website.

Javascript is not the only way to make rollovers on your site. You can also use Flash technology to create dynamic site navigation.

With Flash technology you can easily create a simple rollover button that swaps images as you mouse over it. Or you can create a crazy animated button with sound attached.

Before you begin, download the trial version of Flash 5.

Create a Rollover Button with Flash

Add Flash to your buttons

  1. Choose Insert New Symbol from the menu at the top.

  2. Choose Button for behavior. Give it an identifiable name. For example, call it Groovy.

  3. Look at the timeline. Flash has labeled the four states of the button for you.
    • Up is the first image or button your users see on the webpage.
    • Over is the image users see when they move their pointer over the image.
    • Down lets you create yet another image. This image flashes when the button is clicked.
    • Hit defines the clickable area, or parameters, of your button. This image is not visible on your webpage. It only defines the area users can mouse over to see the effect. Keep it large enough to encompass your other buttons. This creates an adequate area for users to click on.

  4. Create images for each button state. Either import a graphic or draw one using the Flash tools.
    • Create a graphic for your Up state.
    • Click the frame for the Over state. Choose Insert Keyframe.
    • Change the button image for the Over state. It is simple to use your Paintbucket tool to change the color.
    • Repeat these two steps for the Down frame and Hit frame.

  5. Add a URL.
    • In the menu bar, go to edit, and choose the option Edit Movie.
    • Drag an instance of your button from the library onto the stage. (If you can't see the library, go to Window > Library. Or, open it using CRL+L.)
    • Choose Windows > Actions from the menu.
    • In the Actions panel, scroll down the list, and double-click Get URL.
    • Three boxes will appear.
      • In the first box enter the URL you want to link to. For example, http://www.techtv.com.
      • In the second box, labeled window, choose _self from the dropdown menu. This ensures the new URL loads on top of the current window.
      • In the third box, labeled variable, choose Don't Send.

  6. Choose Publish Preview to test your button in Flash.

  7. Click Publish if you're happy with the results.

Flash automatically produces an HTML page with your Flash button embedded in it and the Flash movie file -- .swf -- for you to upload.

You can modify the HTML page to add other elements, such as text graphics, before you upload the HTML page. Upload both your HTML file and your Flash file to your server.


Home HTML Menu Extra Information HTML Hub