How to apply ease to mouseover menu links?

Hi.

With a smart structuring and timeline animation, you don't need a lot of JS to achieve this effect.

You only need a regular Button symbol with one Movie Clip instance containing the up animation in the first frame (out/up state) and another Movie Clip instance in the second frame (hover state) containing the down animation.

Both Movie Clip instances should have a this.stop(); instruction in the their last frames.

The big catch is that the first Movie Clip instance in the out/up state will start playing because it doesn't have a stop command in the beginning and we cannot add code to a Button timeline in the IDE. This can be solved by placing a code inside of the up Movie Clip instance in the first frame to check if this frame has been visited or not. Like this:

JS code for the Movie Clip instance in the out/up state:

if (!this.started)
{ 
    this.gotoAndStop(14); // the last frame of the Movie Clip instance has to be hardcoded
    this.started = true;
}

FLA download:

animate_cc_html5_canvas_rollover_effect_02.zip - Google Drive

Regards,

JC