/ Published in: ActionScript 3
Awesome text effect using TweenMax
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
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(); } }}}
URL: http://blog.flexcommunity.net/lab/textEffect2/srcview/