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"});
}

score 1 · Accepted Answer · answered Sep 27 '13 at 16:53

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"});
}

That worked, thanks! Extra points for explaining why it happens. — FoxLift, Sep 30 '13 at 09:56

hanenbro · Answer 2 · 2013-09-27T16:54:57.837

0

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

edited Sep 27 '13 at 16:54

answered Sep 27 '13 at 14:41

hanenbro

604
7
16

I swapped the files in my "Caurina" folder in where I have FLA and SWV, and restarted flash, but it didnt work (I may have already been on the latest version). I never used SWC files, but when I try to open them it says unable to read file. Am I doing something wrong? – FoxLift Sep 27 '13 at 15:36
Ah, you know what? I actually must have corrected the faulty line at the same time as swapping in the source code version for the SWC.(Which, just for your info is the same code, but precompiled, for the convenience of using one file. You use them by going to File > Actionscript Settings, then adding them to Library path tab.) So the above is not correct, sorry. I'll submit a new answer now! – hanenbro Sep 27 '13 at 16:45

score -3 · Answer 3 · answered Sep 27 '13 at 14:59

-3

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

answered Sep 27 '13 at 14:59

mika

1,411
1
12
23

aww downvoted? Well TweenMax.to(stack, .3, { autoAlpha:0 }); :) – mika Oct 02 '13 at 14:35

AS3 Filter GlowIn not Tweening

3 Answers3