Tweening 3D with CS4

[x0b]

hi,

 

firstly i'd like to say thanks for creating a brilliant tweening library, i love it!

 

i'm having problems tweening 3d objects using the built in fp10 3d engine.

 

i have a timeline tween that i want to create a tweenlite tween from and then duplicate it for other objects. i am using the bezierthrough plugin as well to tween along a path.

 

i have used the motion editor in the ide to copy all values that change along the path into a tweenlite instance as follows:

 

TweenLite.to(item, 3, {bezierThrough:[{x: 486.6,y: -46.4,z: 408.1, rotationX: -36.6, rotationY: 2.1, rotationZ: 1.1}, {x: 488.6,y: 24.9,z: 542, rotationX: -39.9, rotationY: 1.2, rotationZ: 1.8}, {x: 492.3,y: 99.9,z: 672, rotationX: -41.9, rotationY: -0.2, rotationZ: 1.7}, {x: 524.3,y: 187.9,z: 745, rotationX: -44.9, rotationY: -0.2, rotationZ: 1.7}, {x: 567.8,y: 278.9,z: 847, rotationX: -45, rotationY: -2.3, rotationZ: 1}, {x: 744.2,y: 560.1,z: 1302.7, rotationX: -45, rotationY: -2.3, rotationZ: 1}], ease: Linear.easeNone});

 

the problem is this tween acts differently to how it does when playing the tween on the timeline in the ide, it seems between bezier points the object moves from side to side, whereas it doesn't in the timeline tween.

 

you can see the two examples here: (please ignore the colour of the objects, they are irrelevant)

 

the correct motion using timeline : http://disturbmedia.com/alex/tweens/timeline.swf

the tweenlite motion which kind of wobbles between bezier point : http://disturbmedia.com/alex/tweens/tweenlite.swf

 

i have noticed that on each keyframe the 3d center point has different values, but i don't see any way of adjusting these using code.

 

does anyone know if this is what is making my tween appear different by using these two different methods?

 

is there something i'm missing or not using correctly in tweenlite?

 

thanks!

[GreenSock]

The issue simply has to do with the way you're plotting the bezierThrough. It sounds like you're assuming that if you define a few points along that bezier that you drew in the Flash IDE, that the path bezierThrough draws will exactly match the one in the IDE but that's not true. Imagine drawing six dots along the path you drew in the IDE and then erase the path completely and think of how many ways you could draw a curved line that connects those dots. The line could zig-zag wildly and still connect all the dots. The curve will almost surely NOT match what you had in the IDE. There's an algorithm bezierThrough uses to connect the points and it is connecting them but not in a way that matches what you were envisioning. There isn't an easy, perfect way to match your IDE path in ActionScript (at least not that I know of). If you need it to match, what I'd recommend is to create a MovieClip in the IDE that follows a motion path and animate it; then simply tween the frame number of that MovieClip with the "frames" plugin.

 

There are some other advanced things you could do to make that MovieClip serve as a mechanism to plot points on your bezier that could be used to drive other stuff as well, and you could vary the "resolution" with more frames, etc. but I don't want to get too detailed or overwhelm you if it's not something that'd be useful in your circumstance. Just post again if you need more help.