AS3 Filter GlowIn not Tweening

Question

I'm doing a button with two filters that tween in when the user has the cursor over it (Mouse Over) and two more filter tweens when the cursor exits it. Pretty basic stuff.

The filters are Glow and DropShadow. Glow is applied to the text, while DropShadow is applied to the button background (a simple rectangle).

The problem here is that the transition for the GlowIn does not work. It instantly applies the filter at full alpha when the mouse is over it. GlowOut works though.

Though it is set to a 0.25 time, I tried it with full 5 seconds just to be sure, and it still didnt work, so its not a timing issue.

Here is my code:

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
import flash.filters.GlowFilter;
FilterShortcuts.init();

texto.mouseEnabled = false;

this.addEventListener(MouseEvent.MOUSE_OVER, FiltersIn);
this.addEventListener(MouseEvent.MOUSE_OUT, FiltersOut);

var glow = new GlowFilter(0xFFFFFF, 0, 5, 5, 3, 250);
texto.filters = [glow];

function FiltersIn(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:5, _DropShadow_alpha:1, _DropShadow_blurX:5, _DropShadow_blurY:5, time:0.25, transition:"easeOutCubic"});
    Tweener.addTween(texto, {_Glow_alpha:100, time:0.25, transition:"easeOutCubic"});
}
function FiltersOut(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:0, _DropShadow_alpha:0, _DropShadow_blurX:0, _DropShadow_blurY:0, time:0.25, transition:"EaseInCubic"});
    Tweener.addTween(texto, {_Glow_alpha:0, time:0.25, transition:"easeInCubic"});
}

Answer 1

The problem is that the alpha property of the glow filter ranges from 0 to 1, rather than 0 to 100. But Tweener still respects the value you supply it - so in interpolating the alpha values, it's going to jump beyond 1, on its way to 100, probably in the first frame. So that's why you're seeing it go full alpha immediately. If you swap your 100 for a 1, that will fix it.

And the reason the reverse tween still works as expected is because the alpha value gets capped at 1, so even though there are attempts to set it to 50, 60, etc. to 100, when the glow filter stores the actual value, it caps it at 1, allowing the reverse tween to interpolate smoothly between 1 and 0.

Here's the edit in place:

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
import flash.filters.GlowFilter;
FilterShortcuts.init();

texto.mouseEnabled = false;

this.addEventListener(MouseEvent.MOUSE_OVER, FiltersIn);
this.addEventListener(MouseEvent.MOUSE_OUT, FiltersOut);

var glow = new GlowFilter(0xFFFFFF, 0, 5, 5, 3, 250);
texto.filters = [glow];

function FiltersIn(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:5, _DropShadow_alpha:1, _DropShadow_blurX:5, _DropShadow_blurY:5, time:0.25, transition:"easeOutCubic"});
    Tweener.addTween(texto, {_Glow_alpha:1, time:0.25, transition:"easeOutCubic"});
}
function FiltersOut(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:0, _DropShadow_alpha:0, _DropShadow_blurX:0, _DropShadow_blurY:0, time:0.25, transition:"EaseInCubic"});
    Tweener.addTween(texto, {_Glow_alpha:0, time:0.25, transition:"easeInCubic"});
}

Answer 2

Edit: previous answer incorrect due to confounding factors! Please see new answer.

Answer 3

Pro tip: Don't bother using Tweener :) Use Tweenmax from GreenSock or the Juggler from Starling - they're just the best