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:
-
var xCenter:int = thumbMask.width/2;
-
var acc:Number;
-
-
clipContainer.addEventListener(MouseEvent.ROLL_OVER, onClipRoll);
-
clipContainer.addEventListener(MouseEvent.ROLL_OUT, onClipRoll);
-
-
function onClipRoll(event:MouseEvent):void {
-
if(event.type == MouseEvent.ROLL_OVER) clipContainer.addEventListener(Event.ENTER_FRAME, moveContainer);
-
else clipContainer.removeEventListener(Event.ENTER_FRAME, moveContainer);
-
}
-
-
function moveContainer(event:Event):void {
-
acc = thumbMask.mouseX < xCenter ? xCenter-thumbMask.mouseX : -(thumbMask.mouseX-xCenter);
-
clipContainer.x += acc * 0.05;
-
}
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:
-
var leftLimit:int = 0;
-
var rightLimit:int = -245;
-
-
var thumbWidth:Number = thumbMask.width;
-
-
var xRef:Number;
-
var xConv:Number;
-
-
clipContainer.addEventListener(MouseEvent.ROLL_OVER, onClipRoll);
-
clipContainer.addEventListener(MouseEvent.ROLL_OUT, onClipRoll);
-
-
function onClipRoll(event:MouseEvent):void {
-
if(event.type == MouseEvent.ROLL_OVER) clipContainer.addEventListener(Event.ENTER_FRAME, moveContainerBySlow);
-
else clipContainer.removeEventListener(Event.ENTER_FRAME, moveContainerBySlow);
-
}
-
-
function moveContainerBySlow(evt:Event):void {
-
xRef = -thumbMask.mouseX + thumbWidth / 2;
-
xConv = (xRef - clipContainer.x) * 0.01;
-
-
clipContainer.x += xConv;
-
-
// cliplimits
-
if (clipContainer.x>= leftLimit) clipContainer.x = leftLimit;
-
if (clipContainer.x <= rightLimit) clipContainer.x = rightLimit;
-
}
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 
Tags: 
[...] Reversed Movement (Mouse Position / Navigation, AS3) [...]
Thanks for sharing this!
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.
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!
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 :)
hi, excellent weblog and a very good explanation! one for my bookmarks.
Thanks!