Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pipsisewah

Proper Way To Use Split Text Field in Timeline

Recommended Posts

Hello,

 

I am having a little trouble with the SplitTextField and need a little direction.

 

I cant find a good way to explain this, so I'm going to describe it bluntly.

 

 

Example:  I have two animations in a timeline, 1 should fade text in, the next should use a splittextfield to fade out by word

 

When I run the animation as a whole, the text appears after the entire animation is complete (once the splittextfield has been disposed)

 

My Theory:  Since I am adding all the animations to a master animation at once, the splittextfield is being created right away and looking at the current state of the textfield.  Since it has an alpha of 0, the splittextfield is created with an alpha of 0 and never shows on the screen.

 

Below is my code of each item:

 

 

// FADE IN

/**Text Fades In From 0 to 1 (Alpha)*/
public static function FadeIn(target:Object, time:Number):TimelineMax{
var t:TimelineMax = new TimelineMax();
TweenMax.set(target,{alpha:0});
t.add(TweenMax.to(target, time, {alpha:1}));
return t;
}

 

// FADE OUT BY WORD

/** Text fades out by word */
public static function FadeOutByWord(target:TextField, time:Number):EnhancedTimelineMax{
var stf:SplitTextField = new SplitTextField(target, "words");
var t:EnhancedTimelineMax = new EnhancedTimelineMax({onComplete:cleanup, onCompleteParams:[stf]});
t.splitTextField = stf;
t.add(TweenMax.staggerTo(stf.textFields, time / 2, {alpha:0}, (time / stf.textFields.length), cleanup, [stf]));
return t;
}

// CLEANUP

/** Cleans up the Split Text Field */
private static function cleanup(mySTF:SplitTextField):void{
mySTF.destroy();
}
 

// TEST PROGRAM

masterTimeline = new TimelineMax();
createTextField("MAKE SOME NOISE!!!!\n GO DIAMONDBACKS!");
masterTimeline.add(StandardAnimations.FadeIn(text,4));
masterTimeline.add(StandardAnimations.FadeOutByWord(text,4));
masterTimeline.play();

 

My Goal:  I would like the text to fade in to an alpha of 1, then I want the fade out function to fade each word using alpha from 1 to 0.  

 

My Question:  If my theory is correct, how do I keep the splittextfield from being created right away?  Please let me know if there is a correct method which I am missing.

 

Thank you very much!

 

 

Link to post
Share on other sites

Hi.

 

Its very difficult to look at 4 chunks of code and imagine how they all work.

