Dynamic Blur Effect with Actionscript
| Category | : Flash | Views | : 18571 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : dynamic-blur-effect-with-actionscript.zip | ||
| Result | : See the result | ||||
In this tutorial you will learn to make how to make dynamic blur effects, you will set the blur entirely through actionscript.
When the mouse is not over the image it will be blurred and when it is over it will not have blur at all.
The first thing you need to do is to choose an image, you can use this one:
Import it to the stage and put it inside a new movie clip; drag a new instance of this Movie Clip to the stage with the instance name "image".
Now open the actions for the first frame on the stage and paste:
//import the blur filter class to use it on our Movie Clip
import flash.filters.BlurFilter;
//the starting blur in X and Y
var blur_X = 10;
var blur_Y = 10;
//the quality of the blur
var quality = 5;
//create a filter object with the properties above
var filter = new BlurFilter(blur_X, blur_Y, quality);
//Movie Clips use an array with all filters they have, so we create a
//new array to put our blur filter and them attach it to the Movie Clip
var filterAr = new Array();
//assign the blur filter to the first element of our filters array
filterAr[0] = filter;
//now we attach our array to the array of the Movie Clip
image.filters = filterAr;
_root.onEnterFrame = function()
{
//if the mouse if over the image
if (image.hitTest(_xmouse, _ymouse, true))
{
//if the blurX property of the Movie Clip's blur filter is not 0 (minimum)
if (image.filters[0].blurX != 0)
{
//decrease the blur effect
blur_X -= 1;
blur_Y -= 1;
//create a new filter with the new properties
filter = new BlurFilter(blur_X, blur_Y, quality);
//clean the array of any filter
filterAr = new Array();
//attach the blur filter to the array
filterAr[0] = filter;
//then attach the array to the Movie Clip
image.filters = filterAr;
}
} else {
//if the blurX property of the Movie Clip's blur filter is not 10 (maximum)
if (image.filters[0].blurX != 10)
{
//increase the blur effect
blur_X += 1;
blur_Y += 1;
//create a new filter with the new properties
filter = new BlurFilter(blur_X, blur_Y, quality);
//clean the array of any filter
filterAr = new Array();
//attach the blur filter to the array
filterAr[0] = filter;
//then attach the array to the Movie Clip
image.filters = filterAr;
}
}
}
Test your code (Ctrl + Enter); this is a very cool effect, I hope you like it.
More cool tech articles from other blogs.
