Sign in to follow this  
Mazoonist

Can tranformations be included in timelines?

Recommended Posts

I have the "shockingly green" classes (many, many thanks, Jack!), and I'm trying to do the following using the "transform around point" plugin. It's not working-- only one of the tweens is playing. Am I barking up the wrong tree, or can transformations like this be included in timelines too?

import com.greensock.*; 
import com.greensock.easing.*;
import flash.geom.Point;

import com.greensock.plugins.*;

TweenPlugin.activate([TransformAroundCenterPlugin, ShortRotationPlugin, TransformAroundPointPlugin]);

var timeline:TimelineMax = new TimelineMax();

timeline.append(new TweenMax(mc, 1, {transformAroundPoint:{point:new Point(mc.x, mc.y), rotation:mc.rotation + 180}, ease:Elastic.easeOut}));
timeline.append(new TweenMax(mc, 1, {transformAroundPoint:{point:new Point(mc.x, mc.y), rotation:mc.rotation + 180}, ease:Elastic.easeOut}));

Share this post


Link to post
Share on other sites

Forgive my ignorance. I'm sure it's because I am following up with another tween on the same object. Because when I try it with two different objects, it works great. So what am I missing in order to get two consecutive tweens on the same object working on a timeline?

Share this post


Link to post
Share on other sites

The tweens are working fine - it's just that you've got them both going to exactly the same values, so the second tween doesn't really do anything (the end value is the same as the beginning value).

 

Let's say mc.rotation is currently 0. That means this code:

timeline.append( new TweenMax(...rotation:mc.rotation + 180...)) 
timeline.append( new TweenMax(...rotation:mc.rotation + 180...)) 

 

will evaluate to:

timeline.append( new TweenMax(...rotation:180...)) 
timeline.append( new TweenMax(...rotation:180...)) 

 

So they're both going to 180 degrees. See what I mean?

 

I think what you meant to do was define relative values which won't get evaluated until the tween renders for the first time, like this:

 

timeline.append(new TweenMax(mc, 1, {transformAroundPoint:{point:new Point(mc.x, mc.y), rotation:"180"}, ease:Elastic.easeOut}));
timeline.append(new TweenMax(mc, 1, {transformAroundPoint:{point:new Point(mc.x, mc.y), rotation:"180"}, ease:Elastic.easeOut}));

 

Or you could put in absolute values of 180 and 360 (or whatever). Notice I put quotes around 180 in order to tell TweenMax to interpret it as a relative value.

Share this post


Link to post
Share on other sites

sheesh! Nevermind, I figured it out. I forgot that the whole timeline is read in all at once and is then pre-ordained. So my rotation:mc.rotation + 180 is getting evaluated in every line right up front. If I make the second one say rotation:mc.rotation + 360, it works as expected.

Share this post


Link to post
Share on other sites

Jack, thanks for the help! I totally forgot about the significance of the quotes! Awesome, now I can make it do whatever I want! I feel so empowered!

Share this post


Link to post
Share on other sites

Okay, I don't feel so bad now, because I do believe I have an intelligent question this time. :D

 

Suppose I have an mc I want to write a timeline for. I want it to tween 400 pixels to the right, then rotate clockwise 30 degrees on its own registration point, then proceed to tween 200 pixels down. Here's what I've got:

import com.greensock.*; 
import com.greensock.easing.*;
import flash.geom.Point;
import com.greensock.plugins.*;
import fl.transitions.easing.*;

TweenPlugin.activate([TransformAroundCenterPlugin, ShortRotationPlugin, TransformAroundPointPlugin]);
var timeline:TimelineMax = new TimelineMax();

timeline.append(new TweenMax(mc, 1, {x:"400"}));
timeline.append(new TweenMax(mc, 1, {transformAroundPoint:{point:new Point(mc.x, mc.y), rotation:"30"}, ease:None.easeNone}));
timeline.append(new TweenMax(mc, 1, {y:"200"}));

Only now, the trouble is that the point I supplied in the second command there is being read from the starting point of the mc. How can I make that point a relative value (to where the mc has moved after the first command), similar to the trick of using quotes?

 

