Ease and Blur in AS 3.0
This is a simple example on how to apply easing and blur to an object.
The code is fairly simple, I just created a container that will hold our text field ( I don’t like working on object directly so I usually add each and every object into a container ), I defined a simple TextFormat to format our text and added everything to the stage. Once all this was done, I simply added an ENTER_FRAME event listener to the stage that will handle all the easing and blurring ( this is the essential part since this function has all the math that handles the easing ).
The example can be downloaded from here: Ease And Blur
Here’s the final result ( working example ):
The source code looks like this ( obviously, the MainClass class is set as a Document Class ):
package { import flash.display.Sprite; import flash.display.MovieClip; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.text.TextFormatAlign; import flash.text.AntiAliasType; import flash.filters.BlurFilter; public class MainClass extends Sprite { // ---------------------------------------- // Private Variables // ---------------------------------------- private var container:Sprite; private var tf:TextField; private var easeFactor:Number = .2; // ---------------------------------------- // CONSTRUCTOR // ---------------------------------------- public function MainClass() { // set stage properties stage.scaleMode = StageScaleMode.NO_SCALE; stage.showDefaultContextMenu = false; stage.align = StageAlign.LEFT; init(); } // ---------------------------------------- // Private Methods // ---------------------------------------- private function init():void { // create a text format for your text field var tFormat:TextFormat = new TextFormat(); tFormat.font = "Arial"; tFormat.bold = true; tFormat.color = 0x000000; tFormat.size = 36; tFormat.align = TextFormatAlign.LEFT; // create the text field this.tf = new TextField(); this.tf.autoSize = TextFieldAutoSize.LEFT; this.tf.selectable = false; this.tf.multiline = false; this.tf.text = "Wisebisoft"; this.tf.antiAliasType = AntiAliasType.ADVANCED; this.tf.sharpness = -400; this.tf.setTextFormat(tFormat); this.tf.x = -Math.round(this.tf.width / 2); this.tf.y = -Math.round(this.tf.height / 2); // create a container that will hold the text field // and add an ENTER_FRAME event listener that // will handle the easing and blurring this.container = new Sprite(); this.container.mouseChildren = false; addChild(this.container); this.container.addChild(this.tf); stage.addEventListener(Event.ENTER_FRAME, eventFrameHandler); } /** * Takes care of the animation process, updates the position * of our text field and applies the blur filter. */ private function eventFrameHandler(event:Event):void { if (mouseX != 0 && mouseY != 0) { // calculate new position var mouse_xpos:Number = this.container.x; mouse_xpos -= (mouse_xpos - mouseX) * this.easeFactor; var mouse_ypos:Number = this.container.y; mouse_ypos -= (mouse_ypos - mouseY) * this.easeFactor; // update positions and apply a blur filter this.container.x = mouse_xpos; this.container.y = mouse_ypos; this.tf.filters = [new BlurFilter(Math.abs(mouse_xpos - mouseX), Math.abs(mouse_ypos - mouseY), 1)]; } else { this.container.x = Math.round(stage.stageWidth / 2); this.container.y = Math.round(stage.stageHeight / 2); } } } }
