Return to Snippet

Revision: 24879
at March 15, 2010 01:38 by chrisaiv


Initial Code
package com.flexcommunity
{
    import flash.filters.*;
    import gs.*;
    import gs.easing.*;
    import gs.plugins.*;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
       import flash.text.TextLineMetrics;
     import flash.events.MouseEvent
    import mx.containers.Canvas;
    import mx.controls.Label;
    import mx.core.Application;
    
/**
 * The EffectText Class allows one or more effects from the tweenMax library to be applied to individual letters in a block of text. These effects can be timed sequentially
 * The lineMetrics is taken care of for non-monotype fonts.
 * Alpha effects require the fonts to be embedded.
 * The text can have the ability to have rollover and rollout effects for use as links or menu items.
*/
 
    public class EffectText extends Canvas
    {
        
        private var tf:Label;
        private var test:Label = new Label();
        private var tfs:Array = new Array();
        private var lm:Array = new Array();
        private var j:int=0;
        [Bindable]
        private var totalWidth:Number=0;
        private var myColor:uint;
        public var results:Array;
        public var myStr:String;
         public var buttonSprite:Canvas= new Canvas();
         
                 
        public function EffectText(str:String,color:uint)
        {
            
         TweenPlugin.activate([BlurFilterPlugin]);
   
         var filter1:DropShadowFilter = new DropShadowFilter();
         myStr = str
         myColor=color;
         results =  myStr.split('');
     
     for(var i:int=0; i<results.length; i++){
          tf = new Label();
           tf.filters = [filter1];
         tf.text = results[i].toString();  
            test.y=0;
            tf.alpha=0;
         tf.setStyle("fontFamily","Arial");
         tf.setStyle("fontSize",40);
            tf.setStyle("color",myColor);
           tfs.push(tf);

     }
     TimerInit();
     
     function myTrans():void{
        addChild(tfs[j]);
         tfs[j].validateNow();
         var metrics:TextLineMetrics = tfs[j].getLineMetrics(0);
        lm.push(metrics.width);
 
          if(j>0){
             totalWidth+=lm[j-1];
          }
         tfs[j].x=0+(totalWidth);
    
         TweenMax.from(tfs[j],.1,{alpha:0,blurFilter:{blurX:0,blurY:120}});
          TweenMax.to(tfs[j],1,{alpha:1,blurFilter:{blurX:0,blurY:0,quality:3},onComplete:myGlowIn,onCompleteParams:[tfs[j]],ease:Back.easeOut});
         j++;
         }
         
         
         function TimerInit() {
            var myTimer:Timer = new Timer(40, tfs.length);
            myTimer.addEventListener("timer", timerHandler);
            myTimer.start();
        }
        
        function myGlowIn(parameter1:Label):void{
         var target:Label=parameter1;
         TweenMax.to(target,.2,{glowFilter:{color:0xffffff, alpha:1, blurX:10, blurY:10},onComplete:myGlowOut,onCompleteParams:[target],ease:Cubic.easeOut});
     }
     
     function myGlowOut(parameter1:Label):void{
         var target:Label=parameter1;
         TweenMax.to(target,1,{glowFilter:{color:0xffffff, alpha:0, blurX:0, blurY:0},ease:Cubic.easeOut});
     }

     function timerHandler(event:TimerEvent):void {
           myTrans();
        }
        
 }}}

Initial URL
http://blog.flexcommunity.net/lab/textEffect2/srcview/

Initial Description
Awesome text effect using TweenMax

Initial Title
AS3: Cool Text Effect

Initial Tags

                                

Initial Language
ActionScript 3