Skip to content


Tweener Blur Animation

I wrote up a couple classes to utilize a blur animation effect with the use of Tweener Actionscript Library

Here is the stripped down Main Document class:

package {
	import flash.display.Sprite;
	import flash.events.Event;

    public class Main extends Sprite {

		private var ba:BlurAnimation;

		public function Main()
		{
			addEventListener ( Event.ADDED_TO_STAGE , init );
        }

		private function init(e:Event):void
		{
			ba = new BlurAnimation( "http://manewc.com/projects/flash/i/gahlord.jpg", 400, 400, 5 );
			addChild(ba);

			ba.x = stage.stageWidth / 2 - 245;
			ba.y = stage.stageHeight / 2 - 245;
		}
    }
}

Here is the blur animation effect using the Tweener Class

package
{
	import flash.display.Sprite;
	import flash.net.URLRequest;
	import flash.filters.BlurFilter;
	import flash.filters.BitmapFilterQuality;
	import caurina.transitions.Tweener;

	public class BlurAnimation extends Sprite
	{
		private var back_mc:LoadImage;

		public function BlurAnimation(imgurl:String, xblur:Number=10, yblur:Number=10, timer:Number=1)
		{
			var filter:BlurFilter=new BlurFilter(xblur,yblur,BitmapFilterQuality.MEDIUM);
			var filters_array:Array=new Array();
			filters_array.push(filter);

			back_mc = new LoadImage(imgurl);
			addChild ( back_mc );

			back_mc.filters=filters_array;

			Tweener.addTween(back_mc,{_blur_blurX:0,_blur_blurY:0, time:timer});
		}
	}
}

A class I use to load in my images:

package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.URLRequest;

    public class LoadImage extends Sprite {
        private var url:String;
		private var imageHolder:Sprite;
		public var LoadImageArray:Array = new Array();
		public var bits:Number;
		public var bitsLoaded:Number;
		public var totalBits:Number;
		// public var imgCompleted:Boolean;

        public function LoadImage(url:String) {

			var loader:Loader = new Loader();
            configureListeners(loader.contentLoaderInfo);

			var request:URLRequest = new URLRequest( url );
            loader.load(request);

			imageHolder = new Sprite();
			addChild ( imageHolder );
            imageHolder.addChild(loader);

        }

        private function configureListeners(dispatcher:IEventDispatcher):void {
			dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
			dispatcher.addEventListener(Event.COMPLETE, completeHandler);
        }

        private function completeHandler(event:Event):void {
			trace ( "image loaded complete");
		}

        private function progressHandler(event:ProgressEvent):void {
            trace ("progressHandler: bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal);
        }
    }
}

Posted in Actionscript 3, Tweener.


8 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Julesj says

    Isn’t it better to use the filterShortCuts that come with the Tweener class? 2 lines of code would result in exactly the same thing.

  2. Billy says

    Thanks. I find the examples you post to be a great learning tool, especially when I get to see how multiple classes can interact and be used together like with this example.

  3. ayan says

    cool class, nice and simple and what i want right now. Also, just to do some shameless self promoting, check out my AssetLoader, which loads images, xml files, and raw text and coming soon : sound, all by using the same syntax. It’s modeled off of Tweener’s simplicity :) http://www.ayanray.com/blog/series/flash_world/asset_loader_class

  4. admin says

    thanks for looking ayan – i will have to say that i do love the simplicity, i like where you are going with the AssetLoader – keep up the great work – wish i i found your class files before i had to write a custom class to load in multiple images – next time though!

  5. binhdocco says

    Great work ! Thanks.

    But I don’t understand 2 variables : _blur_blurX:0,_blur_blurY:0

    What does it mean ?

  6. mpeeba3 says

    not sure what I am doing wrong but copying all your files, just comes back with the error :

    Property _blur_blurX not found on LoadImage and there is no default value.
    at caurina.transitions::Tweener$/addTween()

    i have imported the caurina classes, and added FilterShortcuts.init() to the Main class..

    ?????

  7. admin says

    You are publishing with AS3, correct? Feel free to email or post your files, it will be easier to detect what the issue is. Thanks, Morgan

  8. Joro says

    Working great for me.. But i dont understand why i have to apply the array on the back_mc ..



Some HTML is OK

or, reply to this post via trackback.