Blur moving

[Flep]

Hello !

As I like very much the BlurFilter of Flash CS3, I prepared a simple tutorial to apply a blur effect to a MovieClip in motion.

Basically, I create an interval to move the coordinates X of a MovieClip to the coordinate X of the mouse using an inertia effect.

The more distant is the MovieClip from the mouse, the more the blur effect applied to the same MovieClip will be pronounced.

I create a FLA and I save it as ‘main.fla’.

Into which, I create a rectangular MovieClip, with a height equal to the stage and a width of 100 pixel (for example).

I drag the MovieClip on stage and I assign to it the instance name ‘clip_mc’.

I create an another level, named ‘code’, I open the Action panel and I write:

import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;

var blur:BlurFilter=new BlurFilter(0,0,BitmapFilterQuality.HIGH);
var filters_array:Array=new Array();
filters_array.push(blur);
clip_mc.filters=filters_array;

clip_mc.addEventListener(Event.ENTER_FRAME,go);

function go(evt:Event):void
{
	var clip:MovieClip=evt.target as MovieClip;
	clip.dx=mouseX;
	var dxx:Number=clip.dx-clip.x;
	clip.x+=dxx*.2;
	var temp_array:Array=clip.filters;
	temp_array[0].blurX=Math.abs(dxx/7);
	temp_array[0].blurY=temp_array[0].blurX;
	clip.filters=temp_array;
}

The result:

Let us analyse the code

I import the needed classes

import flash.filters.BlurFilter;

import flash.filters.BitmapFilterQuality;

I create a variable of type BlurFilter passing to it the needed values

var blur:BlurFilter=new BlurFilter(0,0,BitmapFilterQuality.HIGH);

I create an Array into which I insert BlurFilter (let us not forget that using Actionscript the filter need to be added into an Array to apply it to a MovieClip)

var filters_array:Array=new Array();

I add the filter to the Array

filters_array.push(blur);

I assign the array containing the filter to the filters property of clip_mc placed on stage

clip_mc.filters=filters_array;

I create an ENTER_FRAME that calls the function go

clip_mc.addEventListener(Event.ENTER_FRAME,go);

function go(evt:Event):void

{

I create a local variable to the function named ‘clip’ and I assign the value evt.target forced as a MovieClip type

var clip:MovieClip=evt.target as MovieClip;

I apply the inertia effect to the x of the clip based on the mouse position

clip.dx=mouseX;

var dxx:Number=clip.dx-clip.x;

clip.x+=dxx*.2;

I create an array assigning to it the array that has as value the property filters of the clip

var temp_array:Array=clip.filters;

I assign the values blurX and blurY

temp_array[0].blurX=Math.abs(dxx/7);

temp_array[0].blurY=temp_array[0].blurX;

I assign once again the array to the property filters of the clip

clip.filters=temp_array;

}

See you soon & stay tuned !

[zwringin]

This is surely a great movement. I was trying to get it done with a large button at the bottom so when i press it the image would roll over but i couldn´t make it. I´m too amateur in actionscript, but i thought it was easy if i changed the Event to MouseEvent like this:


i create a button called clip_btn so i could give him the order

clip_btn.addEventListener(MouseEvent.MOUSE_DOWN,go );

function go(evt:Event):void
{
var clip:MovieClip=evt.target as MovieClip;
clip.dx=mouseX;
var dxx:Number=clip.dx-clip.x;
clip.x+=dxx*.2;
var temp_array:Array=clip.filters;
temp_array[0].blurX=Math.abs(dxx/7);
temp_array[0].blurY=temp_array[0].blurX;
clip.filters=temp_array;
}Do you think you could show me the way? It´s something that i could use here in this site: www.digipepe.com, to show a 360º picture. Thanks anyway. Great Tutorial!

[Jo Wong]

It's a really cool.

I just start to learn about actionscript, and I can learn from those tutorial very clearly.
Truly thanks.

Hope I can improve more in the future.