It is with great pleasure that I reveal to you how easily you can create complex text effects using GreenSock’s SplitTextField class. No longer do you have to manually break apart textfields into individual symbols and manually tween them. SplitTextField does all the heavy lifting for you, behind the scenes. Simply style and position your text how you want in the Flash IDE and use SplitTextField in conjunction with any Greensock Tweening tool to create smoothe and wonderful effects.
Watch the Introduction to SplitTextField Video
SplitTextField will break apart any dynamic textfield into letters, words or lines. Once a textfield is split you can pass a SplitTextField instance’s textfields arrayinto a TweenMax allFrom() or allTo(). Below is some sample code:
var snorkl_stf:SplitTextField = new SplitTextField(snorkl_txt);
TweenMax.allFrom(snorkl_stf.textFields, 0.5, {rotationX:-90, alpha:0}, 0.05);
The above code will create a SplitTextField object called snorkl_stf that will contain all the individual characters/letters of the textfield snorkl_txt. The TweenMax code that follows uses thesnorkl_stf.textfields array as a reference to each individual character.
The following SplitTextField usages show textfields being split into words and liness.
var tag_stf:SplitTextField = new SplitTextField(tag_txt, "words");
TweenMax.allFrom(tag_stf.textFields, .5, {rotationX:120, y:"60", alpha:0, delay:.5}, 0.1);
var features_stf:SplitTextField = new SplitTextField(features_txt, "lines");
TweenMax.allFrom(features_stf.textFields, .8, {x:"200", alpha:0, delay:1.2, ease:Cubic.easeOut}, 0.1);
Important Info
- SplitTextField is a Club Greensock benefit
- Official SplitTextField Documentation
Download Flash CS4 source for both files used in the video
This zip contains ONLY FLASH FLA files. They will only work if you are a Shockingly Green Club Greensock Member and have a copy of the SplitTextField class.
snorkl-splitTextField-sample-files-CS4
Thanks so much for watching!
-Carl
