Image Maps using Invisible Buttons

Version: All versions
Level: Easy
Objectives: To learn to use Flash invisible buttons to simulate image map effects
Tools & Techniques: Buttons, invisible buttons, pen tool, hit state
Source Files: Download

Step 1: Getting Started

1. Begin with an image or graphic placed on Layer 1, frame 1.
2. Lock Layer 1 after you've placed your image.
3. Create a new layer

Step 2: Trace out the image map

On this new layer, you're going to trace out the image maps using the pen tool (pencil tool on version 4). Select the pen tool and choose a contrasting color for the stroke that will be easily seen over the background image. Click and drag to trace around a particular area you want to make a button. In this case, I'll trace around the states.

Step 3: Add the buttons

1. After you've drawn around the states you want to add buttons to, double click each outline and make it a button by clicking the F8 key on your keyboard. Choose button, then OK.
2. Repeat the steps for all the states

Step 4: Edit your buttons

Double click each button either on the stage or in the Library to edit the button. Add a keyframe to both the Over and Hit states. Delete the Up state.

Step 5: Create a Fill for the Hit State

For the Hit state, make sure you have a fill for the outline. This will make the Hit state easier to find.

Home | Dreamweaver | Fireworks | Flash | Photoshop | Elements | PowerPoint| Ebay | QuickTime Pro | Flash 5 CD | Fireworks MX CD | QuickTime Support | Contact

Copyright © 1999-2011 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics