1 Correct answer
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
13
Replies
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
AdChoices