Jump to content
Search Community

Explanation of more advanced TweenMax features

GreenSock test
Moderator Tag

Recommended Posts

I received an e-mail today asking for clarification on 7 different features in TweenMax, so I figured I'd post the answers here in case it's helpful to others...

 

1. Orient to bezier: “The orientToBezier property should be an Array containing one Array for each set of these values.”

How should I type that in an actual tween? (With all the values: x, y, rotation, added degrees)

 

This is a little tricky to understand at first. Keep in mind that I built this feature to be flexible enough to accommodate a lot of different uses including 3D Bezier paths. Basically, in order to figure out a rotational value, it needs 4 pieces of information: coordinate A, coordinate B, the rotational property to affect, and an angle offset. Let's take a simple example in 2D space to begin with:

 

orient-to-bezier-1.gif

 

In this example, each point has an "x" coordinate and a "y" coordinate which are used to determine the angle between them. That angle needs to affect a particular property of your tweening object. In a typical situation with a tweening MovieClip/Sprite/DisplayObject, that property will be named "rotation" (or "_rotation" in AS2). But what if you want your MovieClip oriented so that its top was always pointing into the direction of the Bezier instead of its side? That's what the angle offset is for. TweenMax always adds this value to the rotation, so in our case, we'd want it to add "90" (90 degrees). To feed those pieces of information into TweenMax's orientToBezier special property, it would look like this:

 

AS3: [["x", "y", "rotation", 90]]
AS2: [["_x", "_y", "_rotation", 90]]

 

Keep in mind that if you're going to use the standard values with no angle offset, you can simply pass in a Boolean value of true and TweenMax will set up the Array for you.

 

But what if you're tweening in 3D and you have 3 different rotational properties to affect ("localRotationX", "localRotationY", and "localRotationZ")? No problem. That's why the orientToBezier special property accepts an Array of Arrays, so you can do any number of rotational properties. For example, you might do:

 

orientToBezier:[["x", "y", "localRotationZ", 0], ["z", "x", "localRotationY", 0], ["z", "y", "localRotationX", 0]]

 

NOTE: As of 6/25/08, Papervision 3D appears to apply the rotationX, rotationY, and rotationZ properties according to the world coordinates instead of the object's local coordinates which prevents this 3D implementation of orientToBezier from functioning properly.

 

Again, this feature was built so that it could accommodate many different scenarios and custom property names, etc. You're not locked into only using "x", "y", and "rotation".

 

2. HexColors: “It must be an OBJECT with properties named the same as your object's hex color properties.”

I just could not figure out how this property is tweened, so it would be great if you gave little example...

 

Let's say you have a "CustomButton" class that creates buttons with a fill color and an outline color (get/set with fillColor and outlineColor properties). How will you tween those colors? It's simple with TweenMax's hexColors special property. Here's a quick example:

 

var myButton:CustomButton = new CustomButton();
TweenMax.to(myButton, 2, {hexColors:{fillColor:0xFF0000, outlineColor:0x00FF00}, ease:Strong.easeOut});

 

Basically, you wrap all your hex color properties into one "hexColors" Object and TweenMax takes care of the rest.

 

3. onStartParams: What is the benefits of passing in parameters – when is it useful?

 

Let's say you set up a bunch of tweens that are sequenced one after the other and you want a particular function to run as soon as the 3rd tween begins. That's what onStart is for, and onStartParams just gives you a way to pass parameters to the onStart function.

 

4. onUpdate: Having trouble figuring out this one, can you please give an example of its use? (Including some parameters would be great)

 

Let's say you're tweening values in a MovieClip's transform.matrix. Flash requires you to re-apply that matrix in order to see the changes. So you could do something like this:

 

var myMatrix:Matrix = myClip.transform.matrix;
TweenMax.to(myMatrix, 2, {a:2.5, b:0.5, onUpdate:applyMatrix, onUpdateParams:[myClip, myMatrix]});
function applyMatrix($clip:DisplayObject, $matrix:Matrix):void {
    $clip.transform.matrix = $matrix;
}

 

