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
    Posts
    1

    Unhappy Trying to achieve this continous rollOver effect -->

    Don't really know how to describe that effect, but see it here:
    http://porscheeveryday.com

    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
    Location
    Kent, WA
    Posts
    536
    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:

    Code:
    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() );
       }
       else
       {
          // 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