Changing the colour of a graphic animation on Mouse over (Animate CC)

Report · Oct 31, 2019

Hello all! Seeking some advice on replicating a previous animation the company I am working for has provided to me. Unfortunately due to confidentiality I cannot share screens or links so I will try to the best of my ability to describe my issue, and please forgive me for being a bit of a noob at this. Coming from an After Effects background so some of the stuff makes sense but the ridgity of this netcode is driving me a bit bonkers.

There is a symbol that animates on the backend of this ad that starts as a small red rectangle with rounded corners with the company logo in it (white) then stretches out left and right that reveals "shop with us at (company logo).com", and when you mouseover the animation the background fades to a darker color, and reverts to brighter mouseoff. The closest I had gotten to replicating this in Animate is making a button out of the symbol, creating two other instances of the animation for the Up and Down with Down having the animation in a darker color but as I suspected when I rollover the animation it plays again which isn't what I am looking for.

Another solution I had tried is having those two instances on my Stage as symbols on different layers then trying to add an action "Fade out a movie clip(?)" combined with a mouseover effect. The fadeout works, but it happens on the action frame number and seems to ignore the mouse over command. This is the canned code I was using:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_3.addEventListener("mouseover", fl_MouseOverHandler_4);

function fl_MouseOverHandler_4()
{

var movieClip_3_FadeOutCbk = fl_FadeSymbolOut_5.bind(this);
this.addEventListener('tick', movieClip_3_FadeOutCbk);
this.movieClip_3.alpha = 1;

function fl_FadeSymbolOut_5()
{
this.movieClip_3.alpha -= 0.01;
if(this.movieClip_3.alpha <= 0)
{
this.removeEventListener('tick', movieClip_3_FadeOutCbk);
}
}

// End your custom code
}

I feel like I'm overthinking this but with time and pressure on the other end I'm starting to go in circles. Any help is appreciated!

Cheers,

SR

Report · Oct 31, 2019

You may be complicating things. It seems to me that you could make a movieclip with a shape teen and a mask for the text. Then you could copy those frames, paste then and apply reverse for the out. Of course you need a stop at the end of you in and a stop at the end of you out.

I'll try to make you a sample within the hour.

Report · Oct 31, 2019

Actually 2 symbols - 1 square red + 1 rectangle - use tween and tint to change the color and a mask for the text.

Report · Oct 31, 2019

Thanks for the swift reply resdesign, much appreciated! I currently do have a shape tween on the rectangle, still getting used to how masks work in here. The method you're speaking of is making the bg red then masking that out with a rectangle, making the bg layer the button while the animation remains untouched? Kind of like an stencil alpha mask?

Report · Oct 31, 2019

Not sure this is exactly what you want but look at it.

https://app.box.com/s/q2ppfmf21ek95tkipe4aiv86qaez5mfz

Report · Oct 31, 2019

It's close but the animation should see no shape tweening on mouseover, only the color, as the animation is "locked" to a timeline... if that makes any sense. Gonna take a crack at the mask bit and see where that gets me. thx!

Report · Oct 31, 2019

OK, sorry about that. I missed that part. Let me know if you need more help.

Report · Oct 31, 2019

I suppose you could change the code for the mouse over with:

createjs.Tween.get(this.btn).to({
alpha: 0
}, 1000);