Basically, onUpdate runs every time the values are updated inside the tween (on every frame).

 

6. colorMatrixFiler: What is the purpose of the matrix and relative properties, and how to pass them into the tween?

 

The "matrix" property just gives you a way to pass in a particular matrix to tween to (or from). For example, let's say you play with the saturation, brightness, and other sliders in the Flash IDE and want to match that EXACT effect using TweenMax. Maybe you have a button that applies different filter settings, but you want a way to get back to that original effect that you created in the Flash IDE. You can do it by looping through the filters, finding the ColorMatrixFilter on your clip, and grabbing its matrix property and then pass that into TweenMax anytime you want to get back to the original values.

 

The "relative" property can come in handy when you want to apply an effect relative to where it's at now. For example, let's say your clip already has a ColorMatrixFilter effect that's making it very saturated and you want to make it darker by tweening to a brightness value of 0.5. If you just tween to brightness:0.5, it will lose the saturation effect that you had applied. But if you set relative:true, the effects kinda stack on top of each other.

 

7. Multiple targets: Not a direct TweenMax question, but how is it possible to set a porperty of various movieclips at once?

Lets say you have an array of movieclips, and you want to set the x.property of all clips in one call – something like this?

var myClips:Array = [myClip1, myClip2, myClip3, myClip4];

myClips.x = 100;

 

If you're asking how to tween a bunch of clips to a common set of values, that's precisely what the TweenGroup.allTo() and TweenGroup.allFrom() methods are for (which got moved to TweenMax.allTo() and TweenMax.allFrom() in v11). To accomplish your example, you could do:

 

v10:

TweenGroup.allTo([myClip1, myClip2, myClip3, myClip4], 2, {x:100}, TweenLite);

 

v11:

TweenMax.allTo([myClip1, myClip2, myClip3, myClip4], 2, {x:100});

 

There is also a VERY handy feature named "stagger" that allows you to stagger the effect easily. If you set stagger to 0.1, that would cause myClip1 to start it's 2-second tween first, then 0.1 seconds after that, myClip2 would begin, then 0.1 seconds after that, myClip3 would start, etc. I really like using the TweenGroup.allFrom() (or TweenMax.allFrom() in v11) with stagger to have stuff fly into place on the screen during intros.

 

I sure hope that clears things up for you (and others). Let me know if you need any more clarification.

 

Jack

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

The "Multiple targets" explanation was excactly what I was looking for :)

Had a love affair with fuse, but TweenMax has marriage potential.

 

This code works for me:

 

1 . Scaling sprite PImage01 up and at the same time calling function Alpha to alpha down an array of sprites to 0.5.

2 . Scaling sprite PImage01 down and at the same time calling the same function Alpha to alpha an array of sprites back up to 1.

 

function Alpha(Avalue:Number,Aid:String) {

 

var A:Array;

if (Aid == "A1") A = new Array(PImage02,PImage03,PImage04,PImage05,PImage06,PImage07,PImage08);

 

TweenMax.allTo(A, Number(1.0), { alpha:Number(Avalue), ease:Quadratic.easeIn, overwrite:false });

}

 

var D:Number = 0;

 

TweenMax.to(PImage01, 1.0, { delay: D, scaleX:1.2, scaleY:1.2, ease:Quadratic.easeInOut, overwrite:false, onStart:Alpha, onStartParams:[0.5,"A1"] });

TweenMax.to(PImage01, 1.0, { delay: D+=4, scaleX:1.0, scaleY:1.0, ease:Quadratic.easeInOut, overwrite:false, onStart:Alpha, onStartParams:[1,"A1"] });

 

thank U TweenMax. Hippiesvin

Link to comment
Share on other sites

  • 2 months later...

Cool I thought TweenMax.allTo() was depreciated and was going to be killed off, so I havn't tried to use it. If you keep it, then I could put like 2 TweenMax.allTo tweens into a TweenGroup set that loops, and save myself the pain of having several looping Tween groups that work on different clips but do that same thing. All of my clips could be in an array for each step in the TweenGroup. nice going to have to play with this. :) hope you reconsider depreciating these.

 

LOVE THIS STUFF! keep up the great work. :)

Link to comment
Share on other sites

Cool I thought TweenMax.allTo() was depreciated and was going to be killed off, so I havn't tried to use it.

 

You're right. This post was old (and I updated it now). TweenMax.allTo() has been replaced with TweenGroup.allTo() and trust me, it's an improvement. You don't lose anything - you're actually gaining capabilities because TweenGroups are much more powerful and flexible.

 

If you want your two TweenGroup.allTo() results in one group, it should be as simple as using the mergeGroup() method in TweenGroup.

 

Seriously, once you get the hang of how TweenGroups work, you'll love the power it gives you.

Link to comment
Share on other sites

  • 2 years later...
  • 2 weeks later...
  • 8 months later...
  • 4 weeks later...

Hello Jack, I'm looking for a way to rotate movieclips based on local, rather than global coordinates.

I'm aware that the examples you gave in this post were about Papervision 3D, but I'm wondering if you have implemented any such functionality in your framework since flash now has 3D coordinate space

Link to comment
Share on other sites

Hello Jack, I'm looking for a way to rotate movieclips based on local, rather than global coordinates.

I'm aware that the examples you gave in this post were about Papervision 3D, but I'm wondering if you have implemented any such functionality in your framework since flash now has 3D coordinate space

If I understand your question correctly, yes, the TweenProxy3D class that comes with all "Really Green" and up memberships allows you to set a registration point dynamically (either locally or in its parent's coordinate space) around which transformations occur.

Link to comment
Share on other sites

well, not quite.

for example, using this demo http://hulting.homedns.org/takers_us/li ... D_Demo.swf

if you first tween rotationX to 90, and then rotationZ to 90, it will rotate the movieclip clockwise in the screen, pointing up and down.

The correct behaviour for local coordinate (not parent/child coordinate) would be for the image to remain a horizontal sliver and rotate around it's new Z axis, which now points "up and down"

 

I've been able to achieve the rotation in the local axis, but as you can see by the code, it's far from an elegant solution and having relative values does not help a bit for what I need.

I was hoping you would have something like this somewhere.

 

var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xff0000);
mc.graphics.drawRect(-stage.stageWidth*.25,-stage.stageHeight*.25,stage.stageWidth*.5,stage.stageHeight*.5);
mc.graphics.endFill();
mc.x=stage.stageWidth*.5;
mc.y=stage.stageHeight*.5;
mc.z=0;
addChild(mc);


//rotationGlobal(80); rotationGlobal(0,0,45); //Uncomment this for Global rotation
//rotationLocal(80); rotationLocal(0,0,45); //Uncomment this for Local rotation

function rotationGlobal(x:int=0, y:int=0, z:int=0):void{ //Absolute Values
if (x) mc.rotationX=x;
if (y) mc.rotationZ=y;
if (z) mc.rotationZ=z;
}

function rotationLocal(x:int=0, y:int=0, z:int=0):void{ //Relative values
var raw:Vector. = mc.transform.matrix3D.rawData;
var right:Vector3D = new Vector3D(raw[0], raw[1], raw[2]);
var up:Vector3D = new Vector3D(raw[4], raw[5], raw[6]);
var out:Vector3D = new Vector3D(raw[8], raw[9], raw[10]);
var pivot:Vector3D = new Vector3D(mc.x, mc.y, mc.z);

mc.transform.matrix3D.appendRotation(x, right, pivot);
mc.transform.matrix3D.appendRotation(y, up, pivot);
mc.transform.matrix3D.appendRotation(z, out, pivot);

}

Link to comment
Share on other sites

Nope, sorry. I seem to remember trying to tackle this years ago when I actually even built my own little 3D engine and after MANY hours and consulting with some 3D math gurus, I was advised to give up because what I was trying to do was impossible. I still have a hard time believing it's impossible, but at the time I couldn't find any way to do it reliably that would allow me to do rotations on all the axis in a local fashion.

Link to comment
Share on other sites

  • 1 month later...

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...