On another note, notice that above I am using the fl.transitions.easing package to get an easing of "none." I kind of wondered what i really should do if I don't want easing, though, as I understand your tweens have a default easing of Quad.easeOut, and I wondered why you didn't also include some kind of None.easeNone in your classes? Or even why there is a default easing instead of no easing at all being the default?

Share this post


Link to post
Share on other sites
Only now, the trouble is that the point I supplied in the second command there is being read from the starting point of the mc. How can I make that point a relative value (to where the mc has moved after the first command), similar to the trick of using quotes?

 

There's not really a way to make a Point object relative, but since you know you're moving it 400 pixels in the previous tween, you could just do: point:new Point(mc.x + 400, mc.y). Another way to do it would be to use the new onInit callback to call a function that would set it at that point (onInit gets called right before a tween renders for the first time and BEFORE it records all the starting/ending values).

 

On another note, notice that above I am using the fl.transitions.easing package to get an easing of "none." I kind of wondered what i really should do if I don't want easing, though, as I understand your tweens have a default easing of Quad.easeOut, and I wondered why you didn't also include some kind of None.easeNone in your classes? Or even why there is a default easing instead of no easing at all being the default?

 

Sure, you can use the Linear.easeNone equation in the com.greensock.easing package. Same thing. :)

 

As for why the default ease is Quad.easeOut, it's because it's the most commonly used one and it creates a much more realistic motion than a linear ease. Good question(s) though.

Share this post


Link to post
Share on other sites

Wow! Thanks for the speedy, concise answers.

 

Actually, I am working on a project that's a pool cleaner. Check out this web page: http://dhngrafik.se/tittbild/flash.asp? ... version=10. They made that animation on flash's timeline. I am trying to do it all with code instead, but I am still going to try to provide the scrubber bar so the animation can be scrubbed. That's why I'm trying to do it all in the context of a timeline. So now you can see that I will need to continually rotate the cleaner on a point that is within its own coordinate space, not just once, and based on wherever it is at (it may be unpredictable, I'm not sure).

 

Can you give me any ideas on how to do this? Hints? Is there perhaps a way to dynamically change the registration point, or is that even necessary? Right now I have a couple of tiny nested "pivot_point" movie clips nested inside the sweeper clip, and some methods defined for getting their global x and y values.

 

Hey, I appreciate your time, so don't think my barrage of questions is taken for granted or anything. I really and truly appreciate it.

 

If you remember me, I'm the guy who's going to interview you someday.

Share this post


Link to post
Share on other sites

Actually, I could do an onComplete function after each TweenMax command that updates the new position of the sweeper. Maybe that's the answer! (I'm not sure if that kind of dynamic updating will "scrub," though). Anyway, if you have any hints, I appreciate it. I certainly don't expect any more than that, though, as I'll work it out, I'm sure.

Share this post


Link to post
Share on other sites

Right, a TimelineLite/Max is generally for linear animations. Not that you can't plug dynamic tweens into them, but if you do that and the user scrubs backwards after the tweens have been updated dynamically, they won't be seeing the same thing that happened previously.

 

As for transforming around a custom registration point, that's exactly what TransformAroundPoint is for. And remember, you can use onInit if you need to dynamically set it when the tween inits, kinda like:

 

var transformInfo:Object = {point:null, rotation:180}; //this will get edited dynamically when the tween inits
timeline.append( new TweenLite(mc1, 1, {transformAroundPoint:transformInfo, onInit:setRegPoint, onInitParams:[mc1, transformInfo]});
function setRegPoint(mc:DisplayObject, obj:Object):void {
   //your logic here...
   obj.point = new Point(mc.x + 10, mc.y); //or whatever
}

 

Just one idea.

Share this post


Link to post
Share on other sites

Wow! Thanks for that. I was unaware of the onInit function as well. How nice! Anyway, the more I think about it, the more clear it becomes that in order to scrub this animation, the entire course of the sweeper around the pool (and all of its positions, turns, etc) is going to have to be calculated ahead of time. Hmm... maybe I could have it make a dynamic "dry run" (no pun intended) first really fast, record all the positions into an array, and then proceed with the "real thing," which could then be scrubbed with no problem. What fun!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.