Loop activated on mouse movement

I'm just going to explain the context so it is clearer.

I made this menu : my menu

I am looking to make an improved and more advanced version of the same menu.

I made an animation of waves on the cofee's surface and am looking to make it l开发者_JS百科oop when the mouse is moving and to stop looping when it's not.

Sorry for the lack of specifications as I am quite new to actionscript, but I hope somebody will be able to help me. :)

Thanks, Mathieu

---

Well, you said it - leverage MouseEvent.MOUSE_MOVE to set a conditional in your looping routine.

    private var _isMoving:Boolean = false;

    stage.addEventListener(MouseEvent.MOUSE_MOVE, checkMouse);
    this.addEventListener(Event.ENTER_FRAME, doLoop);

    private function checkMouse(e:MouseEvent):void 
    {
        _isMoving = true;
    }
    private function doLoop(e:Event):void 
    {
        trace("moving =" + _isMoving);

         if(_isMoving)
         {
           // loop animation
         }

        _isMoving = false;
    }

---

depending on how you want it to work I would do this as follows:

1. create an animation of wavy coffee
2. ensure the animation loops
   • note that clips loop by default, so all you have to do is match the first and last frames!
3. place the clip at the edge of your current coffee graphic
   • double click on the graphic to edit it
   • drag an instance of the looping animation from the library onto the "edge" of the graphic
   • OR just replace your entire light brown graphic with an animated one that loops
4. when the mouse is moving, call play on the animated loop clip
5. when the mouse stops, call stop on the animated loop clip

Some example code would be along the lines of:

    public function init():void {
        menuClip.addEventListener(MouseEvent.MOUSE_OVER, onMenuRollOver);
        menuClip.addEventListener(MouseEvent.MOUSE_OUT, onMenuRollOut);
    }

    public function onMenuRollOver(event:MouseEvent):void {
        stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
        /* do the stuff you're currently doing to animate the clip here.
        something like: coffee graphic height = ease to mouseHeight */

    }

    public function onMenuRollOut(event:MouseEvent):void {
        /* do the stuff you're currently doing to stop the clip here. */
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
        coffeeClip.stop();
    }

    public function onMove(event:MouseEvent):void {
        resetTimer();
        coffeeClip.play(); //note: play has no effect when movie is playing (that's ideal in this case)
    }

    public function resetTimer():void {
        if(mouseMovementTimer == null) createTimer();
        mouseMovementTimer.reset();
        mouseMovementTimer.start();
    }

    public function createTimer():Timer {
        mouseMovementTimer = new Timer(DELAY, 1); //fiddle with the delay variable. Try 500, at first
        mouseMovementTimer.addEventListener(TimerEvent.TIMER, stopAnimationLoop);
    }

    public function stopAnimationLoop(event:TimerEvent):void {
        mouseMovementTimer.removeEventListener(TimerEvent.TIMER, stopAnimationLoop); //optional but recommended
        mouseMovementTimer = null;
        coffeClip.stop();
    }

Of course, you would need to do things like call init() and import flash.utils.Timer and initialize variables like mouseMovementTimer, menuClip, coffeeClip and DELAY.

Warning: This code is off the top of my head and untested. So there's likely to be small bugs in it but you should get the general idea:

• add a mouse listener when the user mouses over the menu
• remove that listener if the user mouses out of the menu
• have that listener play the looping movie clip
• trigger an event that will stop the looping clip if movement hasn't been detected in a while
• once the trigger goes of, stop the clip

The key is in detecting when the mouse stops moving. Flash detects interaction well but does not detect NON-INTERACTION for obvious reasons. One easy way to solve that is to trigger a timer that will go off once too much time has elapsed since the last activity. Then, when the timer triggers, you know action has stopped!

I think that's the key piece to solving your problem. I hope that helps someone in some way.

~gmale