Combine HTML5 Canvas Code Snippets

Question

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() {}andthis.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

ClayUUID · Accepted Answer

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.

kglad · Answer

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

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.