Text animation help please

[retropunk]

Hey guys, I have been tasked with doing a simple animation of some text and I've hit a wall. I think I need a break.

 

I am attaching the current example but it's not quite right as you'll see. It doesn't loop properly for one.

I've also attached a screenshot so you can see the ideal effect in context.

 

I have a few ideas of how I can do it but I was hoping to hear from someone here. It's not a groundbreaking effect and I suspect someone here has already done it before. My Flash chops have slipped a little lately.

 

Basically I want to be able to animate the text so it appears to be waving. Similar to text on a flag type banner thats being pulled behind a plane in the sky. See attached image.

 

I could do this on the timeline with MovieClips but a code solution would be way better.

 

I'd appreciate another set of eyes on this. 

 

Thanks everyone

- Patrick

 

Archive.zip

[Carl]

Hey Patrick,

 

Try something like this:

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.text.*;

 

var stf : SplitTextField = new SplitTextField(myText);

 

function tween1():void

{

TweenMax.staggerTo(stf.textFields, 0.6, {y:20, scaleX:0.5, z:-10, rotationY:-40, rotation:-8, repeat:-1, yoyo:true}, 0.03);

}

 

 

tween1();

 

Its not perfect, but if you have it all moving horizontally behind the plane I imagine it will get the point across. 

[retropunk]

AH! Yes I see what you are doing. I've never quite wrapped my head around yoyo for looping stuff.

This is totally workable for the effect I am going for.

Thanks so much Carl...you guys are the best. I wish other forums had your response time. They could learn a lesson from GSAPs methodology

 

btw I bought the GSAP Book from Noble Desktop.

The book is chock full of code goodies!

I am hoping to make the class in December. Still trying to work out the days off.

 

Thanks again

- Patrick

[retropunk]

One more thing

 

Is there a scoping thing I need to check for?

 

The stop function here doesn't work.

var stf : SplitTextField = new SplitTextField(myText, "characters", 5, 5);

btnStart.addEventListener(MouseEvent.CLICK, startHandler);
btnStop.addEventListener(MouseEvent.CLICK, stopHandler);

function startHandler(e:MouseEvent):void
{
	TweenMax.staggerTo(stf.textFields, 0.8, {y:20, scaleX:0.98, z:-60, rotationY:-10, rotation:-4, repeat:-1, yoyo:true, ease:Cubic.easeOut}, 0.03);
}

function stopHandler(e:MouseEvent):void
{
	TweenMax.staggerTo(stf.textFields, 0.3, {y:20, scaleX:1, z:0, rotationY:0, rotation:0, ease:Quad.easeInOut, delay:5}, 0.01);
}

Thanks for the help

- P

[Carl]

Hey Patrick,

 

Thanks for buying the book, and I'm very glad to hear you are getting value out of it. Cheers!

 

I don't think there should be any scoping issues here. 

I dropped your code into my file with a button and it worked fine.

Keep in mind that it will take 5 seconds to see the animation stop because of the delay:5 you have.

[retropunk]

holy #$%!@ batman! looks like it's time for bed. Can't trust my eyes.

not sure how that delay made it in there...too much copy and pasting today

...my bad

 

Thanks Carl. 

Catch u later

[Carl]

no worries! its better that you ask than go crazy for hours;)