Need Help With SplitTextField

[Pipsisewah 2 Likes (Newbie)]

Hello,

 

We purchased the Club membership and received the SplitTextField which honestly is working really really well.

 

I'm having a little problem though.  I am attempting to create a sub-timeline using TimelineMax which animates a SplitTextField.

 

Once I create the timeline in my function, I return the TimelineMax to the parent class which adds it to the main timeline (also a timelineMax).

 

 

 

I have been doing this for all the animations I need and its working just fine.  I can sequence 10 different complex animations without a problem!

 

Here is my issue (and I know it simple, just need a push in the right direction), once the Split Text Field is done, I need it off the screen so the other animations will render.  I tried the onComplete and the onCompleteRender functions and told them to call a cleanup function (which does work), but it looks like it calls the function after the first character of my staggerFrom completes animation.  Basically, what I am seeing is the first character stop, then the SplitTextField is destroyed and the other animations render.  If I do not destroy the SplitTextField, nothing happens after the first animation.

 

 

Below is my general code:

 

// PARENT CLASS //////////////////////////////////////////////////////////////////////////////

 

var t:TimelineMax = new TimelineMax();

 

// Creates an flash.text.textField with general properties including embedded fonts.

createTextField("MAKE SOME NOISE!!!!");

 

//  Add the animation I need which uses the Split Text Field

t.add(AdvancedTextEffects.ScaleandSpinText(text,4));

 

 

//Add more animations which do not use the Split Text Field

t.add(SimpleTextEffects.Flash2(text, 1));

t.add(SimpleTextEffects.ScaleOut(text, 1));

t.add(SimpleTextEffects.Jiggle4(text, 1));

t.add(SimpleTextEffects.SpinClockwise(text, 1));

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

 

 

 

// ADVANCED TEXT EFFECTS CLASS /////////////////////////////////////////////////////////////////

 

public static function ScaleandSpinText(target:TextField, time:int):TimelineMax{

 

// Create Sub-Timeline

  var t:TimelineMax = new TimelineMax();

 

// Activate Plugins

  TweenPlugin.activate([TransformAroundCenterPlugin, AutoAlphaPlugin, OnCompleteRenderPlugin]);

 

// Create the SplitTextField

  var mySTF:SplitTextField = new SplitTextField(target);

 

// Add the Tween we want

  t.add(TweenMax.staggerFrom(mySTF.textFields, 3, {transformAroundCenter:{scale:5, rotation:360}, alpha:0, autoAlpha:1, ease:Power4.ease-Out, onCompleteRender:cleanup, onCompleteRenderParams:[mySTF]},0.2));

 

// Return the Timeline

  return t;

}

 

 

private static function cleanup(mySTF:SplitTextField):void{

mySTF.destroy();

}

 

 

 

Please let me know what you think and how to get around this.

 

Thank you!

 

 - Steven Lopes

 

 

 

[Carl 9,066 Likes (Superhero)]

Yup, you just need a little nudge;)

 

When you put onComplete in the vars object of the staggerFrom() method, that function runs after every tween that gets created for every item in mySTF.textFields. If you want to run a function after all the letters animate you need to provide a function to the completeAll parameter of staggerFrom()

 

here is the method signature for TweenMax.staggerFrom()

 

public static function staggerFrom(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array

 

It is the 5th parameter, notice it is outside the vars object

 

Here is what you need to do

// Add the Tween we want
 t.add(TweenMax.staggerFrom(mySTF.textFields, 3, {transformAroundCenter:{scale:5, rotation:360}, alpha:0, autoAlpha:1, ease:Power4.ease-Out},0.2, cleanUp, [mySTF]));

However, instead of using add() to add a TweenMax.staggerFrom(), you can just use TimelineLite.staggerFrom() (in v12)

t.staggerFrom(mySTF.textFields, 3, {transformAroundCenter:{scale:5, rotation:360}, alpha:0, autoAlpha:1, ease:Power4.ease-Out}, 0.2, "+=0", cleanUp, [mySTF]);

Read Flash docs for TimelineLite.staggerFrom() http://greensock.com/asdocs/com/greensock/TimelineLite.html#staggerFrom()

 

Also, for JavaScript we have a cool demo showing how TimelineLite.staggerTo() works with onComplete property in the vars and onCompleteAll param of the staggerTo() method. It works exactly the same way in ActionScript

 

http://codepen.io/GreenSock/pen/Eoedn?editors=001

 

Let us know if this fixes it

[Pipsisewah 2 Likes (Newbie)]

Hello Carl,

 

That did the trick!  Thank you very much for your fast response and your detailed explanation.  

 

That is amazing customer service and it is really appreciated!

 

 

 

Have a great day!

 

 - Steven Lopes