Greensock Tweening Platform TextEffect Plugins

I recently needed the following text effects for a project, and knew they would make perfect TweenLite/TweenMax plugins.

This movie requires Flash Player 9

Download Example Source

TypewriterPlugin.as

/**
   VERSION: 1.2
   DATE: 3/27/2010
   ACTIONSCRIPT VERSION: 3.0
   @author Marco Di Giuseppe, marco [at] designmarco [dot] com
   @link http://designmarco.com
 */
package com.greensock.plugins
{
	import flash.text.TextField;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	/**
	   TypewriterPlugin tweens the characters of a Textfield simulating a typing effect.
 
	   @usage
	   import com.greensock.TweenLite;
	   import com.greensock.plugins.TweenPlugin;
	   import com.greensock.plugins.TypewriterPlugin;
 
	   TweenPlugin.activate([TypewriterPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.
	   TweenLite.to(textField, 0.5, {typewriter:"Lorem Ipsum"});
 
	   Greensock Tweening Platform
	   @author Jack Doyle, jack@greensock.com
	   Copyright 2010, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html
	   or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.
	 */
	public class TypewriterPlugin extends TweenPlugin
	{
		public static const API:Number = 1.0;
		protected var target:TextField;
		protected var newText:String;
		protected var newLength:int;
		protected var oldText:String;
		protected var oldLength:int;
 
		public function TypewriterPlugin()
		{
			super();
			this.propName = "typewriter";
			this.overwriteProps = [];
		}
 
		override public function onInitTween(target:Object, value:*, tween:TweenLite):Boolean
		{
			if (!(target is TextField)) return false;
 
			this.target = target as TextField;
 
			oldText = target.text;
			oldLength = oldText.length;
 
			newText = String(value);
			newLength = newText.length;
 
			return true;
		}
 
		override public function set changeFactor(n:Number):void
		{
			var valueA:Number = oldLength + (-oldLength * n);
			var valueB:Number = oldLength + ((newLength - oldLength) * n);
			target.text = newText.substr(0, int(valueB - valueA + 0.5)) + oldText.substr(0, int(valueA + 0.5));
		}
	}
}

DecoderTextPlugin.as

/**
   VERSION: 1.2
   DATE:3/27/2010
   ACTIONSCRIPT VERSION: 3.0
   @author Marco Di Giuseppe, marco [at] designmarco [dot] com
   @link http://designmarco.com
 */
package com.greensock.plugins
{
	import flash.text.TextField;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	/**
	   DecoderTextPlugin tweens the characters of a TextField giving the appearance of text decoding.
 
	   @usage
	   import com.greensock.TweenLite;
	   import com.greensock.plugins.TweenPlugin;
	   import com.greensock.plugins.DecoderTextPlugin;
 
	   TweenPlugin.activate([DecoderTextPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.
	   TweenLite.to(textField, 0.5, {decoder:"Lorem Ipsum"});
 
	   Greensock Tweening Platform
	   @author Jack Doyle, jack@greensock.com
	   Copyright 2010, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html
	   or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.
	 */
	public class DecoderTextPlugin extends TweenPlugin
	{
		public static const API:Number = 1.0;
		protected var target:TextField;
		protected var tween:TweenLite;
		protected var prevTime:Number = 0;
		protected var oldText:String;
		protected var oldLength:int;
		protected var newText:String;
		protected var newLength:int;
 
		public function DecoderTextPlugin()
		{
			this.propName = "decoder";
			this.overwriteProps = [];
		}
 
		override public function onInitTween(target:Object, value:*, tween:TweenLite):Boolean
		{
			if (!(target is TextField)) return false;
 
			this.target = target as TextField;
			this.tween = tween;
 
			oldText = target.text;
			oldLength = oldText.length + 1;
 
			newText = String(value);
			newLength = newText.length + 1;
 
			return true;
		}
 
		override public function set changeFactor(n:Number):void
		{
			var counter:int, valueA:String, valueB:String;
 
			if (tween.cachedTime > prevTime)
			{
				counter = int(newLength * n - 1 + 0.5);
				valueA = newText.substr(0, counter);
				valueB = newText.substr(counter);
			}
			else
			{
				counter = int(oldLength * (1 - n) - 1 + 0.5);
				valueA = oldText.substr(0, counter);
				valueB = oldText.substr(counter);
			}
 
			var decoder:String = "";
			var i:int = valueB.length;
			while (i--)
			{
				decoder += String.fromCharCode(((Math.random() * 26) + 65) >> 0);
			}
 
			target.text = valueA + decoder;
			prevTime = tween.cachedTime;
		}
	}
}

comments

6 Responses to “Greensock Tweening Platform TextEffect Plugins”

  1. Kerem Iseri on December 31st, 2009

    nice plugin man.. thanks..

  2. Mirko on March 8th, 2010

    Really good plug-in Marco.
    Could you tell me if it is possible to “modify” the plug-in to make it work with htmltext?

    Thanks
    Ciao

  3. Marco on March 8th, 2010

    All you have to do is change target.text over to target.htmlText.

  4. Mirko on March 9th, 2010

    Thank you Marco, it is working fine even with htmltext now.
    Ciao

  5. Bobo on March 25th, 2010

    Hi,

    Thanks for these, they work great. I have found a small bug, which is when you set the font size with code, the plugin does not respect it. As soon as run a tweelite instance the text field reverts to the original font size.

    Cheers,
    B.

  6. Marco on March 28th, 2010

    I’m positive it’s not a bug with my plugin. I just updated the example swf with the ability to change the font size to make sure.

Leave a Reply