Jump to content
GreenSock

Eckstein1

Tween within Timeline positions Object if Tween if initialized

Recommended Posts

Hi,

 

this is a simplified example of the problem I have.

 

First I create a circle and place it at (0/0). Then I create a timeline.

 

The timeline includes two bezier curves. Each bezier has a FROM(x/y) and a TO (bezier). Before tweening along the beziers the timeline waits for 2 seconds.

import com.greensock.*;
 
var m1:MovieClip = new MovieClip();
m1.graphics.beginFill(0xffcc00, 1);
m1.graphics.lineStyle(1, 0xffcc00, 1);
m1.graphics.drawCircle(0, 0, 10);
m1.x=0, m1.y=0;
addChild(m1);

var TIMELINE:TimelineMax=new TimelineMax({repeat:-1});
TIMELINE.add(TweenMax.fromTo(m1, 5, {x:100, y:400}, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}), 2);
TIMELINE.add(TweenMax.fromTo(m1, 5, {x:500, y:400}, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}}), 7);

What i observe is that because of the FROM within the tweens to circle is immediatelly moved to the last FROM of the added tweens. So in this example to circle is initially positioned at (500/400) instead of (0/0) where it in my understanding should be.

 

The positioning based on the timeline should not be done while initializing the timeline. It should happen if the corresponding tween is played by the timeline.

 

Kind regards,

Uli

Link to comment
Share on other sites

Try adding immediateRender:false to the second tween

 

TIMELINE.add(TweenMax.fromTo(m1, 5, {x:500, y:400}, {immediateRender:false, bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}}), 7);

Link to comment
Share on other sites

Thanks Carl,

 

you are correct if I add this attribute it works as it should. I also have to add it to the first tween otherwise it will position at (500/400).

I can find this problem only if I use beziers. It does not occur for other tweens.

 

So I propose to set "immediateRender=false" by default if a bezier tween is added to a timeline. Otherwise it has to be done manually evertime a bezier tween is added to a timeline. At least a hint should be shown in the documentation.

 

Again thanks and kind regards,

Uli

Link to comment
Share on other sites

Thanks for the suggestion.

immediateRender is set to true for all from-based tweens.

 

After further investigation, I think the root of the problem is most likely incorrect usage of fromTo().

 

fromTo() tweens are supposed to have matching properties in the from and to vars.

 

Correct (matching properties x and x)

TweenLite.fromTo(mc, 1, {x:20},  {x:100})

Incorrect (un-matched properties x and opacity)

TweenLite.fromTo(mc, 1, {x:20},  {opacity:1})

In your cast you are setting x and y in the from vars and the to vars have plugin-based values. Sure it happens to work ok-ish, in your case, but its not recommended. 

 

I believe this code will give you the results you want

import com.greensock.*;
 import com.greensock.plugins.*;
 TweenPlugin.activate([BezierPlugin]);


var m1:MovieClip = new MovieClip();
m1.graphics.beginFill(0xff0000, 1);
m1.graphics.lineStyle(1, 0xffcc00, 1);
m1.graphics.drawCircle(0, 0, 10);
m1.x=0, m1.y=0;
addChild(m1);


var TIMELINE:TimelineMax=new TimelineMax({repeat:-1});


TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}, 2);
TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}});

If you want mc to start somewhere other than 0,0, you can add a set() to the beginning of your timeline

 

TIMELINE.set(m1, {x:50, y:50});
TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}, 2);
TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}});

Come to think of it, I don't think BezierPlugin should be used at all with a from() or fromTo() tween because you really can't tween from a path to another path, make sense?

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×