Saturday, 24 October 2009

Add Blur filter to movie clip in AS3

The Blur filter in Flash can be added using either the filters panel in the interface, or using Actionscript code. I will be showing you both methods of adding blur filters to movie clips. Firstly, the blur filter is used to soften the edges and details of an object so applying a blur can give an object a smoother appearance.


Blur filter using the filters panel – part 1

Step 1

Open a new Flash AS3 file and select the Rectangle tool (R) and drag a rectangle shape on the stage. You can alternatively import an image onto the stage.




Step 2

Then covert the shape into movie clip by selecting F8. You need to convert an object into a movie clip/button before any filters can be applied. This because only the properties of movie clips/buttons can be changes, a primitive shape’s properties cannot be changed.


Step 3

Select the movie clip using the Selection tool (V) and then locate the filters panel as shown below. The default location for the filters panel is normally on the right side of the workspace in Flash CS4, and on the bottom of the workspace in Flash CS3.



Select the ‘Add filter’ button and choose the Blur options. You will notice inside the filters property you and adjust the height and width of the blur in pixels, and set the quality level of the blur. There are three levels of quality which are high, medium and low.



At the bottom the filters panel you can perform the following options: save a filter preset; copy filter to the clipboard; enable or disable filter; reset filter; and delete a filter.


Blur filter using Actionscript 3.0 – part 2

**Make sure you have completed steps 1 – 3 from the above before attempting part 2.

To add a blur filter in AS3 you need to add a new instance of the BlurFilter Method. This method can apply the blur filter to any display object such as movie clip, buttons, text field etc.


Step 3

Select the rectangle on the stage and give it the instance name ‘rectangle_mc’. Then on the timeline insert a new layer called Actions. Then select the first frame and hit F9 to open up the actions panel and enter the following code.

//1.
var my_bf:BlurFilter=new BlurFilter(15,15,1);
//2.
rectangle_mc.filters=[my_bf];

Code:
1. This line of code create a new instance of the of the blur filter called my_bf. The values inside the parenthesis represent the following values shown below.

BlurFilter(blurX, blurY , quality)

BlurX – The value of the horizontal blur which can range from 0 to 255.
BlurY – The value of the vertical blur which can range from 0 to 255.
Quality – The number of time to apply the filter.


2. This applies the filter to the object ‘rectangle_mc’.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP