fade in on rollover button and fade out when leaving the button

[georget90705909]

How can I make an image fade in on a rollover button and fade out when leave the button

[JoãoCésar]

Hi.

One easy way to achieve it is to have a regular Button symbol with one Movie Clip instance containing the fade in animation in the first frame (up state) and another Movie Clip instance in the second frame (over state) containing the fade out 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 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 fade in 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 up state:

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

This should do the work.

FLA download:

animate_cc_html5_canvas_rollover_effect.zip - Google Drive

Regards,

JC

[kdmemory · Accepted solution]

Hi George

I made an alternative example utilizing TweenJS (part of CreateJS). This involves one Movieclip to fade in/out and one button to mouseover/mouseout.

The movieclip in my example is instance named "image",

the button is named "button". Both can be named anything but must be reflected in this script:

var tln = this;
tln.image.alpha = 0;
this.button.on("mouseover", function () {
    createjs.Tween.get(tln.image, {
        override: true
    }).to({
        alpha: 1
    }, 1000, createjs.Ease.easeNone);
});
this.button.on("mouseout", function () {
    createjs.Tween.get(tln.image, {
        override: true
    }).to({
        alpha: 0
    }, 1000, createjs.Ease.easeNone);
});

In both Tweens the parameter {override: true} is important to stop (override) one incompleted tween if the opposite tween is called. For fast changes between mouseover and mouseout.

Here is the example to download: Dropbox - bananas.zip

Klaus