Combine HTML5 Canvas Code Snippets

[MushroomInternet]

Hi,

I am looking to combine two of the HTML5 Canvas Adobe Animate CC code snippets but I can't figure out quite how to do it. The code snippets I would like to combine are the following:

var frequency = 3;

stage.enableMouseOver(frequency);

this.instance_name_here.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler() {

}

and

this.addEventListener('tick', fl_FadeSymbolIn.bind(this));

this.instance_name_here.alpha = 0;

function fl_FadeSymbolIn() {

               this.instance_name_here.alpha += 0.01;

               if(this.instance_name_here.alpha >= 1) {

                          this.removeEventListener('tick', fl_FadeSymbolIn.bind(this));

               }

}

I am trying to have a movie clip fade in when it is hovered over with the mouse.

Thank you in advance for any help.

Kind regards,

Peter

[kglad]

first, assign an instance name to your object (eg, mc) so instead of use this.instance_name_here, you're using this.mc:

var tl = this

var frequency = 3;

stage.enableMouseOver(frequency);

this.mc.alpha = .01;  // don't use 0

var tickF=fl_FadeSymbolIn

this.mc.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler() {

startFadeF();

}

function startFadeF(tl)

tl.addEventListener('tick', tickF);

}

function fl_FadeSymbolIn() {

               tl.mc.alpha += 0.01;

               if(tl.mc.alpha >= 1) {

                          tl.removeEventListener('tick',tickF);

               }

}

[MushroomInternet]

Hi kglad,

Thank you for your message, unfortunately I was given a "Unknown Identifier" error using the following code as per your example:

var tl = this;

var frequency = 3;

stage.enableMouseOver(frequency);

tl.pin.alpha = .01;  // don't use 0

var tickF=fl_FadeSymbolIn

tl.pin.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler() {

startFadeF();

}

function startFadeF(tl)

tl.addEventListener('tick', tickF);

}

function fl_FadeSymbolIn() {

               tl.pin.alpha += 0.01;

               if(tl.pin.alpha >= 1) {

                          tl.removeEventListener('tick',tickF);

               }

}

Kind regards,

Peter

[ClayUUID · Accepted solution]

Argh, do not use the code snippet fade example. For some inexplicable reason it doesn't use the built-in tween library. You can do everything you want with just this:

stage.enableMouseOver(25);

this.mc.alpha = 0.01;

this.mc.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler(evt) {

    createjs.Tween.get(evt.currentTarget).to({alpha:1}, 500);

}

Note though that this will keep executing every time you mouse over your object. Depending on what you want you should probably remove the mouseover handler after it's executed once.

[MushroomInternet]

Hi ClayUUID,

That is perfect! Just what I was looking for. Can a similar process be used to reverse the alpha tween on mouse out?

Kind regards,

Peter

[ClayUUID]

No, the tween library only works for fading things in.

I'm kidding, of course it can do that.

stage.enableMouseOver(25);

this.mc.alpha = 0.01;

this.mc.addEventListener("mouseover", fl_MouseOverHandler);

this.mc.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOverHandler(evt) {

    createjs.Tween.get(evt.currentTarget, {override:true}).to({alpha:1}, 500);

}

function fl_MouseOutHandler(evt) {

    createjs.Tween.get(evt.currentTarget, {override:true}).to({alpha:0.01}, 500);

}