RSS link icon

.

Applying filters with AS3


In this Flash actionscript 3.0 tutorial you will see how to apply some filters like glow and dropshadow to an object with a mouse click in actionscript, using an eventlistener.

The first thing we need to do is prepare a movieclip, so make some object to apply this effect to I did a blue ball as you can see above. Then right click it and convert it to a movieclip.

Now go to the properties panel and give it an instance name I named mine "ball".

actionscript 3 adding filters

That's all we need to do on the stage so open the actionscript panel and we are ready to do some actionscripting, I have made all the description text inline with the code, so you can just copy and paste the code into your own flash project and it should work.

All comments are with "//" so they wont interrupt the code in flash.

//First we declare two filter instances one glowfilter and naming it "filt"
//the other is a dropshadow filter and we name it "filt_shadow" 
var filt:GlowFilter = new GlowFilter;
var filt_shadow:DropShadowFilter = new DropShadowFilter;

//here we add some properties to the two filters, the glow filter we give a color. 
filt.color = 0xFF0000;

//and how much it should blur. 
filt.blurX = 7;
filt.blurY = 7;

//then the dropshadow filter, also how much it should blur on the object. 
filt_shadow.blurX = 4;
filt_shadow.blurY = 4;

//and finally an alpha, the alpha goes from 1 to 0, 1 being fully visible and 0 is transparent, then of cause .5 is just in between. 
filt_shadow.alpha = .4;

//here we add two eventlisteners to the ball, to listen to when the mouse button is down and when its released again,
//if the mouse is down we call the function "dragMovie" and if the mouse is up we call the "dropMovie". 
ball.addEventListener(MouseEvent.MOUSE_DOWN, dragMovie);
ball.addEventListener(MouseEvent.MOUSE_UP, dropMovie);

//this is the dragMovie function
function dragMovie(event:MouseEvent):void
{
    //tells flash to start dragging the object we refer to. 
    this.startDrag();
    //this line adds our two filters to the object, notice we use [ ] and not ( ), also separate the two filters by a comma. 
    this.filters = [filt,filt_shadow];
}

//this is the dropMovie function. 
function dropMovie(event:MouseEvent):void
{
    //tells flash to stop dragging the object. 
    this.stopDrag();
    //setting the filters to none. 
    this.filters = [];
}

I hope you can see how easy it actually is to use actionscript when we break down the code into separate lines. If not, just ask questions in the comments section.


Skcool says: 2008-07-08

Thx, this tutorial really helped

Admin Bob says: 2008-06-03

Then you just take the code from inside the function called dragMovie and place outside. this should add it permanent. if you have any problems with it just send me an email instead, its easier to help that way. :-)

^_~ says: 2008-06-01

Thanks for the tutorial, I was looking every where for somethng like this...but just a question. Say that I just wanted to have the glow on all the time (not just when you clicked, and no drop shadow) What would I do/remove

Adhika says: 2008-05-17

Wow! this is what IChr(34)ve been looking for!! :D reading the help doesnChr(34)t help at all

Kixx says: 2008-05-13

Thx , really helped me =)

Edward Lee says: 2008-04-03

Really great tutorial... Please, please, please keep them coming! thanks :)

Admin Bob says: 2008-04-05

Sounds great Trevor, its always good to hear when people find my work useful.

Trevor says: 2008-03-31

Thanks for this great explaination. Worked a treat. I was looking for the code to do this but on a MovieClip created in a class and this lead me in the right direction. Just needed to add [as]import flash.filters.DropShadowFilter;[/as] in my class and voila. Job done. Thanks.

Marina says: 2008-03-03

ItChr(34)s work! Thanks)
make money with photoshop - book