Participant

Answered

Animate CC rollover/rollout button

13 replies
13795 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

just.emmaCorrect answer

Inspiring

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

reneekennedy

Participant

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?

Translate

N

nsaneo

Participating Frequently

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

Translate

just.emma

Inspiring

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

(It's generated automatically with button symbols).

Translate

R

reneekennedy

Participant

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.

Translate

N

nsaneo

Participating Frequently

This worked for me with a movieclip button:

HTML
Placed three things in the HTML file:

<a href="http://www.google.nl"> 

<div id="banner" style="cursor:pointer;"> 

</div>

</a>

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

Translate

just.emmaCorrect answer

Inspiring

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

Translate

R

remko nieuwenhuizen

Participant

thanks! this is what i needed! works perfect!

Translate

N

nsaneo

Participating Frequently

I have the same question

Translate

Preran

Legend

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

as3 play mc in reverse

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.