Member Avatar for twkillswitch

I am an uberflash noob.

I am trying to make an interactive map of the northeast region that will be used on a webpage. I want the map to be able to do "state" specific rollovers which i have managed to complete by making each state its own symbol as a button.

On the hit state i would like the image to grow and display my companys branches, which i will link the text to a mapquest link in order to get directions.

It seems like everything i had was working untill i previewed the movie and saw that the hit state wasnt visible.

Any tips on creating interactive maps? Any helpfeul tuts on web buttons for flash?
Please anything on this would help

  • 2 Contributors
  • 3 Replies
  • 123 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by HI2Japan

Dani AI

Generated

If the goal is to have a state "grow" and reveal branch links, avoid fighting the built‑in Button states and switch each state to a MovieClip hotspot you control with ActionScript. Buttons are great for simple up/over/down visuals, but they limit animation and timeline control. Converting each state to a MovieClip lets you animate a smooth scale/tween on hover, show a branch list inside the clip (or as an overlay), and open MapQuest links on click — all from a single, easy-to-manage event handler.

Example workflow and code (Flash CS3 / AS3):

  • Convert each map region to a MovieClip symbol. Put a small invisible background shape (alpha = 0, not visible = false) in frame 1 so the hit area is generous.
  • Label timeline frames inside the clip: idle, expand, collapse. Put stop(); on idle.
  • Give each instance a name on the stage (e.g., state_NY_mc) and add these listeners on your document class or frame:
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;

state_NY_mc.buttonMode = true;
state_NY_mc.mouseChildren = false;
state_NY_mc.addEventListener(MouseEvent.ROLL_OVER, onStateOver);
state_NY_mc.addEventListener(MouseEvent.ROLL_OUT, onStateOut);
state_NY_mc.addEventListener(MouseEvent.CLICK, onStateClick);

function onStateOver(e:MouseEvent):void {
  var mc:MovieClip = MovieClip(e.currentTarget);
  mc.parent.setChildIndex(mc, mc.parent.numChildren - 1);
  mc.gotoAndPlay("expand");
}

function onStateOut(e:MouseEvent):void { MovieClip(e.currentTarget).gotoAndPlay("collapse"); }

function onStateClick(e:MouseEvent):void {
  var req:URLRequest = new URLRequest("http://www.mapquest.com/your-address");
  navigateToURL(req, "_blank");
}

Troubleshooting and UX tips:

  • If regions overlap, bring the active clip to the top as shown so its animation and clickable area aren’t blocked.
  • Use mouseChildren = false so clicks target the whole region not internal text fields.
  • For performance, avoid thousands of vectors; consider bitmap caching for static artwork but test visual quality when scaling.
  • Provide a non‑Flash fallback (an HTML image map or list) for accessibility and SEO.

: this approach directly supports the animated growth and in‑place branch list you described. ’s button discussion explains why buttons are awkward here — MovieClips give you the control you need.

Recommended Answers

All 3 Replies

Member Avatar for HI2Japan

It doesnt work because the hit state is what triggers the button. i.e. You have text that you want to work as a button. If you dont specify a hit state they have to click on one of the letters. The answer is to put a rectangle in the hit state. It does not show, but the person can trigger the actions of the button by moving over where you placed that rectangle.

Up state - how the button looks normally
Over state - how button looks when cursor is hovering over it(over hit state that is)
Down state - how button looks when mouse button is held down (over hit state again)
Hit state - what triggers the button.

good luck.

Member Avatar for twkillswitch

in the timeline for the button it will show u those options up, down, over, hit ect.

if i create a keyframe for the hit state you would figure what ever changes u make in that keyframe would then appear in the hit state.

Let me know if i am wrong here... I have to put another "action" rectangle over the same area i want to change for the hit state

like i said not too familiar with flash but i will continue to play with it...

if you have any other tips or hints i would appreciate it! thanks

Member Avatar for HI2Japan

The hit state is invisible on the button. The only visible states are the up, over, and down. As I mentioned, the hit state only specifies the trigger area.

If your button is just going to be words, then you definitely need a hit state because the only clickable part would be the letters. Thats why you put a rectangle in the hit state (yes you have to have a keyframe there). It will make the triggerable area anywhere within the rectangle that was placed in the hit state. That rectangle will not show up at all because it is in the hit state. If you want to see the rectangle when you are holding down the mouse button, you would need to put it in the down frame.

Hope this helps. It is confusing, but once you get it, buttons are easy.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.