fake 3D spin

[booglebop]

I'm attempting to create an animation that transforms the symbols around it's centerpoint in z-space, faking the appearance that it's spinning. Right now I'm trying to use the transform manager and using the following code:

 

researchIntroAnim.insert(TweenMax.from(dollarSign, 0.25, {scaleX:0, scaleY:0, delay:1, transformMatrix:{skewY:-180}, ease:Back.easeOut}));

 

This gets me half the "rotation" i'm looking for. Is there some way to repeat or yoyo this so that it appears to go all the way around? My goal is to have it spin 2-3 times and then stop. Note that this "spin" animation i'm looking for is part of a much longer timeline (researchIntroAnim) so it would need to somehow fit into a larger timeline as apposed to having it as it's own independent animation. I tried to create a separate timeline for just the spin and then nest that timeline inside the researchIntroAnim timeline but I wasn't able to figure out how it would work. I'm on a deadline so your help is greatly appreciated. Thanks and great work on a great product.

[GreenSock]

If you want to apply the easing across the whole animation (a series of several spins), you could create a repeated and yoyo'd TweenMax with a linear ease, pause it, and then tween that tween's totalTime value with whatever ease you want. Once you grasp the concept of tweening another tween, it's kinda cool and it opens up some new possibilities

 

TweenPlugin.activate([TransformMatrixPlugin]);

var cycles:uint = 3;
var spinDuration:Number = 2;
var tween:TweenMax = TweenMax.from(dollarSign, spinDuration * 0.5, {transformMatrix:{skewY:-180}, paused:true, repeat:cycles * 2 + 1, yoyo:true, ease:Linear.easeNone});
TweenLite.to(tween, cycles * spinDuration, {totalTime:tween.totalDuration - spinDuration, ease:Back.easeOut});

[booglebop]

awesome! exactly what i was looking for. is there a way to set this up for multiple objects. ie: set all the specifics and then be able to easily call on it later whenever i need it, for any movieClip in a timeline sequence? again, i'm new to AS so i kinda need it pretty much spelled out. thanks!

[booglebop]

I've the spin working (via your code) but I'd like the "dollarSign" to scale from 0 to 100 while it's spinning. I can't figure out how or where to add this. Here's my attempt at a work around, that in theory I think should work, but it's not. Please advise. Thanks!

var researchIntroAnim:TimelineMax = new TimelineMax();
//dollar sign in
var cycles:uint = 3;
var spinDuration:Number = 1;
var spinTween:TweenMax = TweenMax.from(dollarSign, spinDuration * 0.5, {transformMatrix:{skewY:-180}, paused:true, repeat:cycles * 3 + 1, yoyo:true, ease:Linear.easeNone});
researchIntroAnim.insert(TweenMax.to(spinTween, cycles * spinDuration, {totalTime:spinTween.totalDuration - spinDuration, ease:Back.easeOut}))
researchIntroAnim.insert(TweenMax.from(dollarSign, 1, {delay:0, scaleX:0, scaleY:0, ease:Back.easeOut}));

[GreenSock]

I suppose you could just nest it inside another Sprite so you could tween the scale of the container Sprite while the other animation is happening.

[booglebop]

Sounds like a good idea. In my limited knowledge of actionscript, my attempt is giving me an error:

1067: Implicit coercion of a value of type com.greensock:TimelineMax to an unrelated type flash.display:DisplayObject.

Which I guess makes sense if "researchIntroAnim is not a display object. But then what do I add to the container sprite?

 

var tweenContainer:Sprite = new Sprite();

var researchIntroAnim:TimelineMax = new TimelineMax();
var cycles:uint = 3;
var spinDuration:Number = 1;
var spinTween:TweenMax = TweenMax.from(dollarSign, spinDuration * 0.5, {transformMatrix:{skewY:-180}, paused:true, repeat:cycles * 3 + 1, yoyo:true, ease:Linear.easeNone});
researchIntroAnim.insert(TweenMax.to(spinTween, cycles * spinDuration, {totalTime:spinTween.totalDuration - spinDuration, ease:Back.easeOut}))

tweenContainer.addChild(researchIntroAnim);

TweenMax.from(tweenContainer, 1, {delay:0, scaleX:0, scaleY:0, ease:Back.easeOut});

[GreenSock]

No no, you don't add a TimelineLite to the stage you put dollarSign into a Sprite. Use your original tween on dollarSign and do a new tween of the container Sprite to scale it however you want.

[booglebop]

I guess I'm confused on how to add something to a sprite

[GreenSock]

var mySprite = new Sprite();
mySprite.addChild(myOtherDisplayObject);

[booglebop]

I'm not sure what I'm doing wrong. It seems like whenever I add "dollarSign" to the sprite "tweenContainer" then test movie, the stage is just blank. What am I missing?

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

var tweenContainer = new Sprite();
tweenContainer.addChild(dollarSign);

var researchIntroAnim:TimelineMax = new TimelineMax();
var cycles:uint = 3;
var spinDuration:Number = 1;
var spinTween:TweenMax = TweenMax.from(dollarSign, spinDuration * 0.5, {transformMatrix:{skewY:-180}, paused:true, repeat:cycles * 3 + 1, yoyo:true, ease:Linear.easeNone});
researchIntroAnim.insert(TweenMax.to(spinTween, cycles * spinDuration, {totalTime:spinTween.totalDuration - spinDuration, ease:Back.easeOut}));
researchIntroAnim.insert(TweenMax.to(tweenContainer, 1, {scaleX:50, scaleY:50, ease:Back.easeOut}));

[GreenSock]

You forgot to add tweenContainer to the stage

 

var tweenContainer = new Sprite();
tweenContainer.addChild(dollarSign);
this.addChild(tweenContainer);

[booglebop]

Got it. Thankyou