Animated MovieClip on MOUSE_OVER, MOUSE_OUT

Posted on Thursday, 10 June 2010 by nuno mira

If you want to have better looking animations in buttons, you don't use a Button, you use a MovieClip.
This means that you'll have to use some code to control the MovieClip. Play it forwards on mouse over, play it backwards on mouse out.


Here's the code to achieve this in ActionScript 3:

PLAIN TEXT
Actionscript:
  1. anim_mc.stop();
  2.  
  3. anim_mc.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
  4. anim_mc.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
  5. anim_mc.addEventListener(MouseEvent.CLICK, onClick);
  6.  
  7. anim_mc.buttonMode = true;
  8. anim_mc.mouseChildren = false;
  9.  
  10. function onClick(e:MouseEvent):void
  11. {
  12.     trace("click");
  13. }
  14.  
  15. function onMouseOver(e:MouseEvent):void
  16. {
  17.     var mc:MovieClip = MovieClip(e.currentTarget);
  18.    
  19.     mc.removeEventListener(Event.ENTER_FRAME, rewind);
  20.    
  21.     mc.play();
  22.     mc.addEventListener(Event.ENTER_FRAME, advance);
  23. }
  24.  
  25. function onMouseOut(e:MouseEvent):void
  26. {
  27.     var mc:MovieClip = MovieClip(e.currentTarget);
  28.    
  29.     mc.removeEventListener(Event.ENTER_FRAME, advance);
  30.    
  31.     mc.prevFrame();
  32.     mc.addEventListener(Event.ENTER_FRAME, rewind);
  33. }
  34.  
  35. function advance(e:Event):void
  36. {
  37.     var mc:MovieClip = MovieClip(e.currentTarget);
  38.    
  39.     if (mc.currentFrame == mc.totalFrames)
  40.     {
  41.         mc.stop();
  42.         mc.removeEventListener(Event.ENTER_FRAME, advance);
  43.     }
  44. }
  45.  
  46. function rewind(e:Event):void
  47. {
  48.     var mc:MovieClip = MovieClip(e.currentTarget);
  49.    
  50.     if (mc.currentFrame == 1)
  51.     {
  52.         mc.stop();
  53.         mc.removeEventListener(Event.ENTER_FRAME, rewind);
  54.     }
  55.     else
  56.     {
  57.         mc.prevFrame();
  58.     }
  59. }

The first swf file has more than one button, so it uses a Class file to simplify the process (it's available for download).

In case you're still stuck with AS2 for some reason, here's the equivalent code:

PLAIN TEXT
Actionscript:
  1. anim_mc.stop ();
  2.  
  3. anim_mc.onRollOver = function ():Void
  4. {
  5.     if (this._currentframe <this._totalframes)
  6.     {
  7.         this.play ();
  8.  
  9.         this.onEnterFrame = function ()
  10.         {
  11.             if (this._currentframe == this._totalframes)
  12.             {
  13.                 this.stop ();
  14.                 delete this.onEnterFrame;
  15.             }
  16.         };
  17.     }
  18. };
  19.  
  20. anim_mc.onRollOut = function ():Void
  21. {
  22.     if (this._currentframe> 1)
  23.     {
  24.         this.prevFrame ();
  25.  
  26.         this.onEnterFrame = function ()
  27.         {
  28.             this.prevFrame ();
  29.             if (this._currentframe == 1)
  30.             {
  31.                 delete this.onEnterFrame;
  32.             }
  33.         };
  34.     }
  35. };
  36.  
  37. anim_mc.onMouseDown = function ():Void
  38. {
  39.     trace ("click");
  40. };

You can download all the files here.

About nuno mira

flash developer
This entry was posted in ActionScript, AS3, Flash, Tutorial. Bookmark the permalink.

Comments are closed.