Skip to main content
G
georget90705909
Participant
February 12, 2019
Answered

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

  • February 12, 2019
  • 2 replies
  • 1085 views

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

    This topic has been closed for replies.
    Correct answer kdmemory

    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

    2 replies

    kdmemory
    kdmemoryCorrect answer
    Inspiring
    February 13, 2019

    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

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 12, 2019

    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

      Firefly Community Gallery
      Adobe Firefly

      Remix with Firefly Community Gallery

      Thousands of free creations to fall in love with and remix in Firefly.

      Explore now
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices