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.
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
Copy link to clipboard
Copied
I have the same question
Copy link to clipboard
Copied
Found a discussion that could probably provide you with some insights.
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.
Video + .fla file:
Animate CC - Button with Mouse Over + Mouse Out (.FLA) - YouTube
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
Copy link to clipboard
Copied
thanks! this is what i needed! works perfect!
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
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).
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.
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?