HTML5 Canvas Javascript - Change brightness of MovieClip on Mouse Event

[Jeffery.Wright]

This seems like a very simple thing, but I cannot locate any information on how to do this. 

TweenJS appears to only handle position and alpha properties. 

When mousing over a MC, I want an other MC to darken, something like this very simplified abstract concept: 

MC1.mouseover {MC2.Brightness = 50%}

MC1.mouseout {MC2.Brightness = 100%}

Has anyone done that before? How did you do it?  

Thanks.

[JoãoCésar]

Hi.

You should only need a nested MovieClip instance that thas the brightness set to 100% in frame 0 and 50% in frame 1.

Then you can add a code like this:

stage.enableMouseOver();
this.mc1.stop();
this.mc1.on("mouseover", function(e){ e.currentTarget.gotoAndStop(1); });
this.mc1.on("mouseout", function(e){ e.currentTarget.gotoAndStop(0); });

Regards,
JC

[Jeffery.Wright]

João,

Thanks man, that is one solution, I was hoping for a pure code solution, as a timeline based soution seems like more of a complex workaround that would entail adding more features to simple MC's. 

If we are able to simply say a MC has an alpha of X, or a position of X, couldn't we do the same for Brightness?

Does the Brightness color effect acheive an altered appearance for a MC by adding a line of script to the compiled code? Has anyone found a way to put that in an event function? 

Doesn't MC >Filters > Brightness alter a clip's appearance via JS, somehow? Is that a function we could access directly by code?

Thanks again man, I appreciate your time. 

[JoãoCésar]

No problem.

It's because brightness is actually a ColorFilter applied to the instance and not a simple property like alpha or scale.

So if you want to tween the brightness, you'll need to keep re-adding/updating the ColorFilter with the corresponding values.

Or you can also overlay an instance with the appearance that you want and tween its alpha, I guess.