Animation via points

[polonDev]

Hello,

 

I have some animation what i did on timeline in flash GUI and I need to do the same in code. So I extracted object info like (position, scale, rotation etc) from each frame of animation from swf.

 

And now i need to do the animation in as3

 

So I need to say to MaxTween to animate my object through points (pos.x, pos.y) which I have. But only through this points.

 

I tried to do

 

__path -> is array of my points

 

 

var path:LinePath2D = new LinePath2D(__path);
var f:PathFollower = path.addFollower(__object, 0);
var tween:TweenMax = TweenMax.to(f, 5, {progress: 0, onComplete:OnComplete, onUpdate:OnUpdateTween});

 

But its going via different points.

I just need to do animation only through points what I defined.

So if I define 6 points and set the duration of animation to 5 seconds the object must change the position every second to the next defined points.

 

So simply I just need to convert animation from flash gui to code.

[polonDev]

Basically just the keyframes of animation.

[Carl]

Hi,

 

Sorry to hear you are having trouble.

 

Can you provide a very simple example of a LinePath2D not going through the points that you specified in your array? Just an example with a few points would be helpful.

 

LinePath2D should certainly respect the points in the array. Would love to help figure out what is wrong.

 

I'm not entirely clear on what you need to do, but keep in mind LinePath2D is intended to simply move objects along a path.

 

So if I define 6 points and set the duration of animation to 5 seconds the object must change the position every second to the next defined points.

 

Do you need the duration of each segment to be 1 second long? Are your points all the exact same distance apart?

 

A LinePath2D is going to smoothly animate your object(s) along the path based on the duration of the tween and the ease applied. If your points are all equally spaced and you are using a Linear ease, then yes, I imagine this approach will work.

 

From what I understand from your description, I think it would be more appropriate to loop through your array of points to append TweenLite tweens to a TimelineLite/Max that have target values based on your point data.

 

Take a look at the second example swf here:

http://www.snorkl.tv/2011/04/tweenlite-meets-flash-drawing-api-for-animated-line-drawing-fun/

 

Ignore, the "line drawing" aspect. You will see that the code is dynamically fetching x/y coordinates from objects on the stage. In your case you would use your points Array.

 

Hope this helps. Again, let us know if we can help you with LinePath2D not going to the right points.

[polonDev]

Thank you for answer.

 

A LinePath2D is going to smoothly animate your object(s) along the path based on the duration of the tween and the ease applied.

 

This is the problem what I have.

Just imagine. Somobody did simple animation in Flash.

He created movieClip and tween animation from frame1 to frame 30. Just moved the movieclip from (mc.x = 0) to (mc.x = 100). Then on frame 30 is keyframe and he created another movement from (mc.x = 100) to (mc.x = 500) to frame 60.

So if you play the animation the object is going slowly (frist 30 frames) and then next 30 frames faster because the mc must go from x = 100 to x = 500 for same time.

Then I have extractor and I'm reading the positions of mc from each frame what Flash already generated.

And to simply automatic implement the movement in code I just need to send my object only to my defined points what i got from flash. Because all points are already calculated by flash and they are including the behavior.

 

But if I use LinePath2D, and the framerate of flash scene where object movement was generated is 60fps, I will set the duration to 1 second and movement is going from x = 0 to x = 500 with constant speed. Because of extra points what LinePath2D generates. So I lost the behavior (tween effects what was applied to mc in flash)

 

Many thanks for answer if its possible.

[Carl]

Thanks for further explaining. If you are saying that you have coordinates for EVERY frame in the Flash IDE then I don't think LinePath2D is the tool for this job. I was thinking you were just using select keyframes (start and beginning points of tweens).

 

If you have 30 frames and 30 coordinates I would recommend a different approach if you want to incorporate the features of TweenLite/Max and maintain the easing/timing that was used in the Flash IDE.

 

If your array has 30 coordinates just tween a number using a Linear ease over the course of 30 frames and use that number to serve as the index that you use to pull the coordinates out of the array.

 

This is very quick and dirty:

 

 

import com.greensock.*;
import com.greensock.easing.*;

var curXIndex:int = 0;
var xVals:Array = [1, 2, 3, 4, 6, 7, 8, 10, 12, 14, 16, 18, 22, 26];

//tween the curXIndex value at a rate of 1 increment per frame
TweenLite.to(this, xVals.length , {curXIndex:xVals.length-1, onUpdate:applyX, useFrames:true, ease:Linear.easeNone});

//use updated curXIndex value to pull out the right x val from xVals array
function applyX():void{
var newXPos:Number = xVals[curXIndex];
trace(newXPos);
mc.x = newXPos;
}

 

Instead of tweening a property of a display object directly, you are tweening the value of a variable and using that value to grab the right coordinate for your display object.

[polonDev]

Thank you. That works fine.