Onebyone Design

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″ /]