TextAnimation

September 20, 2007 at 11:48 pm · Filed under AS3

I just created a class to animate texts in AS3. Animations such as group94 or yugop

I’m using Robert Penner’s easing equations, so it’s really easy to customize the animations.

Here’s an example.

[code lang="actionscript"]
TextAnimation.animate("Welcome to labs.hellokeita.com", "Welcome to labs.hellokeita.com", {
textField: tField,
textFormat: tFormat,
step: 4,
time: 3,
delay: 1,
characters: "0123456789-#",
transition: "easeInOutCubic"
});
[/code]

So, as you see, I can set the transition equation, time and delay, also the random character set that will be used.
The Step
parameter is the number of times that the random character will appear before it shows the right character.

You can also use HTML font tags and /n NewLine Characters as bellow.

[code lang="actionscript"]
TextAnimation.animate("Welcome to labs.hellokeita.com", "Welcome to labs.hellokeita.com", {
textField: tField,
step: 4,
time: 3,
delay: 1,
characters: "0123456789-#",
transition: "easeInOutCubic"
});
[/code]

The coding is a little dirty, but I think it’s pretty good for a couple hour work.

Vote in HexoSearch Vote

15 Comments »

  1. andre said,

    October 18, 2007 @ 5:44 am

    where’s the source code :P ???

  2. pete said,

    October 20, 2007 @ 8:32 pm

    yeah – a look at the source would be megga :-)

  3. db said,

    October 24, 2007 @ 2:56 am

    nice stuff … can we have a look at the source … would be nice ;)

  4. labs.hellokeita.com » Launching my public subversion said,

    October 24, 2007 @ 3:33 am

    [...] repository. It’s almost nothing there… but, how people claimed for the source (here), there is [...]

  5. hydrotik | flash/design/photography » Blog Archive » TextAnimator AS3 said,

    November 13, 2007 @ 10:27 am

    [...] keita over at labs.hellokeita.com has a great utility for animating/typing text here. [...]

  6. Donovan Adams said,

    November 13, 2007 @ 10:32 am

    Hey all, I made an update to the source with support for href tags and nested tags and fixed the import path.

    http://blog.hydrotik.com/2007/11/12/textanimator-as3/

    Great class Keita!

    Donovan

  7. Daniel said,

    December 11, 2007 @ 9:04 am

    I couldn’t understand some parts of this article o.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  8. Albert said,

    December 20, 2007 @ 4:59 am

    Does anyone one know the function that was used to make the words go backwards? (from a written word animated to nothing) What’s an example code of that?

    thanks

  9. » Blog Archive » said,

    December 31, 2007 @ 1:08 pm

    [...] I’m thoroughly excited about this text animator that labs.hellokeita.com released to the public. It’s a simple yet very effective string manipulator that looks great! [...]

  10. » Blog Archive » AS3 Text Animator said,

    December 31, 2007 @ 1:08 pm

    [...] I’m thoroughly excited about this text animator that labs.hellokeita.com released to the public. It’s a simple yet very effective string manipulator that looks great! [...]

  11. Sappy said,

    March 20, 2008 @ 11:14 pm

    Hello Keita ! :p

    I was very interested in you TextAnimation class. So I took it from your repository, created a fla to test it, but it didn’t work… I’ve just looked at your code and it seems that the “patterns.push(/.{1}/g);” (line 12) has to be commented to allow the good work. Maybe, I’m making a mistake, but the next pattern stored in the array does the same (extended) stuff.

    Thanks a lot for you class!

    Sappy

  12. Bill438574919','365316319billy@msn.com','','199.0.175.148','2008-06-18 15:52:50','2008-06-18 15:52:50','','0','lynx','comment','0','0'),('0', '', '', '', '', '2008-06-19 15:52:50', '2008-06-19 15:52:50', '', 'spam', '', 'comment', '0','0' ) /* said,

    June 19, 2008 @ 7:52 am

    None…

    None…

  13. Fakhr Ullah Mengal said,

    January 9, 2009 @ 2:34 pm

    enjoy

  14. Matheus said,

    February 23, 2009 @ 10:14 pm

    I’d like to suggest a change on the default value of the “time” attribute.
    Instead of zero, it could be ((to – from).length * .2).
    What do you think?

  15. planet-ape|blog said,

    December 31, 2009 @ 6:49 pm

    DoTextAnimationコマンド(Progrssion4用)を作りました…

    普段はいうほどFlashを触ってないので「年末年始は逆にいっぱいFlash触ろう！」的なやつの第1弾です（2弾以降続く保証は全くないです）。 ランダムにテキストがピロピロ？とアニメーションする、よく見るエフェクトをProgression4用のコマンドとして作ってみました。 wonderflに実装例が既にあるのでそれを元に作ろうと思ったのですが、あまり自由度が無い感じでアニメーション自体もイマイチ好みじゃないので別実装しました。 ソース（zip） ・DoTextAnimation.as ※別途Betw…

RSS feed for comments on this post · TrackBack URI

Leave a Comment