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