Adobe Flash Tutorials


Current Flash CS, CS2, CS3, CS4 and CS5 Tutorials

 

 

Invisible HotSpots - Macromedia Flash Tutorial


Tim Carden

1

Flash presentations can be pure animation and music, but more valuable are its tools for adding interactivity. Anything can be a button in Flash, but sometimes it's useful to separate the animation (movie clip) from the interactive controls. You may have one huge graphic that you would like to add hotspots to, but don't want to break up the graphic into separate objects and create a button for each. The following techniques show you how to create invisible hotspots Also, you may not want Flash to follow the exact outline of your button. This is common in text buttons where it is often hard to click on the actual text itself — you want Flash to help you out by including the space between the letters.

Here's a quick work-through of the latter example. Create a new Flash file. Choose Insert | New Symbol to insert a new Symbol. Name it "textlink" and select "button" for its behaviour.

In the up state, create a text object with the text "jump to our website" and format it as trebuchet ms, 24pt and Bold using the Window | Panels | Character panel.

2

Right-click on the up state keyframe and from the popup menu choose "Copy Frames". Right-click on the down state and from the popup menu choose "Paste Frames". Repeat for the down state. We will only be making minor formatting changes to each state, so it is easier to start with the original object.

3

With the over state keyframe active, select the copy of the text object on that keyframe. Set its fill to purple, using the fill popup on the colours section of the main toolbar. We will also draw an underline below the text to given the impression it is an HTML hyperlink. Set the outline to the same purple before drawing the line with the line tool. You can leave the Down state as the original black text object without outline.


T I P
If you have Flash's smart snapping turned on, the line will snap to straight if you get close. If you want to constrain the line to 45 degree angles only, hold down the SHIFT modifier key while drawing.

 

4

Return to Scene 1 by clicking the Scene 1 tab at the top of the Window. Open the library panel (Ctrl+L) and drag the newly created button on to the stage. Here we will see the problem. Preview the published version with Ctrl+ENTER. See how the text only becomes highlighted when you move the move over the actual curves. The space between words or characters down not register. This is frustrating for users who can't seem to click on your link. Even worse, moving your pointer across the text causes it to flicker as it registers a MouseOver and then a MouseOut each time you move over a part of a character. Experiment with the SWF below:

5

We can fix this by creating an invisible rectangular hotspot around the entire text to specify that the entire region is a link, not just the exact object. Once again insert a new symbol (Insert | New Symbol...). Draw a single rectangle. Give it graphic behaviour, and name it "rect_hotspot". Click OK and draw a new rectangle whatever size you would like. Ensure there is no outline.

6

Open the mixer panel (Windows | Panels | Mixer) and set the Alpha to 0% to make the fill invisible. Now select the fill tool and click on the rectangle to fill it with the new fully-transparent fill.

7

Exit back to Scene 1 by clicking on the Scene 1 tab at the top of the screen. If your library panel isn't open, press Ctrl+L to open it. Double-click on the textlink symbol to edit it. Drag the new "rect_hotspot" from the library onto your textlink symbol. You can use the size tool to fit it around the textlink object.


T I P
To make it easier to position the invisible rectangle, you may want to view the stage as outlines. Above the layers list in the timeline there are three symbols: an eye, a padlock and a black square. Click the black square to toggle between outlines and normal view.

 

8

Copy and paste the newly sized rectangle in the other buttons states as well. Now Flash will treat the entire region of the text, including the space around and between characters, as the button. And you haven't lost the transparent nature of your text button — place it on any background and no one need ever know you have a rectangle there. Experiment with the final SWF file of my FLA file below to feel the difference.


T I P
New in Flash 5 is the Paste in Place feature (Ctrl+Shift+V). It overcomes Flash's annoying tendency to paste copied objects wheresoever if feels like. Use Paste in Place in the above step to avoid have to position the rectangle after each paste — paste in place keeps the exact position of where it was copied.

 

Final:

Original:

 

9

You can also make irregular hotspots by creating transparent shapes however you want. For example, you may have a map you have imported from clipart, and each part of a country should link somewhere. Instead of slicing it up into individual countries, and creating buttons for each, you could make separate irregular hotspots. As an exercise try for yourself with the example below.

Download my starting Flash 5 FLA file here and open it in Flash. It is a map for a fictitious boot gallery. You will note that I have created a new empty layer called "hotspots" viewable in the Flash timeline (View | Timeline). Create irregular shaped hotspots so each part of the map is clickable. If you would like a full tutorial on this email me (see the orange box below) and I'll see what I can do.

What did you think? Did you like this tutorial? Was it easy to follow? Do you have suggestions for future tutorials? Have you seen an effect in Print, web or Flash that you would like to know how to achieve? Please feel free to contact me (Tim) on tiem@healthposts.com.au with your Corel technique query.

 

Copyright 2001, Tim Carden, All Rights Reserved








Groupon Getaways



 

Follow Designer Today on Twitter and Google+


Designer Today tutorials cover all versions of 3D, General 3D, 3dsmax, After Effects, Cinema4D,  CorelDRAW, Flash, Illustrator, InDesign, Maya 3D, Paint Shop Pro, Painter, PhotoPaint, Photoshop, Premiere, Web Design and other design and photo editing software.

Tutorials
3ds max   After Effects  Cinema 4D  CorelDraw  Flash 
Illustrator  InDesign  Maya 3D  Misc   Natural Media   Painter   Paint Shop Pro   PhotoPaint   Photoshop  Poser   Premiere   Texturing   Web Design   Xara Xtreme


Designer Today is the Graphic Design Magazine for 2D and 3D graphic designers. We have thousands of graphic design and graphic design software tutorials, product reviews and design articles available.

Copyright © 1998-2015, GMP Services, Inc. of Statesboro Georgia, All Rights Reserved

Visit our other websites
Poser World - Poser & DAZ Studio 3D Models
3D Dojo - 3D FBX Format Models
Awe 3D - Custom 3D Model Services
Golf Done Right
Statesboro Business & Lifestyle
Allen Harkleroad | Favorite Recipes 
Beat Debt Collectors in Court 
Sue Abusive Debt Collectors