HTML5 Canvas Javascript - Change brightness of MovieClip on Mouse Event

Forum|Forum|1 year ago
July 3, 2024
1 reply
622 views

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.

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

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.WrightAuthor

Inspiring

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ésar17023019

Community Expert

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded