Jump to content
Search Community

How can I get the same effect using greensock tweening?

learner_7n test
Moderator Tag

Recommended Posts

Hi,

 

How can I get the same effect (result) of the below Flash CS4 AS3 code using greensock tweening code:

 

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var TARotateTween:Tween=new Tween(TA_mc, "rotation", Strong.easeOut, 360 , 0, 6, true);
var TAXTween:Tween=new Tween(TA_mc, "x", Strong.easeOut, -300 , 600, 6, true);
var TAYTween:Tween=new Tween(TA_mc, "y", Strong.easeOut, -125 , 400, 6, true);
var TAFadeTween:Tween=new Tween(TA_mc, "alpha", Strong.easeOut, 0 , 1, 6, true);

 

I am not getting the same effect when using the following code:

 

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

var timeline:TimelineLite = new TimelineLite();

timeline.append(new TweenLite(TA_mc, 6, {rotation:360}));
timeline.append(new TweenLite(TA_mc, 6, {x:"600"}));
timeline.append(new TweenLite(TA_mc, 6, {y:"400"}));
timeline.append(new TweenLite(TA_mc, 6, {alpha:0}));

 

I know the above code is not correct to get the same result but don't know the exact code to get the same result as Flash CS4 AS3 code does.

 

Please help.

Link to comment
Share on other sites

G'day mate,

 

With TweenLite (and TweenMax) you don't need to create a new instance of it every time when adding it to a timelinelite/max. You can just go TweenLite.to() etc.

 

Try this:

 

var timeline:TimelineLite = new TimelineLite();

timeline.append(TweenLite.to(TA_mc, 6, {rotation:360}));
timeline.append(TweenLite.to(TA_mc, 6, {x:"600"}));
timeline.append(TweenLite.to(TA_mc, 6, {y:"400"}));
timeline.append(TweenLite.to(TA_mc, 6, {alpha:0}));

Link to comment
Share on other sites

One key difference is that you're sequencing the tweens by appending each one to a TimelineLite. When you were creating the regular Tweens, you didn't sequence them, right?

 

So technically to reproduce EXACTLY the same effect with TweenLite (and assuming the properties are already at their start values), it would look like:

 

TweenLite.to(TA_mc, 6, {rotation:"-360", x:600, y:400, alpha:1, ease:Strong.easeOut});

 

Of course if you want to store a reference to the TweenLite instance, you can do that like:

 

var tween:TweenLite = new TweenLite(TA_mc, 6, {rotation:"-360", x:600, y:400, alpha:1, ease:Strong.easeOut});

 

And if you want to control both the starting and ending values, you could switch to TweenMax which just adds features to TweenLite. It would look like:

 

TweenMax.fromTo(TA_mc, 6, {rotation:0, x:-300, y:-125, alpha:0}, {rotation:"-360", x:600, y:400, alpha:1, ease:Strong.easeOut});

 

Notice I had to specify "-360" for the rotation - the quotes around it make it a relative value and we needed to do this because Flash always reports rotation values as being between -180 and 180, so 360 is invalid. Flash would read the starting value as 0 instead of 360 and then tweening it to 0 would net no result (0 to 0).

 

You're welcome to break each property into its own tween and sequence them in a TimelineLite if you prefer but I don't think that's what you were looking for.

Link to comment
Share on other sites

Hi,

 

What is the code to load the TimelineLite library above this code? I would like to use the below code.

 

var timeline:TimelineLite = new TimelineLite();

timeline.append(TweenLite.to(TA_mc, 6, {rotation:360}));
timeline.append(TweenLite.to(TA_mc, 6, {x:"600"}));
timeline.append(TweenLite.to(TA_mc, 6, {y:"400"}));
timeline.append(TweenLite.to(TA_mc, 6, {alpha:0}));

 

And how can I use the same above code to use with the TweenMax?

Link to comment
Share on other sites

What is the code to load the TimelineLite library above this code?

Are you asking how to import the TimelineLite class? If so, Zync already did that - import com.greensock.*;

 

Did you want each tween sequenced like that or do you want them all running concurrently? If you want the latter, make sure you use insert() instead of append(). See the video at http://www.greensock.com/timeline-basics/ for getting familiar with it.

 

And how can I use the same above code to use with the TweenMax?

It's as simple as changing "TweenLite" to "TweenMax" in the code. That's it. TweenMax is EXACTLY the same thing as TweenLite except that it automatically activates a bunch of common plugins for you and sets the default overwrite mode to AUTO and adds a few extra features like repeat, yoyo, timeScale, updateTo(), etc. But TweenMax literally extends TweenLite, so technically a TweenMax instance is a TweenLite instance :)

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.
×
×
  • Create New...