Random Letter Cycling

It’s an old effect we’ve all seen before, but still seems popular these days. Here’s a little Actionscript 3 implementation:

The effect class: LetterCycler.as

/** * Randomly cycles the letters/numbers of the message property passed to it in the constructor. * @author Devon O. */ package com.onebyonedesign.extras { import flash.events.Event; import flash.events.EventDispatcher; import flash.events.TimerEvent; import flash.utils.Timer; public class LetterCycler extends EventDispatcher { private var _index:int; private var _str1:String; private var _str2:String; private var _str3:String; private var _message:String; private var _currentText:String; /** * currentText property returns currently scrambled text. READ ONLY. */ public function get currentText():String { return _currentText; } /** * message property the unscrambled message. READ / WRITE. */ public function set message(msg):void { _message = msg; } public function get message():String { return _message; } /** * * @param The original, unscrambled message. */ public function LetterCycler(message:String = ""):void { _message = message; } /** * Call this to begin scrambling text. Listen for events, Event.CHANGE and Event.COMPLETE to act accordingly. */ public function cycle():void { _str1 = ""; _str2 = ""; _str3 = ""; _index = 0; var timer:Timer = new Timer(25, _message.length + 1); timer.addEventListener(TimerEvent.TIMER, cycleText); timer.addEventListener(TimerEvent.TIMER_COMPLETE, cycleComplete); timer.start(); } private function cycleText(te:TimerEvent):void { var index:int = te.currentTarget.currentCount - 1; _str1 = ""; _str2 = _message.substr(0, index); _str3 = _message.substr(index); var len:int = _str3.length; for (var i:int = 0; i < len; i++) { _str1 += String.fromCharCode(randRange(48, 122)); } _currentText = _str2 + _str1; dispatchEvent(new Event(Event.CHANGE)); } private function cycleComplete(te:TimerEvent):void { te.currentTarget.removeEventListener(TimerEvent.TIMER, cycleText); te.currentTarget.removeEventListener(TimerEvent.TIMER_COMPLETE, cycleComplete); dispatchEvent(new Event(Event.COMPLETE)); } private function randRange(min:Number, max:Number):int { return Math.floor(Math.random() * (max - min + 1)) + min; } } }

And a quick document class example:

/** * Use as document class for an example of LetterCycler class. */ package { import com.onebyonedesign.extras.LetterCycler; import flash.display.Sprite; import flash.events.Event; import flash.events.TimerEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.utils.Timer; public class CycleExample extends Sprite { private var _textField:TextField; private var _cycler:LetterCycler = new LetterCycler(); private var _messages:Array = new Array("This is some test text.", "Blah blah blah blah.", "The quick brown fox did something or other.", "Yadda yadda yadda yadda."); public function CycleExample():void { init(); } private function init():void { createTextField(); displayScrambledText(null); } private function displayScrambledText(te:TimerEvent):void { if (te != null) te.currentTarget.removeEventListener(TimerEvent.TIMER_COMPLETE, displayScrambledText); scrambleText(_messages[Math.floor(Math.random() * _messages.length)]); } private function createTextField():void { _textField = new TextField(); _textField.autoSize = TextFieldAutoSize.LEFT; _textField.x = 50; _textField.y = 50; _textField.defaultTextFormat = new TextFormat("_typewriter", 12); addChild(_textField); } private function scrambleText(someText:String):void { _cycler.message = someText; _cycler.addEventListener(Event.CHANGE, showText); _cycler.addEventListener(Event.COMPLETE, cycleDone); _cycler.cycle(); } private function showText(evt:Event):void { _textField.text = _cycler.currentText; } private function cycleDone(evt:Event):void { _cycler.removeEventListener(Event.CHANGE, showText); _cycler.removeEventListener(Event.COMPLETE, cycleDone); var t:Timer = new Timer(2000, 1); t.addEventListener(TimerEvent.TIMER_COMPLETE, displayScrambledText); t.start(); } } }

All that mumbo jumbo will give the example below:

[kml_flashembed movie=”/wp-content/uploads/2007/12/letter_cycler.swf” height=”150″ width=”400″ fversion=”9″ /]