Ease and Blur in AS 3.0

October 26th, 2008 by Biro Barna

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

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 var container:Sprite;			// container that holds the text field
		private var tf:TextField;
		private var easeFactor:Number = .2;		// amount of easing
 
		public function MainClass()
		{
			// set stage properties
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.showDefaultContextMenu = false;
			stage.align = StageAlign.LEFT;
 
			init();
		}
 
		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);
		}
 
		private function eventFrameHandler(event:Event):void
		{
			if (mouseX != 0 && mouseY != 0)
			{
				var mouse_xpos:Number = mouseX;
				var mouse_ypos:Number = mouseY;
 
				// calculate new position
				mouse_xpos = this.container.x;
				mouse_xpos -= (mouse_xpos - mouseX) * this.easeFactor;
				mouse_ypos = 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);
			}
		}
	}
}

Here’s the final result ( working example ):

Posted in ActionScript 3.0

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.