SplitTextField – Break Apart Flash TextFields by Character/Word/Line for Easy Animation

Looking for an HTML5 solution? This page pertains to the ActionScript-based Flash tool that breaks apart TextFields, but GreenSock has a newer version that’s built for HTML5 (splitting apart HTML text into <div> elements by character, word, and/or line). Read more here.

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

  1. 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.
  2. 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)
  3. 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.
  4. 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.
  5. 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.
  6. 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) RSS

Posted by Andrea on December 23, 2009

Oh my god guys, this one is amazing. Greensock forever! Best christmas gift ever!

Posted by Luca on December 23, 2009

Thank you thank you thank you!!!!!!!!!!!!!

Posted by Richard Davey on December 23, 2009

Awesome stuff! Made me glad I subscribed (for my second year in a row) :)

Posted by Gareth on December 23, 2009

amazing, thank you!

Posted by Sh Faisal on December 23, 2009

nice work. I really like the effort & I’ll use it in my future projects. :o)

Posted by Greg Dizzia on December 23, 2009

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!

Posted by John Polacek on December 23, 2009

Fantastic!

Posted by Brandon on December 23, 2009

Yea.. Super Thank You, I can use this right away!

Posted by akiro on December 23, 2009

good job, thank you :)

Posted by Seth on December 23, 2009

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!

Posted by dVyper on December 23, 2009

Well done and truly excellent :)

Posted by nitech on December 23, 2009

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 ;)

Posted by Josh on December 23, 2009

Thanks again Jack. Great work!

Posted by Jeff on December 23, 2009

Oh man this looks like fun. Thanks!

Posted by leef on December 28, 2009

I’ll have to think of this next time I need a subtle textfield transition

Posted by Benjamin on December 29, 2009

What a great Christmas present! Thank you!!

Posted by Matt Blubaugh on January 14, 2010

This is outstanding — excellent work, Jack.

Posted by MIkael Eng on January 26, 2010

Thanks for all your great work! It’s AWESOME!!

Posted by Justin on January 28, 2010

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!

Posted by Jk_ on June 9, 2010

You can’t stop produce great tool, can you?

It’s amazing.

Posted by varvery on September 3, 2010

why AS3 only??

Posted by Jack on September 4, 2010

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.

Posted by Martin on September 24, 2010

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

Posted by Jack on September 25, 2010

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.

Posted by roy on December 16, 2010

Is there any solution for TLF type ?

Posted by Jack on December 16, 2010

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).

Posted by Daniel on January 14, 2011

Hi jack, i have a question about this, is it possible to add a split text field into a timelineLite/Max?

Posted by Jack on January 14, 2011

Absolutely, Daniel, you can put tweens of a SplitTextField into a TimelineLite/Max.

Posted by Ash on August 16, 2011

This is awesome but where can i get it? Its not included in the current version of tweenmax

Posted by Jack on August 16, 2011

Ash, SplitTextField is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). You can sign up at http://www.greensock.com/club/

Posted by Mickus on October 17, 2011

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.

Posted by Jack on October 17, 2011

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.

Posted by dlbagh on November 16, 2011

TLF type of TextFields ? is any update coming for tlf text fields?

Posted by Jack on November 16, 2011

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.

To download the code, you must agree to the following license:

"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT
-----------------------------------------------------------------------------
PLAIN ENGLISH SUMMARY:

  1. You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See http://www.greensock.com/club/ for details.
  2. Use at your own risk. No warranties are offered.
  3. Please respect the copyright.

-----------------------------------------------------------------------------

LEGALESE:

This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc. ("GREENSOCK") for the proprietary GreenSock code known as TweenLite, TweenMax, TweenNano, TimelineLite, TimelineMax, and other copyrighted code that is available for download at http://www.greensock.com (this code and documentation, as well as any updates which may at GREENSOCK's sole discretion be provided to you from time to time, are referred to in this Agreement as "PROGRAM"). By downloading, copying, or otherwise using the PROGRAM, you agree to the terms and conditions of this Agreement. If you do not agree to the terms and conditions of this Agreement, please do not download or use the PROGRAM.

I. LICENSE
A. Subject to the terms and conditions of this Agreement, GREENSOCK hereby grants you a non-exclusive, worldwide, non-transferable right to use the PROGRAM in apps, web sites, games, components and other software applications ("Developed Works") for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed Developed Work for which end users are charged a fee (either for usage or access), simply sign up for the appropriate "Business Green" Club GreenSock membership at http://www.greensock.com/club/.

II. LIMITATION OF LICENSE AND RESTRICTIONS
A. You agree that you will not sell, rent, or license the PROGRAM's source code or any derivative works thereof to any third party without the prior written consent of GREENSOCK. Distribution of the PROGRAM as part of your Developed Work is acceptable so long as it is used exclusively as a part of your Developed Work. You agree not to modify or delete GREENSOCK'S existing copyright notices located in the source code.

B. You may use, duplicate, and distribute the compiled object code as embedded in Developed Works created by you, either for your own use or for distribution to a third party so long as end users of the Developed Work are not charged a fee for usage of or access to any portion of the Developed Work. Please see http://www.greensock.com/licensing/ for descriptions of Developed Works that qualify for the "No Charge" license.

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

III. CONSIDERATION
A. The license rights granted to you under this Agreement are at no charge, but only in the following circumstances: If on your own behalf or on behalf of a third party you incorporate the PROGRAM into a web site, app, game, program or any component thereof (collectively, "Developed Work"), which in the case of a web site, must be accessible to internet users without payment of a fee of any kind, and in the case of a software application, game, program or component, neither you nor anyone to whom you distribute the Developed Work charges a user a fee of any kind to use such Developed Work or application, game, program or component into which such Developed Work is embedded. The foregoing shall apply regardless of whether you are paid to create such Developed Work.

B. In the event your intended use of the PROGRAM does not meet the criteria for the "no charge" license rights set forth in the immediately preceding paragraph, then you are not licensed to use the PROGRAM under this Agreement and must license the PROGRAM under GREENSOCK'S separate fee-based Software License Agreement which is granted to "Business Green" Club GreenSock members (see http://www.greensock.com/club/ for details).

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

IV. TITLE AND OWNERSHIP
A. The PROGRAM is licensed, not sold, and is protected by copyright laws and international treaty provisions. You acknowledge that no title to the intellectual property in the PROGRAM is transferred to you. You further acknowledge that title and full ownership rights to the PROGRAM, including all intellectual property rights therein, will remain the exclusive property of GREENSOCK and you will not acquire any rights to the PROGRAM except as expressly set forth in this Agreement. You agree that any copies of the PROGRAM you make will contain the same proprietary notices which appear on and in the PROGRAM. You agree that GREENSOCK may identify you as a licensee unless you make a written request otherwise. GREENSOCK hereby grants to you the right to disclose that your product, game, software application, component, or other Developed Work makes use of GREENSOCK code (for example, "Powered by TweenLite").

V. DISCLAIMER OF WARRANTY AND LIMITATION OF LIABILITY
A. THE PROGRAM IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. GREENSOCK DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE PROGRAM WILL MEET YOUR REQUIREMENTS OR THAT OPERATION WILL BE UNINTERRUPTED OR ERROR FREE. GREENSOCK shall not be liable for special, indirect, incidental, or consequential damages with respect to any claim on account of or arising from this Agreement or use of the PROGRAM, even if GREENSOCK has been or is hereafter advised of the possibility of such damages. Because some states do not allow certain exclusions or limitations on implied warranties or of liability for consequential or incidental damages, the above exclusions may not apply to you. In no event, however, will GREENSOCK be liable to you, under any theory of recovery, in an amount in excess of $250. Notwithstanding anything else in this agreement, you agree to indemnify GREENSOCK, its assignees, and licensees, and hold each of them harmless from and against any and all claims, losses, damages, and expenses, including legal fees arising out of or resulting from any negligent act or omission by you.

B. GREENSOCK may, at its sole discretion, provide support services related to the PROGRAM, but has no obligation to do so.

VI. TERMINATION
If you at any time fail to abide by the terms of this Agreement, GREENSOCK shall have the right to immediately terminate the license granted herein and pursue any other legal or equitable remedies available.

VII. MISCELLANEOUS
A. This Agreement shall be construed in accordance with the laws of the State of Illinois. In the event of any dispute between you and GREENSOCK with respect to this Agreement, we both agree that if we cannot resolve the dispute in good faith discussion, either of us may submit the dispute for resolution to arbitration with the American Arbitration Association before a single arbitrator using the AAA Rules for Commercial Arbitration. The arbitrator's decision is final and can be enforced in any court with jurisdiction over such matters.

B. This agreement represents the complete and exclusive statement of the agreement between GREENSOCK and you and supersedes all prior agreements, proposals, representations and other communications, verbal or written, between them with respect to use of the program. This agreement may be modified only with the mutual written approval of authorized representatives of the parties.

C. The terms and conditions of this Agreement shall prevail notwithstanding any different, conflicting, or additional terms or conditions which may appear in any purchase order or other document submitted by you. You agree that such additional or inconsistent terms are deemed rejected by GREENSOCK.

D. GREENSOCK and you agree that any xerographically or electronically reproduced copy of this Agreement shall have the same legal force and effect as any copy bearing original signatures of the parties.

Copyright 2006-2013, GreenSock, Inc. Updated 2012-08-28

I'd like to learn how to get bonus plugins, update notifications, SVN access, and more.
To continue, you must agree to the following license: