Starting with functions in CreateJS / Animate

Question

i'm new in Animate/CreateJS, and i would like to know how to make this to work. What i want is when i mouseover one object, the other appears from 0 alpha to 1. I searched google but i cannot find anything that helps me with this issue.

The code is this one:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{

// Execute movieclip 2 function

}


var movieClip_2_FadeInCbk = fl_FadeSymbolIn.bind(this);
this.addEventListener('tick', movieClip_2_FadeInCbk);
this.movieClip_2.alpha = 0;

   function fl_FadeSymbolIn()
   {
   this.movieClip_2.alpha += 0.01;
   if(this.movieClip_2.alpha >= 1)
   {
        this.removeEventListener('tick', movieClip_2_FadeInCbk);
   }
}

Thanks in advance.

Answer 1

The code you've written is not far off. You have an alpha fade ticker, you just need to add the tick listener when you want to start the fade in. Also make sure to use .bind(this) when passing in any handler functions that accesses this in them, or you will run into problems:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler() {
    this.addEventListener('tick', movieClip_2_FadeInCbk);
}

this.movieClip_2.alpha = 0;

var movieClip_2_FadeInCbk = fl_FadeSymbolIn.bind(this);
function fl_FadeSymbolIn() {
   this.movieClip_2.alpha += 0.01;
   if (this.movieClip_2.alpha >= 1) {
       this.removeEventListener('tick', movieClip_2_FadeInCbk);
   }
}

Alternatively, you could use a Tween:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

this.movieClip_2.alpha = 0;

function fl_MouseOverHandler() {
    createjs.Tween.get(this.movieClip_2).to({alpha: 1}, 1000);
}