AS3: Cool Text Effect


/ Published in: ActionScript 3
Save to your folder(s)

Awesome text effect using TweenMax


Copy this code and paste it in your HTML
  1. package com.flexcommunity
  2. {
  3. import flash.filters.*;
  4. import gs.*;
  5. import gs.easing.*;
  6. import gs.plugins.*;
  7. import flash.utils.Timer;
  8. import flash.events.TimerEvent;
  9. import flash.text.TextLineMetrics;
  10. import flash.events.MouseEvent
  11. import mx.containers.Canvas;
  12. import mx.controls.Label;
  13. import mx.core.Application;
  14.  
  15. /**
  16.  * 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
  17.  * The lineMetrics is taken care of for non-monotype fonts.
  18.  * Alpha effects require the fonts to be embedded.
  19.  * The text can have the ability to have rollover and rollout effects for use as links or menu items.
  20. */
  21.  
  22. public class EffectText extends Canvas
  23. {
  24.  
  25. private var tf:Label;
  26. private var test:Label = new Label();
  27. private var tfs:Array = new Array();
  28. private var lm:Array = new Array();
  29. private var j:int=0;
  30. [Bindable]
  31. private var totalWidth:Number=0;
  32. private var myColor:uint;
  33. public var results:Array;
  34. public var myStr:String;
  35. public var buttonSprite:Canvas= new Canvas();
  36.  
  37.  
  38. public function EffectText(str:String,color:uint)
  39. {
  40.  
  41. TweenPlugin.activate([BlurFilterPlugin]);
  42.  
  43. var filter1:DropShadowFilter = new DropShadowFilter();
  44. myStr = str
  45. myColor=color;
  46. results = myStr.split('');
  47.  
  48. for(var i:int=0; i<results.length; i++){
  49. tf = new Label();
  50. tf.filters = [filter1];
  51. tf.text = results[i].toString();
  52. test.y=0;
  53. tf.alpha=0;
  54. tf.setStyle("fontFamily","Arial");
  55. tf.setStyle("fontSize",40);
  56. tf.setStyle("color",myColor);
  57. tfs.push(tf);
  58.  
  59. }
  60. TimerInit();
  61.  
  62. function myTrans():void{
  63. addChild(tfs[j]);
  64. tfs[j].validateNow();
  65. var metrics:TextLineMetrics = tfs[j].getLineMetrics(0);
  66. lm.push(metrics.width);
  67.  
  68. if(j>0){
  69. totalWidth+=lm[j-1];
  70. }
  71. tfs[j].x=0+(totalWidth);
  72.  
  73. TweenMax.from(tfs[j],.1,{alpha:0,blurFilter:{blurX:0,blurY:120}});
  74. TweenMax.to(tfs[j],1,{alpha:1,blurFilter:{blurX:0,blurY:0,quality:3},onComplete:myGlowIn,onCompleteParams:[tfs[j]],ease:Back.easeOut});
  75. j++;
  76. }
  77.  
  78.  
  79. function TimerInit() {
  80. var myTimer:Timer = new Timer(40, tfs.length);
  81. myTimer.addEventListener("timer", timerHandler);
  82. myTimer.start();
  83. }
  84.  
  85. function myGlowIn(parameter1:Label):void{
  86. var target:Label=parameter1;
  87. TweenMax.to(target,.2,{glowFilter:{color:0xffffff, alpha:1, blurX:10, blurY:10},onComplete:myGlowOut,onCompleteParams:[target],ease:Cubic.easeOut});
  88. }
  89.  
  90. function myGlowOut(parameter1:Label):void{
  91. var target:Label=parameter1;
  92. TweenMax.to(target,1,{glowFilter:{color:0xffffff, alpha:0, blurX:0, blurY:0},ease:Cubic.easeOut});
  93. }
  94.  
  95. function timerHandler(event:TimerEvent):void {
  96. myTrans();
  97. }
  98.  
  99. }}}

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.