- GSAP (Animation Platform)
- Getting started
- Docs
- Cage match: jQuery | CSS3
SplitTextField – Break Apart TextFields by Character/Word/Line for Easy Animation
- Version: 0.631, Updated 2011-02-15
- File size added to compressed SWF: less than 2kb
Description
What if you could take the existing text in a TextField and dynamically break it apart into individual TextFields for each character, word, or line so that you could animate them separately? Maybe your goal is to explode the characters apart or have words fall into place while fading in or blur sequentially. There are lots of great tools out there for creating interesting text effects but maybe you don’t want an all-in-one solution with a new interface or API to learn. Maybe you’re comfortable with the GreenSock Tweening Platform and you want to control all the animation yourself and minimize file size. That was the idea behind SplitTextField. It isn’t meant to be a text effects engine – it simply breaks apart a TextField instance and swaps itself (a Sprite) into place where the original TextField was in the display list, retaining the same scale/position/rotation so things appear relatively seamless. The SplitTextField has a “textFields” property which is an Array containing all the child TextFields it created (one for each character, word, or line based on the splitType property). Then you can animate to your heart’s content.
Interactive demo
Getting started
Carl Schooff did a great video tutorial here.
Documentation
View ASDoc documentation here.
Sample AS3 code
import com.greensock.text.SplitTextField;
import com.greensock.TweenMax;
import com.greensock.easing.Elastic;
import com.greensock.plugins.*;
import flash.geom.Point;
//split myTextField1 by characters (the default type of split)
var stf1:SplitTextField = new SplitTextField(myTextField1);
//tween each character down from 100 pixels above while fading in, and offset the start times by 0.05 seconds
TweenMax.allFrom(stf1.textFields, 1, {y:"-100", autoAlpha:0, ease:Elastic.easeOut}, 0.05);
//split myTextField2 by words
var stf2:SplitTextField = new SplitTextField(myTextField2, SplitTextField.TYPE_WORDS);
//explode the words outward using the physics2D feature of TweenLite/Max
TweenPlugin.activate([Physics2DPlugin]);
var i:int = stf2.textFields.length;
var explodeOrigin:Point = new Point(stf2.width * 0.4, stf2.height + 100);
while (i--) {
var angle:Number = Math.atan2(stf2.textFields[i].y - explodeOrigin.y, stf2.textFields[i].x - explodeOrigin.x) * 180 / Math.PI;
TweenMax.to(stf2.textFields[i], 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()});
}
//split myTextField3 by lines
var stf3:SplitTextField = new SplitTextField(myTextField3, SplitTextField.TYPE_LINES);
//slide each line in from the right, fading it in over 1 second and staggering the start times by 0.5 seconds. Then swap the original TextField back in.
TweenMax.allFrom(stf3.textFields, 1, {x:"200", autoAlpha:0, onComplete:stf3.deactivate}, 0.5);
Notes / Limitations
- Does not recognize “Auto kern” feature in Flash, nor can it accommodate justified text or the new TLF type of TextFields in CS5.
- Positioning may be incorrect when non-standard anti-aliasing is used (like “anti-alias for readability”). Even with standard anti-aliasing, depending on the specific font you use positioning may be slightly off.
- Does not work with htmlText
- To improve performance, mouseChildren is set to false by default (you’re welcome to set it to true if you need the TextFields to receive MouseEvents)
- To avoid some bugs in the way Flash renders TextFields, when creating TextField instances dynamically make sure you set the various properties of the TextField BEFORE adding the actual text. For example, set the width, height, embedFonts, autoSize, multiline, and other properties before setting the text property.
- Flex users should use FlexSplitTextField instead which extends UIComponent
- SplitTextField and FlexSplitTextField are membership benefits of Club GreenSock (“Shockingly Green” and corporate members only).
Tips
- It’s usually best to embed your font in the TextField. It’s not mandatory, but you won’t be able to have smooth, anti-aliased text or use alpha effects without it (this is a Flash Player limitation, not SplitTextField).
- You can swap the original TextField back into place anytime by calling deactivate(). destroy() has the same effect but it also clears all the TextFields in the “textFields” array and eliminates the reference to the source TextField, making it eligible for garbage collection. So if you want to tween the TextField into place, you could use the last tween’s onComplete to call destroy() or deactivate().
- You can optionally offset the SplitTextField’s registration point by a certain number of pixels on its local x- or y-axis which can be useful if, for example, you want to be able to scale the whole SplitTextField from its center instead of its upper left corner. Use the regOffsetX and regOffsetY parameters/properties to do this.
- To easily animate characters/words/lines into place, use TweenMax.allFrom() with the SplitTextField’s “textFields” property like TweenMax.allFrom(mySTF.textFields, 1, {y:”-100″, autoAlpha:0, ease:Elastic.easeOut}, 0.05);
FAQ
- Where do I get SplitTextField? It’s not in the tween platform downloads.
SplitTextField is a membership benefit of Club GreenSock (“Shockingly Green” and corporate members only). It’s a way I say “thanks” to those who support the project. You can sign up for Club GreenSock here. - Is there an AS2 version of SplitTextField? If not, are there plans to create one?
No. Sorry, AS3 only. (and there are no plans to create an AS2 version) - My animated text looks ugly and won’t fade properly – what’s the problem?
You probably just forgot to embed the fonts in the TextField. This isn’t a SplitTextField requirement at all – it’s just that Flash won’t allow transparency effects or anti-aliasing unless the fonts are embedded in the TextField. - Does SplitTextField alter my original source TextField? What happens to it?
No, the source TextField remains completely untouched except that it is removed from the display list. You can swap it back in using the deactivate() or destroy() methods of SplitTextField and you can reference it via the “source” property. - Does SplitTextField work in Flex?
Yes and no. It is pure AS3 and can work in Flex on regular TextFields, but most Flex users work with components like Label, Text, and TextArea instead. FlexSplitTextField attempts to accommodate Flex components by automatically looping through the UIComponent’s children to find a TextField and work its magic there. So FlexSplitTextField is intended for use in Flex, although not all Flex components are guaranteed to work perfectly with it. - Does SplitTextField eliminate the need for high-end text effects components like FlashEff?
Absolutely not. SplitTextField doesn’t have prebuilt animation effects or a fancy user interface. Tools like FlashEff are fantastic for quick, high-quality text animations that are easy for even novices to build. In fact, FlashEff uses TweenLite to do its animation.
Need help?
Feel free to post your question on the forums. You’ll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.
Twitter
Facebook
Digg
StumbleUpon
del.icio.us
Yahoo! Buzz
Google Bookmarks
RSS
LinkedIn
Reddit
Comments (34)
Oh my god guys, this one is amazing. Greensock forever! Best christmas gift ever!
Thank you thank you thank you!!!!!!!!!!!!!
Awesome stuff! Made me glad I subscribed (for my second year in a row) 
amazing, thank you!
nice work. I really like the effort & I’ll use it in my future projects. 
)
Jack, absolutely awesome. First the motion blur, now this!! Came right in time to fulfill a client’s wishes. Funny thing is the last thing they wanted was the motion blur right before you released it! You’re some kind of psychic rockstar man!
Fantastic!
Yea.. Super Thank You, I can use this right away!
good job, thank you
Jack, I have thanked you for your great work in the past; you deserve another LOUD thank you from me. This is wonderful.
My most sincere thank you goes to you.
Keep up the great work!
Well done and truly excellent
Wow… I am speechless. You always amaze me, and this time even more. Blessings to you. Take a break and play with your children. Thanks for the SplitTextField toy – we’ll enjoy 
Thanks again Jack. Great work!
Oh man this looks like fun. Thanks!
I’ll have to think of this next time I need a subtle textfield transition
What a great Christmas present! Thank you!!
This is outstanding — excellent work, Jack.
Thanks for all your great work! It’s AWESOME!!
Great work! If I wasn’t recently laid off then I would definitely buy a membership. So I just build my own class that’s pretty similar, but probably not as feature rich as yours. Thanks for inspiring me to learn more AS3 though. I’ve been a web developer for years, but pretty much avoided flash all together. I always found AS a little unintuitive, and confusing especially when the switch from AS2 to AS3 was made.
Thank you for all your hard work, your tweening classes are simply amazing!
You can’t stop produce great tool, can you?
It’s amazing.
why AS3 only??
I didn’t create SplitTextField in AS2 for several reasons:
1) AS2 is a dying language. The majority of development these days is in AS3. I almost never work in AS2 anymore except to keep the tweening platform and the AS2 version of TransformManager updated.
2) Some of the techniques employed in SplitTextField simply aren’t available in AS2. It would be virtually impossible.
3) I try hard to actively support the code I share with the community (see the forums), so I need to be careful about not flooding too much out there because everything costs time and effort. An AS2 version of SplitTextField would not only be a headache to produce but I really don’t want to be tasked with the chore of maintaining feature parity with the AS3 version. I’m pretty sure that about 80%-95% of the downloads would be AS3 anyway, so it just doesn’t seem worth all the hassle. My time would be better spent innovating in other areas and supporting the tweening classes, LoaderMax, etc.
I could once again continue to be a greensock member for this extra feature! It seems to be great.
BUT, it can not be used on static texts? because they are accessible through getChildAt as you know.
BUT, you can not have any formatting in it? nor color or different fonts etc? not even in a static textfield/or dynamic – usting textformat etc?
If yes on both, or on second, then this is a must buy.. otherwise I will have static textfields for the messages – since they dont have to be dynamic textfields in this case.. but then I have to manually make movieclips of them and so on ;(
// Martin
Yes, Martin, SplitTextField can indeed work on static TextFields as long as you set the little “selectable text” option to true in the properties palette in the Flash IDE. And, yes, it respects your formatting too. I just tested it with a single static TextField that had various colors and mixed fonts as well.
Is there any solution for TLF type ?
Sorry, Roy, but TLF is quite a different beast and I don’t have plans to create a SplitTextField class for TLF in the near future (not to say it’ll never happen).
Hi jack, i have a question about this, is it possible to add a split text field into a timelineLite/Max?
Absolutely, Daniel, you can put tweens of a SplitTextField into a TimelineLite/Max.
This is awesome but where can i get it? Its not included in the current version of tweenmax
Ash, SplitTextField is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). You can sign up at http://www.greensock.com/club/
Hi, if the textfield has non standard letter and line spacing will it still split it into vectors correctly. I’m purchasing it to accomodate a typography project and as such the letter characteristics need to be converted accurately.
Yes, Mickus, it does appear to work with various letter and line spacing values although I can’t guarantee that it works flawlessly for every font. Flash has a few quirks when it comes to text. But again, from my tests it seemed to work great. And to clarify, it doesn’t create vectors. SplitTextField just splits a TextField into smaller TextFields.
TLF type of TextFields ? is any update coming for tlf text fields?
No, sorry dlbagh, there aren’t plans for a TLF version at this point. There hasn’t been much interest expressed in that, but there are a few other tools that a lot of people are asking for, so I’m trying to leverage my time as best as possible to serve the greatest portion of the community.
Download zip 
github 
CDN link