If you want to zip up a simple demo (don't include the greensock files) I'll take a look.

 

What I recommend now is just using a staggerFromTo and force the from alpha values to 1 like:

t.add(TweenMax.staggerFromTo(stf.textFields, time / 2, {alpha:1}, {alpha:0}, (time / stf.textFields.length), cleanup, [stf]))

let me know if that works. 

Link to post
Share on other sites

Hello Carl,

 

Thank you very much for taking the time to assist me!

 

Unfortunately, I tried the method you suggested and it did not work.  The text held an alpha of 1 (basically ignored the fadeIn), but the FadeOutByWord worked.  I'm assuming this is what happened:

 

1. Alpha is set to 0 for FadeIn.

2. Alpha is set to 1 for FadeOutByWord

3. FadeIn runs but since alpha is already at 1, nothing happens.

4. FadeOutByWord runs and alpha for each character goes from 1 to 0 as expected.

 

I wrote a separate program as requested detailing this issue.  I have removed the SWC from the program as requested.

This problem includes your suggestion for staggerFromTo.

 

Thanks again for the help, it is really appreciated.

 

 - Steven Lopes

 

 

GreensockHelpExample.zip

Link to post
Share on other sites

Hello Carl,

 

After further research, I'm finding that I cannot have more than one splittextfield on a textfield in a timeline.

 

 

My goal is to be able to animate the same object multiple times within a timeline.  Per the docs, I should be able to call destroy() after using a splittextfield on a textfield and it should remove it from the textfield so the textfield can be resued.

 

Unfortunately, per my previous post and my further research, I may be doing something wrong here.  From what I can tell it seems like the destroy function is not working as I expect.

 

After I call the destroy function, I am able to do operations which do not include a splittextfield( things like rotating the textfield or changing its tint).  If I attempt to apply another splitextfield to that same text, it does not render the effect.

 

My operation looks like the following:

1. create textfield

2. apply splittextfield

3. animate text (onComplete: cleanup, onCompleteParams: splittextfield)

4. cleanup function - this calls destroy() on the splittextfield

5. apply another splittextfield

6. animate text (onComplete: cleanup, onCompleteParams:splittextfield)

7. cleanup function - this again calls destroy() but to the new splittextfield

 

 

I was wondering if I was missing a step in clearing the previous splittextfield or if there was something more I needed to make this work.  I'm still trying things on my end.  Thank you for the assistance, it is really appreciated!

 

 - Steven Lopes

Link to post
Share on other sites

Ok, I think I see the problem now. 

 

Typically I would suggest that if you want to chain text effects on the same text field you should just

 

1: split the text as words, lines, chars

2: do your first animation that fades in the entire text field

3: do your second animation that fades out each word

4: optionally do some other effect on chars or lines

5: clean everything up

 

Doing the above is fairly straight-forward and is no problem

 

However, since you want to clean up after each effect, it throws a bit of a monkey wrench into the works. There is nothing wrong though with wanting to do this, you just have to approach the animation differently.

 

Let me show you exactly where your approach is breaking down:

 

My operation looks like the following:
1. create textfield - fine
2. apply splittextfield - fine
3. animate text (onComplete: cleanup, onCompleteParams: splittextfield) - great
4. cleanup function - this calls destroy() on the splittextfield - great
5. apply another splittextfield // BIG PROBLEM - As soon as you do this you are completely breaking all references the first animation had to its target(s)
6. animate text (onComplete: cleanup, onCompleteParams:splittextfield)
7. cleanup function - this again calls destroy() but to the new splittextfield
 
Even though step 5 comes after the first effect, animation 1 is trying to use a target that you just split apart a different way.
 
Also, for anyone else reading this, since you code creates these effects in this manner:
 
masterTimeline.add(FadeIn(text,4));    //

masterTimeline.add(FadeOutByWord(text,4));
masterTimeline.play();
 
Its important to note the FadeOutByWord(), kills the targets in FadeIn(), because FadeOutByWord() is called AND executed before the animation that is generated by FadeIn() is even played.
 
(FWIW this is a great way to build timelines, but not when you are programmatically creating and destroying the targets of previous animations)
 
 
If you want to keep your very clean approach of destroying SplitText's after each animation AND still create a variety of chained effects in advance you will need to create a new TextField for each effect in addition to a new SplitText instance. 
 
In other words, effect 1 needs its own TextField and its own SplitText, effect 2 needs its own TextField and its own SplitText.
 
This is the only way to have multiple effects using unique SPlitText instances per effect.
 
If you don't want to create new TextFields all the time, the approach would be to make sure that effect1 is complete run and cleaned up BEFORE you create effect 2.
 
Hope this makes sense and will be suitable for your project.
 
Carl
Link to post
Share on other sites

Hello Carl,

 

Thank you very much for taking the time to explain that to me.  I think I understand what you are saying and it just may have worked (more testing will tell).

 

It looks like the solution may be as follows:

 

1. Create a SplitTextField before anything else (which references the textField)

2. Instead of passing the textField to each function and having the function create new SplitTextFields, now I pass the SplitTextField I created at the start

3. Do all the animations I want

4. Cleanup the whole thing (probably call the onComplete of the masterTimeline to now do the cleanup function instead of each individual animation timeline)

 

The only real change in functionality for me would be that users will have to pick how the text will split for all animations.  They cannot have one animation split by word and another split by letter on the same text field.  Honestly, I think people can live with that :)

 

 

Things seem to be clicking better now and reacting more as expected (the FromTo is working with alpha as expected).

 

If I run into any bumps, I will respond here, but for anyone else looking to do this, I think doing all your work off of 1 SplitTextField seems to be the trick.

 

 

Thanks again Carl, this kind of support is rarely seen and greatly appreciated.

Link to post
Share on other sites

Excellent. So glad to hear it is working for you.

Thanks for the kind words and for your support of GreenSock as a customer. 

Link to post
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.

×