Highlighted

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

New Here ,
Feb 12, 2019

Copy link to clipboard

Copied

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

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

Views

169

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Feb 12, 2019

Copy link to clipboard

Copied

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

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

Views

170

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 12, 2019 0
Adobe Community Professional ,
Feb 12, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2019 2
Advocate ,
Feb 13, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2019 0