Source code for custom TextFields with cool effects
Recently, I decided to throw something up on joshtynjala.com. Nothing fancy or special. Just thought I’d mention that I’m a Flash developer and put a couple links pointing to the blog here. A simple SWF displays the recent postings from the various blogs to which I contribute. Part of the project’s goal was to display the posts in an interesting way, so I created a couple of custom TextField subclasses that manipulate the text as they display it.
Effect #1: TypingTextField
This one is obvious. When the text property changes, the TextField clears and adds one letter at a time to simulate typing. A simple blinking cursor may be displayed to give it a command line sort of appearance.
Please install Flash Player.
Effect #2: DecryptingTextField
Hollywood doesn’t understand computers. That said, it’s always cool to see the combination for a safe with an electronic lock get cracked character by character. The DecryptingTextField displays a set of random letters that cover the full length of the text property. One by one, the proper characters are displayed.
Please install Flash Player.
A couple things to note on this one. If you’re going turn on word-wrapping for a DecryptingTextField, you should set the keepSpaces property to true. This will minimize ugly changing line breaks by always displaying spaces when the randomizer encounters a space in the original text. Additionally, to further improve the aesthetics, you might want to consider using a mono-spaced font like Courier or Consolas so that the characters stay in the same location every time a new random character is displayed. It doesn’t look bad on a single line, but it’s more noticeable when you have multiple lines.
Interested in how I combined my RSS feeds? I didn’t do it directly in ActionScript. Instead, I took advantage of Yahoo! Pipes to create a combined feed for this blog and any posts that are specifically authored by me at the Yahoo! Flash Blog.
Source code is linked above under each demo. They’re under the terms of an MIT-style license so you may include them in both open source and commercial projects.
15 Comments
I quite like the new homepage, text layout and colours are great.
Thanks, C4RL05.
Sorry, stupid question,
i importend the class in my flash project.
but don’t really know how tell the class to start working on my textfield.
could you pls explain this to a noob
best
skuk, these classes ARE TextFields, so you just use them as you would any regular TextField. Example:
Trying to run this in a Flex project. I created the .as class, then instantiated it as:
This doesn’t work. Nor does it work when I set the text using a creationComplete function:
private function initApp() : void
{
typingText.text = “this is my beautiful text”;
}
What am I doing wrong?
Tom, these are not designed for Flex.
Hi Josh,
I played with the typing textfield class and Flex 2.
I derived the class from TextArea ( mx.controls.TextArea) instead of Textfield and just added one line into the function timerUpdateHandler(event:TimerEvent):void
{
…
textField.scrollV += 1;
}
to make the scrolling working.
If I set width/height for my instance it works pretty well with Flex
best regards,
kcell
hey, i really dont get this… its not working
warren, can you share some source code, maybe? I can’t help if I have no idea what the problem might be.
Thanks Josh!
Best Regards!!
Hi,
i don’t understand why i can’t add a textformat, with set setTextFormat, pls help.
greetz
Tokarma, there’s nothing that should stop you from setting the TextFormat. Since these TextFields add text over time after you set their value, maybe you should try setting the
defaultTextFormatproperty instead of callingsetTextFormat().THX,
defaultTextFormat works, i wonder that setTextFormat don’t work.
And of course thx for sharing this classes.
When you call
setTextFormat(), the new TextFormat only applies to existing text in a TextField. ThedefaultTextFormatproperty applies to existing text and also to any text added after you set the property. Since these classes add characters one by one over a period of time, onlydefaultTextFormatwill work.I guess .fla sample file will be better. If somebody interested in letter cycling codes too, so can chech the blog. The sample there is AS as document class, no .fla again.