A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: Trying to achieve this continous rollOver effect -->

  1. #1
    Junior Member
    Join Date
    Jul 2011

    Unhappy Trying to achieve this continous rollOver effect -->

    Don't really know how to describe that effect, but see it here:

    When you rollOver the images, they all "pop" out continuously, affected by the mouse position over the scene. I need to create something exactly like this and not sure where to start..

    Any guides?

    Thanks in advance...

  2. #2
    Senior Member
    Join Date
    Jun 2003
    Kent, WA
    The basic idea is to just watch for the distance between the movieclip and the mouse. Once the distance is below a certain threshold, start scaling the movieclip up. Something like this:

    myMC.onEnterFrame = function()
       var xdist:Number = _xmouse - this._x;
       var ydist:Number = _ymouse - this._y;
       // Pythagorean theorem! Remember your trig?
       // We skip the square root because it's expensive and not needed
       var distSq:Number = xdist*xdist + ydist*ydist;
       // Square the maxDist since we're comparing it to distSq
       var maxDistSq:Number = 200 * 200;
       if (distSq < maxDistSq)
          // Within range; scale up
          // This equation gives us a value between 0 and 1, where
          //   1 is if the mouse is centered on the movieclip, and 0 is
          //   at the maxDist
          var scale:Number = 1 - distSq / maxDistSq;
          this._xscale = this._yscale = 100 + scale * 100;
          this.swapDepths( getNextHighestDepth() );
          // Out of range; default scale
          this._xscale = this._yscale = 100;
    There's a lot of other stuff going on on that website - some tweaking to the x/y values, movieclip animations, etc... But this is the basic "pop" technique. Just apply it to every movieclip.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width

HTML5 Development Center