TextGradient

This class creates a text effect using a gradient to show a text sliding from the left. I'll probably put later a version with a tweener and add the directions.

demo

docs

download source

Plain Text
Actionscript:
  1. package com.soundstep.effects {
  2.    
  3.     import flash.display.DisplayObjectContainer;
  4.     import flash.display.Sprite;
  5.     import flash.events.EventDispatcher;
  6.     import flash.geom.Matrix;
  7.     import flash.display.SpreadMethod;
  8.     import flash.text.TextField;
  9.     import flash.display.GradientType;
  10.     import flash.events.Event;
  11.     import flash.events.EventDispatcher;
  12.     import flash.events.TimerEvent;
  13.     import flash.utils.Timer;
  14.    
  15.     /**
  16.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
  17.      * <b>Class version:</b> 1.0<br />
  18.      * <b>Actionscript version:</b> 3.0<br />
  19.      * <b>Copyright:</b> Free to use and change (except to include in a framework), an notification email will be welcome for a commercial use (just for information).<br />
  20.      * <b>Date:</b> 04-2008<br />
  21.      * <b>Usage:</b> Show a TextField using a gradient effect sliding from the left (timeline based)
  22.      * @example
  23.      * <listing version="3.0">
  24.      * var t:TextField = new TextField();
  25.      * t.textColor = 0x004080;
  26.      * t.selectable = false;
  27.      * t.multiline = true;
  28.      * t.wordWrap = true;
  29.      * t.autoSize = TextFieldAutoSize.LEFT;
  30.      * t.width = 300;
  31.      * t.embedFonts = true; // you must create the Arial font in the flash library
  32.      * t.htmlText = "&lt;font face='Arial' size='11'&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/font&gt;";
  33.      * t.x = t.y = 100;
  34.      * addChild(t);
  35.      * var tg:TextGradient = new TextGradient(this, t, t.textColor, t.alpha, false, .02, 1);
  36.      * tg.addEventListener(TextGradient.EFFECT_STARTED, handlerStart);
  37.      * tg.addEventListener(TextGradient.EFFECT_ENDED, handlerEnd);
  38.      * tg.start();
  39.      * </listing>
  40.      * @eventType TextGradient.
  41.      */
  42.    
  43.     public class TextGradient extends EventDispatcher {
  44.        
  45.         //------------------------------------
  46.         // private, protected properties
  47.         //------------------------------------
  48.        
  49.         private var _target:TextField;
  50.         private var _mask:Sprite;
  51.         private var _holder:DisplayObjectContainer;
  52.         private var _timer:Timer;
  53.         private var _targetPos:Number;
  54.         private var _alpha:Number;
  55.         private var _color:uint;
  56.        
  57.         //------------------------------------
  58.         // public properties
  59.         //------------------------------------
  60.        
  61.         public static const EFFECT_ENDED:String = "effect_started";
  62.         public static const EFFECT_STARTED:String = "effect_ended";
  63.        
  64.         /**
  65.          * speed of the animation, timeline based, a higher number will run the animation quicker
  66.          * @default 0.03
  67.          */
  68.         public var speed:Number;
  69.        
  70.         /**
  71.          * delay of the animation
  72.          * @default 0
  73.          */
  74.         public var delay:Number;
  75.        
  76.         //------------------------------------
  77.         // constructor
  78.         //------------------------------------
  79.        
  80.         /**
  81.          * Constructor
  82.          * @param holder DisplayObject that contains the TextField
  83.          * @param target TextField that will be displayed
  84.          * @param color color of the TextField
  85.          * @param alpha alpha of the TextField
  86.          * @param autoStart wether or not the animation will start straight, if set to false, you must use the public method start
  87.          * @param Speed speed of the animation, timeline based, a higher number will run the animation quicker
  88.          * @param delay delay of the animation
  89.          */
  90.         public function TextGradient(holder:DisplayObjectContainer, target:TextField, color:uint = 0x000000, alpha:Number = 1, autoStart:Boolean = true, speed:Number = .03, delay:Number = 0) {
  91.             EventDispatcher(this);
  92.             _holder = holder;
  93.             _target = target;
  94.             _alpha = alpha;
  95.             _target.alpha = _alpha;
  96.             _color = color;
  97.             this.speed = speed;
  98.             this.delay = delay;
  99.             _targetPos = _target.x + _target.width;
  100.             buildMask();
  101.             if (autoStart) start();
  102.         }
  103.        
  104.         //
  105.         // PRIVATE, PROTECTED
  106.         //________________________________________________________________________________________________
  107.        
  108.         private function buildMask():void {
  109.             var matr:Matrix = new Matrix();
  110.             matr.createGradientBox(_target.width, _target.height, 0, 0, 0);
  111.             _mask = new Sprite();
  112.             _mask.graphics.beginFill(_color, 1);
  113.             _mask.alpha = _alpha;
  114.             _mask.graphics.drawRect(0 - _target.width, 0, _target.width, _target.height);
  115.             _mask.graphics.beginGradientFill(
  116.                 GradientType.LINEAR,
  117.                 [_color, _color],
  118.                 [1, 0],
  119.                 [0, 255],
  120.                 matr,
  121.                 SpreadMethod.PAD
  122.             );
  123.             _mask.graphics.drawRect(0, 0, _target.width, _target.height);
  124.             _mask.x = _target.x - _mask.width;
  125.             _mask.y = _target.y;
  126.         }
  127.        
  128.         private function frameHandler(e:Event):void {
  129.             var dx:Number = _targetPos - _mask.x;
  130.             _mask.x += dx * speed;
  131.             if (_mask.x> _targetPos - 5) {
  132.                 dispatchEvent(new Event(TextGradient.EFFECT_ENDED));
  133.                 dispose();
  134.             }
  135.         }
  136.        
  137.         private function doStart(e:TimerEvent = null):void {
  138.             if (_timer) _timer.removeEventListener(TimerEvent.TIMER, doStart);
  139.             _mask.addEventListener(Event.ENTER_FRAME, frameHandler);
  140.             dispatchEvent(new Event(TextGradient.EFFECT_STARTED));
  141.         }
  142.        
  143.         // PUBLIC
  144.         //________________________________________________________________________________________________
  145.        
  146.         /**
  147.          * start the animation (if autoStart has been set to false in the constructor)
  148.          */
  149.         public function start():void {
  150.             _mask.mask = _target;
  151.             _holder.addChild(_mask);
  152.             if (delay> 0) {
  153.                 _timer = new Timer(delay*1000, 1);
  154.                 _timer.addEventListener(TimerEvent.TIMER, doStart);
  155.                 _timer.start();
  156.             }
  157.             else doStart();
  158.         }
  159.        
  160.         /**
  161.          * stop and clean the animation
  162.          */
  163.         public function dispose():void {
  164.             if (_timer) _timer.removeEventListener(TimerEvent.TIMER, doStart);
  165.             if (_mask) {
  166.                 _mask.removeEventListener(Event.ENTER_FRAME, frameHandler);
  167.                 _holder.removeChild(_mask);
  168.                 _mask.mask = null;
  169.                 _mask = null;
  170.             }
  171.         }
  172.        
  173.         /**
  174.          * return the Sprite of the mask used to reveal the TextField
  175.          * @return return a Sprite
  176.          */
  177.         public function get mask():Sprite {
  178.             return _mask;
  179.         }
  180.        
  181.     }
  182.    
  183. }

Leave a Reply