Two Inertia Movements

July 7th, 2010 Marvin Blase

Hey,
I recently had to deal with Inertia-Movements again and had a look for some older scripts to re-use. I found two which I quickly wanted to share. Inertia movement is an effect you may know from many galleries or navigations. It's the "move your mouse left and the clip will slide smoothly to the right" - thing. The example above shows it as well - thanks to Danny for these great pictures.

The first script I'm going to show is used for infinite looping, means, the movement will not become slower as you reach the end of the clip. It rather works like "The more the mouse is away from the horizontal center the faster the movement is", so having an infinite loop of thumbnails is pretty cool then. An example can be found here: Hugo Boss Gallery

The other version is like the opposite - the clip is limited to the left and to the right, which basically means: The more the clip gets to it's "end" the slower the movement becomes. This effect was used on depotVisuals or the example above.

So let's have a look at the code for the first version:

PLAIN TEXT

Actionscript:

1. var xCenter:int = thumbMask.width/2;
2. var acc:Number;
3.  
4. clipContainer.addEventListener(MouseEvent.ROLL_OVER, onClipRoll);
5. clipContainer.addEventListener(MouseEvent.ROLL_OUT, onClipRoll);
6.  
7. function onClipRoll(event:MouseEvent):void {
8.     if(event.type == MouseEvent.ROLL_OVER) clipContainer.addEventListener(Event.ENTER_FRAME, moveContainer);
9.     else clipContainer.removeEventListener(Event.ENTER_FRAME, moveContainer);
10. }
11.  
12. function moveContainer(event:Event):void {
13.     acc = thumbMask.mouseX < xCenter ? xCenter-thumbMask.mouseX : -(thumbMask.mouseX-xCenter);
14.     clipContainer.x += acc * 0.05;
15. }

You need to have a mask which masks a container holding all your thumbnails. Everytime your mouse is over your clipContainer the acceleration is calculated by using the xMouse-position and the horizontal center. Depending on that acceleration the clip will be moved.

The second version is a bit longer though not more complicated:

PLAIN TEXT

Actionscript:

1. var leftLimit:int = 0;
2. var rightLimit:int = -245;
3.  
4. var thumbWidth:Number = thumbMask.width;
5.  
6. var xRef:Number;
7. var xConv:Number;
8.  
9. clipContainer.addEventListener(MouseEvent.ROLL_OVER, onClipRoll);
10. clipContainer.addEventListener(MouseEvent.ROLL_OUT, onClipRoll);
11.  
12. function onClipRoll(event:MouseEvent):void {
13.     if(event.type == MouseEvent.ROLL_OVER) clipContainer.addEventListener(Event.ENTER_FRAME, moveContainerBySlow);
14.     else clipContainer.removeEventListener(Event.ENTER_FRAME, moveContainerBySlow);
15. }
16.  
17. function moveContainerBySlow(evt:Event):void {
18.     xRef = -thumbMask.mouseX + thumbWidth / 2;
19.     xConv = (xRef - clipContainer.x) * 0.01;
20.    
21.     clipContainer.x += xConv;
22.  
23.     // cliplimits
24.     if (clipContainer.x>= leftLimit) clipContainer.x = leftLimit;
25.     if (clipContainer.x <= rightLimit) clipContainer.x = rightLimit;
26. }

You need to define the limits (or let them be calculated) and the rest is done again by your mask and xMouse-position.

So this is it - all you need is two clips, named thumbMask and clipContainer, pretty self-explaining what each one does :) I hope I was able help someone with that. Ah: I've been asked how I've managed the infinite loop at Hugo Boss. Well, as this is pretty complex itself I will cover it in one of the next posts.

Posted in Daily Bread Tags: as3, inertia, mouse, move, movement, xmouse 6,089 views

9 Responses to “Two Inertia Movements”

1. Gadget Newz says:

   07/07/2010 at 3:00 PM

   [...] Reversed Movement (Mouse Position / Navigation, AS3) [...]
2. sg3 says:

   08/07/2010 at 12:47 AM

   Thanks for sharing this!
3. Jonathan says:

   10/07/2010 at 9:34 PM

   Hi Marvin,
   great snippet! I have been looking for something like this like hell but either you have to pay for it or it does not look good. Finally I found yours, thanks a lot! Can you tell us something about the repeating / endless thumbnails as well? This would make the whole panel perfect. Is there any way of donating you? :-)

   Regards,
   Jon.
4. Tim D. says:

   13/07/2010 at 1:32 AM

   I just wanted to comment and say that I really enjoyed reading your blog post here. It was very informative and I also digg the way you write! Keep it up and I'll be back to read more in the future!
5. Marvin Blase says:

   13/07/2010 at 10:37 AM

   Hey Jonathan,
   I'm glad you like it. The article about repeating thumbnails is already in progress (though it becomes a bit longer than expected - but it covers Milkbox / Lightbox as well). So having a look in some days again will tell you how to realise that :)
6. Donita Septer says:

   16/07/2010 at 11:02 AM

   hi, excellent weblog and a very good explanation! one for my bookmarks.
7. Sergey says:

   19/07/2010 at 11:46 AM

   Thanks!
8. unbellver says:

   26/09/2010 at 9:15 PM

   Hi
   Great tricks!
   i have tried the first version and can´t get the individual pictures (inside clipcontainer) to move in a even way... if i point the mouse near the center (and moves slowly) it looks like one picture following another in steps like the first pulling the second and so on...
   this is the experimentation page:
   http://www.hamacasalrio.com.ar/guest/fotoGallery2.html
   What should i do?
   ps. waiting for THE FINER ART OF LOADING (#3)!!!!
9. Sam says:

   16/01/2011 at 12:10 AM

   this line in the second one screws things up for me.

   if (clipContainer.x <= rightLimit) clipContainer.x = rightLimit;

   Correct me if I'm wrong, but shouldn't this be written as:

   if ((clipContainer.x + clipContainer.width) <= rightLimit) clipContainer.x = (rightLimit - clipContainer.width);

   this works for me by the way.

   Sam