9. Juli 2010 
Marvin Blase Hey,
wie schon auf dem englischen Blog jetzt auch in deutsch einen kurzen Artikel über das so genannte Inertia Movement. Da ich öfters mal damit zu tun habe, hatte ich mal geschaut, was ich da schon in peto habe und hab´s für euch ein bißchen aufgeräumt. Inertia Bewegungen ist diese Geschichte mit "je weiter die Maus von der Mitte zieht, desto schneller / langsamer wird die Bewegung".
Es gibt jedoch zwei verschiedene Arten davon, nämlich einmal schneller werdend - das bietet sich bei Galerien an, die endlos Thumbnails haben, wie z.B. die Hugo Boss Gallery - und einmal langsamer werdend, das seht ihr im Beispiel oben oder bei depotVisuals.
Ich habe beides schon geschrieben und will auch garnicht lang drumrum reden. :) Ihr braucht lediglich einen Container auf der Bühne, der all eure Thumbnails enthält und welcher von einer benamten Maske maskiert wird. Im Folgenden erst einmal die endlos Variante, die - je weiter ihr an den Rand der Maske kommt - eine schnellere Bewegung erzeugt:
-
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;
-
}
Die zweite Variante benötigt die x-Limits für links und rechts, so dass der Clip langsamer wird, bzw. stoppt, falls er rüberlaufen sollte. Genau dieses Script ist für das Beispiel oben zum Einsatz gekommen:
-
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;
-
}
Bei Fragen oder Anmerkungen einfach einen Kommentar hinterlassen :)
Posted in 
Tags: 
