Same mouseover/-out effect for many buttons

Last time I touched flash was 10 years ago, or so... In other words, I'm quite rusty. I am going to make a interactive map of Europe. I want the strongly green circles to have a mouseover/-out effect (First I was thinking some size-change, but I think maybe I'll go for opa开发者_如何学运维cityfading). I have a couple problems. The code under is working, but Is there a good way to either force the fadingout(...) to finish, before fadingin(...) is called? If not, is there a smart way to get the current opacityvalue when fadingin(...) and make that the start value. If the user moves the mouse outside quickly, the effect is not looking very nice. Also, what is the best way to get these functions to work with every circle in the map? If the user drags the mouse around, I want this to create a tracing effect.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var outTween:Tween;

myButton.addEventListener(MouseEvent.MOUSE_OVER, fadingout);
myButton.addEventListener(MouseEvent.MOUSE_OUT, fadingin);

function fadingout(event:MouseEvent): void {
outTween = new Tween(myButton, "alpha", None.easeNone, 1, 0, 1, true);
}

function fadingin(event:MouseEvent): void {
outTween = new Tween(myButton, "alpha", None.easeNone, 0, 1, 1, true);
}

What I would probably do is create a class for the circle. In there I would create the eventlisteners for mouseover and mouseout to change the opacity and/or size.

On a second note, I recommend that you use TweenLite or TweenMax from greensock http://www.greensock.com/tweenlite/

TweenLite should probably suffice for you. Look into it's properties especially the "overwrite"-property which controls the tween overriding you mentioned

overwrite : int Controls how (and if) other tweens of the same target are overwritten by this tween. There are several modes to choose from, but only the first two are available in TweenLite unless OverwriteManager.init() has been called

You could very well create a class for the green circles, and contain all listeners and tweened reaction features within it. A very solid method.

You may also leverage event propagation on a movie clip / sprite containing all mouseable elements to achieve the same thing with a single listener set:

var myContainer:Sprite = new Sprite(); 
//add all elements
myContainer.addEventListener(MouseEvent.MOUSE_OVER, over, true, 0, false);
myContainer.addEventListener(MouseEvent.MOUSE_OUT, out, true, 0, false);

private function over(e:MouseEvent):void
{
TweenLite.to(e.target, .5, { alpha:1.0 });
}

private function out(e:MouseEvent):void
{
TweenLite.to(e.target, .5, { alpha:0.5});
}

Basically, you add the listener to the containing object, and events are passed down to the children, who then receive the event instructions. The ".target" of the propagating object, received in the MouseEvent argument is the key here.

I'm using the fantastic TweenLite framework here, as mentioned by others, and you should too.

cheers and good luck!