Flash Button when cursor is removed?

Been a while since I last touched flash, but I used to do this all the time.

Ok, so set up your animation, make a new layer for your actions (in case you haven't already).  Put a keyframe on the last frame with stop();
On the first frame put this:

stop();
this.onRollOver = function() {
	rewind = false;
	this.play();
};
this.onRollOut = function() {
	rewind = true;
};
this.onEnterFrame = function() {
	if (rewind == true) {
		prevFrame();
	}
};

Basically when your mouse is on top of the button the animation will play forward, and when it's not it plays in reverse.  What's great about this method is that you can even touch a button in the middle of an animation and it will still do what you'd except without jerking the animation around or starting over from the beginning, etc.

I had to open up an old project to get this code, so while I was in there I just made a simple "tutorial" to show you.
http://chris-barr.com/files/buttons.swf
http://chris-barr.com/files/buttons.fla (saved as Flash 8)

Last edited by C.Barr (2008-05-08 18:04:01)

I think that C.Barr's solution is pretty good, although I tend to steer away from "onEnterFrame" loops and having the playhead play in reverse.  I've read that can cause strain on the Flash player's performance.  The nice thing about this method though as C.Barr explained is that the animation is fluid if you roll on or off during the animation. 

The only other thing I would add to this, which I add to all of my rollovers, is an "onDragOut" function.  That way if you're user clicks on the button, holds and drags out of the area of the button the reverse animation still happens.  Otherwise your button will remain in it's "over" state.  The code is very simple:

this.onDragOut = function() {
   rewind = true;
};