CBT Cafe Logo  

CBT Cafe > Flash > Basics & Drawing

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.

Flash Image Maps

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.

Flash Image Maps

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.



We've added 4 New Movies to our Flash 5 source files cd! These include detailed videos on:

1. Tell Target/With
2. Dynamic Text 1
3. Dynamic Text 2
4. Animated Fly Out menu Part 2

About the CDROM:
These movies are the SAME content found in our Flash 5 tutorials, but the quality is clearly better than the streaming, web-compressed format we have online with Frame Rates up to 20 TIMES FASTER and CD-ROM quality AUDIO!

More Info...




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