Skip to main content
J
jeremym28725213
Participant
August 26, 2016
Answered

Animate CC rollover/rollout button

  • August 26, 2016
  • 4 replies
  • 13700 views

What is the best way to create a button that plays the animation of a movieclip when rolling over it and then play reverse when rolling out of it.

    This topic has been closed for replies.
    Correct answer just.emma

    That's unnecessarily complicated; you don't need to do anything in the HTML file.  All you need is:

    this.btn.addEventListener("mouseover", over.bind(this));

    function over()

    {

      this.mc.gotoAndPlay("over");

    }

    this.btn.addEventListener("mouseout", out.bind(this));

    function out()

    {

      this.mc.gotoAndPlay("out");

    }

    Update instance names (in red) as needed, and within the movie clip, set up frame labels called "over" and "out".

    Working example here: Dropbox - overout

    4 replies

    R
    reneekennedy
    Participant
    April 23, 2020

    Emma, I have some code that's not doing this correctly. I am trying to get it to gotoandPlay a frame marker upon rollover. Is this possible?

    N
    nsaneo
    Participating Frequently
    September 25, 2016

    Hi Emma,

    Thanks! Can you create a movieclip button?
    For some reason that didn't work for me when creating a movieclip button:
    www.misuu.nl/fla/movieclip_btn.zip

    Michael

    just.emma
    just.emma
    Inspiring
    September 25, 2016

    You need to add stage.enableMouseOver(); if you want to add rollovers to MovieClips. 

    (It's generated automatically with button symbols).

    R
    reneekennedy
    Participant
    April 23, 2020

    I am not sure my question actually went to you Emma. I am trying to use your code for rollovers but asking it to gotoandplay a frame label. Is this possible? I am not having any luck. 

    N
    nsaneo
    Participating Frequently
    September 24, 2016

    This worked for me with a movieclip button:

    HTML
    Placed three things in the HTML file:

    <body onload="init();" style="margin:0px;">

      <a href="http://www.google.nl">  <!--1. A link-->

           <div id="banner" style="cursor:pointer;"> <!--2. A div-->

                <canvas id="canvas" width="336" height="280" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>    

           </div>

      </a>

      <!--3. A script-->

      <script type="text/javascript">

      var canvas = document.getElementById("canvas");

      var w = canvas.width;

      var h = canvas.height;

      var banner = document.getElementById("banner");

      banner.addEventListener("mouseover", function(){document.rollOverFunction();});

      banner.addEventListener("mouseout", function(){document.rollOutFunction();});

      </script>

    </body>

    Timeline

    Placed this in the first frame of the animation:

    document.rollOverFunction = function () {

      exportRoot.cta.gotoAndPlay(2);

    }

    document.rollOutFunction = function () {

      exportRoot.cta.gotoAndPlay(16);

    }

    Button timeline

    Frame 1 is the normal state of the button. It stops until it gets rollOver'd.

    Frame 1-15 is the mouse-over animation. It stops with this.stop();
    Frame 16-30 is the mouse-out animation.

    Video + .fla file:
    Animate CC - Button with Mouse Over + Mouse Out (.FLA) - YouTube

    just.emma
    just.emmaCorrect answer
    Inspiring
    September 25, 2016

    That's unnecessarily complicated; you don't need to do anything in the HTML file.  All you need is:

    this.btn.addEventListener("mouseover", over.bind(this));

    function over()

    {

      this.mc.gotoAndPlay("over");

    }

    this.btn.addEventListener("mouseout", out.bind(this));

    function out()

    {

      this.mc.gotoAndPlay("out");

    }

    Update instance names (in red) as needed, and within the movie clip, set up frame labels called "over" and "out".

    Working example here: Dropbox - overout

      R
      remko nieuwenhuizen
      Participant
      August 13, 2018

      thanks! this is what i needed! works perfect!

      N
      nsaneo
      Participating Frequently
      September 23, 2016

      I have the same question

      Preran
      Community Manager
      PreranCommunity Manager
      Community Manager
      September 23, 2016

      Found a discussion that could probably provide you with some insights.

      as3 play mc in reverse

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