Search  
Search Options

SUPER TEXT TRANSITION CLASS

HomeBrowse CategoriesFlashAnimationsText AnimationSuper Text Transition Class

The successor to the ‘Dynamic Text’ files, the Super Text Transition class is easy to use and able to animate your text in any way you can think of! Click through the demo above, but be aware that it is just a tiny sample of what you can do with this class if you have a bit of imagination. All you need to do is something like this

new textTransition(aTextField, {_x:”-50”, _xscale:-100, speed:500, gap:500});

You simply pass a reference to a dynamic text field, pick which properties to use in the transition, choose relative/absolute/function based start and end values, and set the speed of transition and the gap between each letter/word. Use custom easing, set up an onComplete function, reanimate the letters/words to a new location…

Get the Readme Here for a complete idea of how the class works

Zoom, Mirror, Rotate, Move, Alpha, even tint, or apply all at the same time, the possibilities are enormous!

PLEASE NOTE for best results, make sure your textfields antialias is set for animation, not readability. Also, currently, turn off auto-kerning, as the layout engine doesnt take it into account (yet). Justified alignment doesnt work properly either so dont use that (you can use left/right/center fine)

BRAND NEW UPDATE – 6/6/2008 Version 2.1.3 Released

Re-download this class if you got it before then. There have been a load of improvements – Bugfixes, new backwards property added (start the animation from the last letter/word/line), text layout improvements, easing, a new line mode, tint tweening, bold/italic support, and much more! Documentation has been updated also, it’s very extensive now

To-do
  • letter randomiser – choose how many random letters to display during the tween before the correct one appears at the end COMING SOON !
  • true rewind (starts from last item, reverses start and end values, and reverses ease) COMING SOON !
  • fix auto-kerning
  • fix justified align
  • allow for filters
  • allow for an optional ‘letter mc’ so you can make custom animations on a text box in an mc, and the class attach it for each letter

Readme, demo .flas for both MX2004 and Flash 8, and class .as included. Any problems, or perhaps a suggestion? Drop me a line – matthewjumpsoffbuildings at gmail dot com , I’m always interested in feedback

Please be aware that this class is still being developed – any updates will be free to everyone who buys it, but please, if there is a bug, before giving a bad rating, post here and I will fix it straight away.

Posted 3 months ago

The best idea is to email me a .fla so I can sort it out for you. In order to achieve random values – you will need to pass functions that return the correct data type. This may be a little hard to understand at first, but if I can show you within your .fla you should grasp it quickly :)

An example would be

function randomNumber():Number { return Math.ceil(Math.random()100); }

var t:textTransition = new textTransition(yourTextField, {_xscale:randomNumber, _yscale:”_xscale”});

note *_yscale:”_xscale” – this means that _yscale should be the same as the random number returned for _xscale

Posted 28 days ago

sorry stupid textile messed up my code example. email me ;)

Posted 28 days ago

Just bought your class… really amazing and very easy to use.

thanks, walter

Posted 24 days ago

Great to hear man :) And sorry everyone, I’m still really behind with work, havent had time to even look at updating this class yet…I will soon as I can though, promise ;)

Another feature Im thinking of adding is randomOrder – it randomly transitions letters/words/lines in…but again, I need the time free to work on this :(

Posted 24 days ago

Simple wanted to say this class is amazing. This is wonderful work that inspires me. :D

Posted 20 days ago

Thankyou for your comments, much appreciated :)

Posted 19 days ago

Great item! And Mathew is a dream to work with. I’m a total newbie and he helped me put this file to use. Awesome!

Posted 17 days ago

This may be a dumb question, but I have about 12 strings of text that I want to animate, one after another. How can I fade one out and have another begin? I know the delay, but can’t figure out how to make them disappear?

Thanks!

Posted 9 days ago

Well, if you want to fade something out, you can use the reanimte() with the _alpha:[100, 0] property – this will start the transition at _alpha 100 (fully visible), and end it at 0 (invisible). This transition will occur either letter by letter, word by word, or line by line. If you want to remove the movie clip on complete, you can use the onComplete and onCompleteScope properties. Since the textTransition class creates a movie clip with the same name as your original textfield, to remove it you simply need to removeMovieClip(yourTextFieldName), though make sure you pass the right scope (usually this)

If, however, you want to fade out the whole block of text at the same time, you will have to use AS to _alpha out the entire movie clip – this is easy enough, you can use an onEnterFrame or a Tween to _alpha out the textTransition mc, just pass the name of your original textfield.

Posted 9 days ago

sorry, the method is reanimate(), not reanimte()

Posted 9 days ago

Actually if you use reanimate with a really low gap, it will fade out everything really quickly.

something like

t.reanimate({_alpha:0, gap:0, speed:300});

Posted 8 days ago

bah damn smiley – i meant _alpha: 0, _gap: 0

Posted 8 days ago

definitely one of the greatests files from FD ;)
i bought this 10min ago and in a very short time i made it do what i wanted :))) highly recommended people!!

Posted 8 days ago

How can I make the text bulge in size, like a heartbeat, every X seconds?

Thanks!

Posted 2 days ago

@var t:textTransition = new textTransition(yourTextfield, {mode:”word”, speed:300, gap:0, onComplete:grow, onCompleteScope:this});

function shrink(){ t.reanimate({_xscale:100, _yscale:100, onComplete:grow, onCompleteScope:this}); }

function grow(){ t.reanimate({_xscale:120, _yscale:120, delay:2000, onComplete:shrink, onCompleteScope:this}); }@

to change the gap between the pulses, edit the delay in the grow function.

also, try switching between line, word and letter modes for different effect

Posted 2 days ago
var t:textTransition = new textTransition(yourTextfield, {mode:”word”, speed:300, gap:0, onComplete:grow, onCompleteScope:this}); function shrink(){ t.reanimate({_xscale:100, _yscale:100, onComplete:grow, onCompleteScope:this}); } function grow(){ t.reanimate({_xscale:120, _yscale:120, delay:2000, onComplete:shrink, onCompleteScope:this}); }

sorry, textile messed up my code as usual

Posted 2 days ago

dammit, still messed it up. if you have trouble working out this code, email me and i’ll send it to you.

ps i hate this textile rubbish.

Posted 2 days ago

Love this!

I realize you may address this in your notes - but sorry I couldn’t figure it out.

how do I make Example 5-6 reanimate automatically after all the letters appear so instead of onPress…

_root.bg.onPress = function():Void { t.reanimate({_x:”0”, _y:”0”, _rotation:”0”});

what should my code be?

Thanks a ton

Posted 2 days ago

use onComplete.

function rand():String { return String(Math.ceil(Math.random()*200)-100); } var t:textTransition = new textTransition(yourTextfield, {_x:[rand, rand], _y:[rand, rand], _rotation:[rand, rand], ease:Elastic.easeOut, speed:1000, gap:100, onComplete:unscramble, onCompleteScope:this}); // function unscramble():Void { t.reanimate({_x:”0”, _y:”0”, _rotation:”0”}); }

Posted 1 day ago

Pulsing worked great. Thanks!

Posted 1 day ago

automatic reanimation works! thanks so much for the quick response.

Posted 1 day ago

no worries guys, glad to help :)

Posted 1 day ago