MouseEvent.MOUSE_OUT not always firing

[invulse]

I am making a graphing application that will show you the data for each piece of the graph when you rollover it, but sometimes the pieces will get stuck in their up state as the MouseEvent.MOUSE_OUT event isnt firing. I can't seem to replicate the problem easily so I am having trouble identifying a solution.


Graph App (http://www.invulse.com/tests/graph.html)



The listeners added to each piece of the piechart



piece.addEventListener(MouseEvent.MOUSE_OVER, pieceOver);
piece.addEventListener(MouseEvent.MOUSE_OUT, pieceOut);





The code that makes each piece expand in size when rolled over:





function pieceOver(e:Event) {
//trace(adArray[n.target.i].name)
//trace(adArray[overMC.i])
pieceUp(e.target);
e.target.parent.swapChildren(e.target, e.target.parent.getChildByName("swapPiece"));
e.target.filters = [ new GlowFilter(glowColor, glowAlpha, glowSize, glowSize) ];

createToolTip(e.target.i, e.target.colorkey)
}

function pieceOut(e:Event) {
pieceDown(e.target);
e.target.parent.swapChildren(e.target, e.target.parent.getChildByName("swapPiece"));
e.target.filters = [];

killToolTip()
}
function pieceUp(mc:MovieClip) {
var scaleUpX:Tween = new Tween(mc, "scaleX", Strong.easeOut, mc.scaleX, maxSize, 20);
var scaleUpY:Tween = new Tween(mc, "scaleY", Strong.easeOut, mc.scaleY, maxSize, 20);
}
function pieceDown(mc:MovieClip) {
var scaleDownX:Tween = new Tween(mc, "scaleX", Strong.easeOut, maxSize,1, 20);
var scaleDownY:Tween = new Tween(mc, "scaleY", Strong.easeOut, maxSize, 1, 20);
}
function removeChart() {
var chart = stage.getChildByName("piechart");
stage.removeChild(chart);
curnum += 1;
}

[flashead]

the mouse out might be firing (though you should throw a trace in the handler to confirm this). when using the Tween class you need to clear old tweens of a given property before adding new ones to that same property. otherwise you end up with conflicting tweens.

try something like:

function pieceUp(mc:MovieClip) {
stopTweens(mc);
mc.scaleX = new Tween(mc, "scaleX", Strong.easeOut, mc.scaleX, maxSize, 20);
mc.scaleY = new Tween(mc, "scaleY", Strong.easeOut, mc.scaleY, maxSize, 20);
}

function pieceDown(mc:MovieClip) {
stopTweens(mc);
mc.scaleX = new Tween(mc, "scaleX", Strong.easeOut, maxSize,1, 20);
mc.scaleY = new Tween(mc, "scaleY", Strong.easeOut, maxSize, 1, 20);
}

function stopTweens(mc:MovieClip) {
if ( mc.scaleX && mc.scaleX.isPlaying ) {
mc.scaleX.stop();
}

if ( mc.scaleY && mc.scaleY.isPlaying ) {
mc.scaleY.stop();
}
}

that'll check to see if there are currently any tweens playing out on that clip and stop them.

k.

[Flash Gordon]

keep in mind MouseEvent.ROLL_OUT is different than MouseEvent.MOUSE_OUT. You might want to try rollOut and see if that fixes your issue.

[invulse]

flashead - just tried this out and it works perfectly

[pagedragon]

I've been banging my head against this problem for 2 days now and if someone has an idea how to fix this that would be really cool.

I read about putting variables into a class level member, but that doesn't seem to help.

The code works great to open up pop-upboxes on rollover, but if you go over them too fast the contractMe function doesn't activate until you roll over it again.

Here's my code:

package com.mysite.effects {
//Imports the classes and packages to be used
import flash.display.MovieClip;

import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

public class Expander_mouse_over_v5 {

private var _clip:MovieClip;
//List of variables used for tweening the box
private var _startWidth:Number;
private var _endWidth:Number;
private var _startHeight:Number;
private var _endHeight:Number;
private var _startAlpha:Number = 0.2;
private var _endAlpha:Number = .9;

//Changes the easing method and duration along with the tween variables
private var _easing:Function = Back.easeOut;
private var _easing2:Function = Regular.easeOut;
private var _duration:Number = 2;
private var twWidth:Tween;
private var twHeight:Tween;
private var twAlpha:Tween;

//the "constructor"
public function Expander_mouse_over_v5(clip:MovieClip) {
_clip = clip;
//List of variables passed from MovieClip to the private vars above
_startWidth = _clip.width;
_startHeight = _clip.height;
_clip.gotoAndStop(2);
_endWidth = _clip.width;
_endHeight = _clip.height;
_clip.gotoAndStop(1);
_clip.buttonMode = true;
_clip.addEventListener(MouseEvent.ROLL_OVER, expandMe);
_clip.addEventListener(MouseEvent.ROLL_OUT, contractMe);
initClip();
}

//used for re-initializing the "_clip" again so that it resizes
private function initClip() {
_clip.width = _startWidth;
_clip.height = _startHeight;
_clip.alpha = _startAlpha;
}

private function expandMe(event:MouseEvent):void {
_clip.removeEventListener(MouseEvent.ROLL_OVER, expandMe);
_clip.addEventListener(MouseEvent.ROLL_OUT, contractMe);
trace ("Here is expandMe");
_clip.gotoAndStop(2);
twWidth = new Tween(_clip, "width", _easing, _startWidth, _endWidth, _duration, true);
twHeight = new Tween(_clip, "height", _easing, _startHeight, _endHeight, _duration, true);
twAlpha = new Tween(_clip, "alpha", _easing, _startAlpha, _endAlpha, _duration, true);
twAlpha.addEventListener(TweenEvent.MOTION_FINISH, finishHandler);
_clip.parent.addChild(_clip);
function finishHandler(event:TweenEvent) {

twAlpha.removeEventListener(TweenEvent.MOTION_FINI SH, finishHandler);
}
}

private function contractMe(event:MouseEvent): void {
_clip.removeEventListener(MouseEvent.ROLL_OUT, contractMe);
_clip.addEventListener(MouseEvent.ROLL_OVER, expandMe);
trace ("Here is contractMe");
twWidth = new Tween(_clip, "width", _easing2, _endWidth, _startWidth, _duration, true);
twHeight = new Tween(_clip, "height", _easing2, _endHeight, _startHeight, _duration, true);
twAlpha = new Tween (_clip, "alpha", _easing2, _endAlpha, _startAlpha, _duration, true);
twAlpha.addEventListener(TweenEvent.MOTION_FINISH, finishHandler);

function finishHandler(event:TweenEvent) {

twAlpha.removeEventListener(TweenEvent.MOTION_FINI SH, finishHandler);
_clip.gotoAndStop(1);
initClip();

}
}
}
}

[flashead]

pagedragon,

you're close. the problem is you've only got one class var for each of your Tweens. notice in my example that the var (reference to the tween) is being stored directly on the clip being tweened. that allows you to store as many refs as you have clips.

when you only have one reference it gets overwritten by the next clip that you tween.

also, you're storing the reference but you're not stopping old tweens before starting new ones. it's possible you've got conflicting tweens.

when you post big chunks of code like that, wrap it in [ as][ /as] tags so that its rendered as AS and makes it more readable for the rest of us ;)

k.