using TweenLite/Max for click/drag easing

[djmatix]

I have a video that I rendered of a simple cube that is a perfect loop. I have some code setup to where when you click and drag on the video object it plays or reverses the video to make it look like the user is rotating the cube in 3d. (also you can drag it in one direction and it'll keep going in a loop)

 

What i'm wondering is if this click/drag idea is possible using tweenlite/max. Since I wouldnt know where exactly the playhead should stop on the video because the user is clicking and dragging however they want, I'm wondering if this would be possible, or if I should modify the code I have to allow easing.....however that would be done. Any ideas would be greatly appreciated.

[GreenSock]

If I understand your description properly, yes, absolutely. You can use a TimelineLite or TimelineMax and just associate the click/drag stuff with the currentTime property of the TimelineLite/Max. That's what I do in the intro swf on

[djmatix]

I appreciate your prompt response...AGAIN!

 

I see the playhead scrubber on your header animation on the website. What i'm wondering, is if you can ease the movement after you let go. The idea i'm talking about is clicking and dragging on the actual movieclip, not a play head like a video player. That way it feels like the user is turning the cube animation by touching it. So the effect i'm looking for is when the user clicks/drags over the animation it plays it forwards or backwards but after they let go, the motion eases slightly as if you're throwing it a bit. So the cube spins, and then slowly stops instead of move/stop, move/stop.

 

Think about the iphone list, when you scroll it, it eases to a stop. Same idea.

[GreenSock]

You can tween the currentTime property, sure. And apply an ease to that tween. For example, this would tween from wherever the timeline is to the 5-second point over the course of 2 seconds, slowly easing out (slowing down the animation towards the end):

 

myTimeline.pause();
TweenLite.to(myTimeline, 2, {currentTime:5, ease:Strong.easeOut});

 

Tons of flexibility

[djmatix]

I don't think i'm explaining what i'm trying to do clearly. The user initiates the movement of the playhead with their click/drag action. So it isn't a predetermined tween, its random based on the users input. So if anything, it'd want to ease after the user lets go of the cube, so it looks/feels like the cube is on a lazy susan, when its spun, it slows to a stop. Does that make sense?

[GreenSock]

Sure, you're talking about something like this, right?: http://www.greensock.com/portfolio/361/

 

(click and drag the circle and let go)

 

You basically need to track the mouse's velocity at the time the mouse is released and have that control the duration of your tween and/or the destination value. It would be the perfect scenario for using the new physics2D or physicsProps plugins because you can just set the velocity and friction (or any of the other parameters) and it'll make it look very natural. You can see an example of the plugins in the Plugin Explorer.

[djmatix]

Exactly! Thanks for the advice, I'll take a look at the plugin explorer. I'd love to cut down the code for handling the movement of the cube because right now its pretty involved.

 

I had to search around for quite a bit to get the code to make it work, and even loop the video once you reach the end so it spins continuously. If I could use TweenMax in a few lines i'd be very happy.

 

cubeVid.buttonMode = true;
cubeVid.addEventListener(MouseEvent.MOUSE_DOWN, pressHandler);

function pressHandler(e:MouseEvent):void {
 startX = cubeVid.mouseX;
 startFrame = cubeVid.currentFrame;
 cubeVid.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
 stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandler);
}
function releaseHandler(e:MouseEvent):void {
 cubeVid.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
 stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler);
}

function moveHandler(e:MouseEvent):void {
 movCurrentFrame = cubeVid.currentFrame;
 changeDistance = Math.round((cubeVid.mouseX - startX) / 10);
 travelDistance = startFrame - changeDistance;
 if (travelDistance > cubeVid.totalFrames) {
   cubeVid.gotoAndStop(travelDistance % cubeVid.totalFrames);
 } else if (travelDistance < 0) {
   cubeVid.gotoAndStop(cubeVid.totalFrames + (travelDistance % cubeVid.totalFrames));
 } else {
   cubeVid.gotoAndStop(travelDistance);
 }
}

[skyrocker]

How can I achieve this in AS2 using TweenMax? I've got a movieclip of 360 frames to simulate the rotation in 3D of an object. I want to be able to move through the frames using a click&drag movement of the object, with easing calculated depending the mouse speed on release. I've tried the code above (translating it to AS2) but with no luck. Is there a way to achieve this using TweenMax?

 

Thanks.

sky

[GreenSock]

Sure, you can accomplish this sort of thing with TweenMax, but it can be a little tricky to calculate a natural-looking duration and ease. This type of thing is generally better suited to an onEnterFrame script that does some velocity/deceleration calculations and figures out the frame that should be used in the gotoAndStop(). I'd highly recommend Keith Peters' "ActionScript Animation" books (there's one for AS2).