AS3 Masked dynamic textfield animation
This is a class developed internally to animate a dynamic textfield full of content, with masking. The best one I’ve seen animated so far is seen on the world renowned RED INTERACTIVE AGENCY’s website. Here is our replica of that class using caurina tween (click to view shadowbox sample):
You may realize that the code is longer that what it’s needed to create something like this, but. It’s best that we could include these functionality to that class:
1) reusable, this is because flash as3 collects garbage data. If you create a new one over and over again, flash will eventually crash due to too much memory usage. Which is the thing that makes this class special, by the way.
2) text changable, flexible text field height, so that you can trace it for other reasons
3) including functions Start() and Reset()
4) able to use your own imported font
5) able to change colour
6) able to set your width
so on so forth.
To call the class, it is required to do something like this:
private static var myText:Readingtext = new Readingtext(font:String, size:uint, color:String, width:uint, speed:Number, words:String);
You can change the font type, font size, font color, width of textfield, speed of animation(seconds) and the text from the parameters respectively. Please bare in mind that you have to import your font into flash in order for this script to use that font, or any script, for that matter. To import your font, click on the top right of your flash’s library, choose “New Font” and add your font. Then you have to do some linkage settings on your fonts for flash to read it, to do this, right click on your font in the library, select “Linkage”, choose “Export for ActionScript”, the put in whatever name for the class; it doesn’t matter. When you need to call your font via scripts, make sure to type the ORIGINAL name of the font instead of the class name. For my sample, I imported “Futura Medium” instead of “FuturaMedium”, which is the class name I’ve given that font. This is a bug in flash’s side, as far as CS3 in concerned.
NOTE: It is essentially required to import font or else people without your particular font in their computer will not see your font properly, they will see a default font of Times New Roman, if I’m not mistaken.
Here’s the script, a download link can be found at the end of the post.
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.text.*;
import caurina.transitions.Tweener;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
import flash.display.Shape;
public class Readingtext extends Sprite {
//CREATE TEXT FIELD
private var texter:TextField = new TextField();
private var texterFormat:TextFormat = new TextFormat();
//CREATE MASK
private var masker:MovieClip = new MovieClip();
private var clips:Array = [];
//CREATE TIMER
private var repeatcount:uint = 1;
private var delay:uint;
private var myTimer:Timer;
private var mc:uint = 0;
private var time:Number;
//LEADING AND SPACING OF YOUR TEXT FIELD, SIZER IS TO SAVE THE FONT SIZE
private var sizer:uint;
private var leading:uint = 6;
private var letterSpacing:Number = 0.5;
//THIS IS A WILDCARD SETTING FOR TEXT HEIGHT, SINCE EACH FONT HAVE A DIFFERENT HEIGHT
private var wildCardNum:uint = 3;
//LINES NUMBERS
private var lineNum:uint;
public function Readingtext(font:String, size:uint, color:String, w:uint, speed:Number, words:String) {
sizer = size;
texter.width = w;
time = speed;
delay = speed*1000;
myTimer = new Timer(delay, repeatcount);
texter.multiline = true;
texter.selectable = false;
texter.condenseWhite = true;
texter.autoSize = TextFieldAutoSize.LEFT;
texter.wordWrap = true;
texter.text = words;
texter.antiAliasType = "advanced";
texter.embedFonts = true;
texterFormat.color = color;
texterFormat.align = TextFormatAlign.LEFT;
texterFormat.size = size;
//SEE EVENT FOR THE USE OF THIS
texter.addEventListener(Event.SCROLL, onScroll);
//
texterFormat.letterSpacing = letterSpacing;
texterFormat.font = font;
texterFormat.leading = leading;
texter.setTextFormat(texterFormat);
//DYNAMICALLY SETTING UP THE MASK
var num:uint = Math.round(texter.height/(size+wildCardNum));
num = texter.numLines;
lineNum = num;
for (var i:uint = 0; i < num; i++) {
var _masker:Shape = new Shape;
_masker.graphics.beginFill(0x000000);
_masker.graphics.drawRect(0, 0, 100, 32);
_masker.graphics.endFill();
_masker.width = 1;
_masker.height = size+leading+letterSpacing+wildCardNum;
_masker.y = i*(_masker.height);
masker.addChild(_masker);
clips[i] = _masker;
}
//COUNTING HOW MANY TIMES THE TIMER SHOULD MOVE
repeatcount = num;
myTimer.repeatCount = repeatcount;
//
addChild(texter);
addChild(masker);
//DEACTIVATE THIS TO SEE HOW THE MASK WORKS
texter.mask = masker;
myTimer.addEventListener("timer", timedFunction);
}
//BY DEFAULT, SOME BROWSER ALLOW USER TO USE MOUSEWHEEL TO SCROLL THE TEXTFIELD, THIS COULD BE ANNOYING TO SOME, THIS FUNCTION IS TO DEACTIVATE IT
private function onScroll(evt:Event):void {
texter.scrollV = 0;
}
private function timedFunction(e:TimerEvent) {
if(mc == lineNum-1) {
Tweener.addTween(clips[mc], {width:texter.width, time:(time*4), transition:"easeOutSine"});
} else {
Tweener.addTween(clips[mc], {width:texter.width, time:time, transition:"easeOutSine"});
}
mc++;
}
//THIS FUNCTION IS FOR YOU TO CHANGE THE TEXT IN THE TEXT FIELD, ALLOWING YOU TO REUSE THE TEXT FIELD
//THIS IS ADDED SO THAT AS3 WOULDN'T COLLECT GARBAGE DATA, WHICH EVENTUALLY WILL CRASH YOUR BROWSER
public function changeText(wordie:String) {
for (var j:uint = 0; j < clips.length; j++) {
Tweener.removeTweens(clips[j]);
clips[j].width = 1;
}
//NOTE: THIS IS A USEFUL FUNCTION TO REMOVE ALL CHILD IN A MOVIECLIP
var v = masker.numChildren;
while (v--) {
masker.removeChildAt(v);
}
texter.text = wordie;
texter.setTextFormat(texterFormat);
var num:uint = Math.round(texter.height/(sizer+wildCardNum));
num = texter.numLines;
lineNum = num;
for (var i:uint = 0; i < num; i++) {
var _masker:Shape = new Shape;
_masker.graphics.beginFill(0x000000);
_masker.graphics.drawRect(0, 0, 100, 32);
_masker.graphics.endFill();
_masker.width = 1;
_masker.height = sizer+leading+letterSpacing+wildCardNum;
_masker.y = i*(_masker.height);
masker.addChild(_masker);
clips[i] = _masker;
}
repeatcount = num;
myTimer.repeatCount = repeatcount;
Start();
}
//CALL THIS FUNCTION EXTERNALLY TO REMOVE THE TEXTFIELD (TO RENDER IT INVISIBLE)
//YOU MAY MANUALLY CHANGE TO TEXTFIELD X AND Y POSITION TO REMOVE IT, WHICH IS RECOMMENEDED IF YOU'LL EB REUSING IT
public function Reset() {
Tweener.removeAllTweens();
myTimer.stop();
for (var i:uint = 0; i < clips.length; i++) {
clips[i].width = 1;
}
}
//START THE ANIMATION. CAN BE USED OVER AND OVER AGAIN
public function Start() {
Tweener.removeAllTweens();
mc = 0;
myTimer.reset();
myTimer.start();
for (var i:uint = 0; i < clips.length; i++) {
clips[i].width = 1;
}
}
}
}
Download link. By the way, pretty nifty code colorer plugin for wordpress huh? We used this plugin from Dmytro Shteflyuk’s site.