• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate CC rollover/rollout button

New Here ,
Aug 26, 2016 Aug 26, 2016

Copy link to clipboard

Copied

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.

Views

12.9K

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
community guidelines

correct answers 1 Correct answer

Advocate , Sep 24, 2016 Sep 24, 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

Votes

Translate

Translate
Explorer ,
Sep 23, 2016 Sep 23, 2016

Copy link to clipboard

Copied

I have the same question

Votes

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
community guidelines
Adobe Employee ,
Sep 23, 2016 Sep 23, 2016

Copy link to clipboard

Copied

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

as3 play mc in reverse

Votes

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
community guidelines
Explorer ,
Sep 24, 2016 Sep 24, 2016

Copy link to clipboard

Copied

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.

Screen Shot 2016-09-24 at 23.05.15.png

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

Votes

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
community guidelines
Advocate ,
Sep 24, 2016 Sep 24, 2016

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

thanks! this is what i needed! works perfect!

Votes

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
community guidelines
Community Beginner ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

I'm having an issue with this not working after the first rollover when exported for HTML5. Any thoughts? I assume it's the frame difference with actionscript and html but your example works fine when I view the HTML document but when I export your example as is to HTML5 the rollover breaks after the first try. 

Votes

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
community guidelines
Community Expert ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

@DBA Timothy 

 

open your developer console to debug.

Votes

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
community guidelines
Community Beginner ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

Everything is greyed out when I try. The frame labels were throwing it and my simple fix because I'm moving quickly was to put in frame numbers vs the labels and it's working the same.

Votes

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
community guidelines
Community Expert ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

LATEST

copy and paste (don't attach) here a screenshot of the console.

Votes

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
community guidelines
Explorer ,
Sep 25, 2016 Sep 25, 2016

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Advocate ,
Sep 25, 2016 Sep 25, 2016

Copy link to clipboard

Copied

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

(It's generated automatically with button symbols).

Votes

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
community guidelines
New Here ,
Apr 23, 2020 Apr 23, 2020

Copy link to clipboard

Copied

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. 

Votes

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
community guidelines
New Here ,
Apr 23, 2020 Apr 23, 2020

Copy link to clipboard

Copied

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?

Votes

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
community guidelines