Animate the GlowFilter in AS3

January 22nd, 2010

Sometimes when it comes to Flash and ActionScript, it’s the little things that can help out. I had an idea for something that would use the glow filter when you hovered over certain objects. The first way to do this that popped into my head was to create a movieclip in Flash, add a glow filter to it using the Properties panel and then tweening the glow’s strength from 0% to 250% to get the effect I wanted. The ActionScript would be pretty simple, MOUSE_OVER has a gotoAndPlay frame 2. But there are a few issues with this. First, when you hover over the movieclip, our glow will go from zero to full strength no matter what, even if the cursor leaves it while it’s halfway there. Second, making any adjustments means going into the movieclip and adjusting the filter on 2 or more keyframes. The first issue we could fix with something like Tweener or Gtween, but that doesn’t solve the second issue and we have to learn how to use one of these tweening libraries. The easiest way to solve both of these issues is to add and control our filter with built in ActionScript features.

I want to keep this short, so I’m not going to go through what every filter does and what each filter’s properties are. You can learn all that in this great post at Republic of Code.

We’ll just give a movieclip that’s on the stage a glow filter and then we’ll animate it. So, put something on the stage, it can be a box or anything you want. I made a green Atari style robot in Illustrator and brought into Flash as a png. My movieclip’s instance name is robot but you can call yours whatever you want. Make a new layer and put this code on that layer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//We have to import the filters so we can use them
import flash.filters.*;

//This creates a new GlowFilter that we can then assign to a movieclip on the stage
var robotGlow:GlowFilter = new GlowFilter();
//The color of the GlowFilter
robotGlow.color = 0x138613;
//The size of the filter on the x-axis
robotGlow.blurX = 50;
//The size of the filter on the y-axis, these don't have to be the same
robotGlow.blurY = 50;
//Setting the alpha of our filter to zero to start off with
robotGlow.alpha = 0;
//Assigning the GlowFilter to the robot movieclip
robot.filters = [robotGlow];
//This will tell our filter when to turn on and off
var glow:Boolean = false;

//Our listeners
robot.addEventListener(MouseEvent.MOUSE_OVER, addGlow);
robot.addEventListener(MouseEvent.MOUSE_OUT, removeGlow);
addEventListener(Event.ENTER_FRAME, increaseGlow);

//This function sets glow to true which turns on the glow when the mouse cursor is over our movieclip
function addGlow(e:MouseEvent):void
{
    glow = true;
}

//This turns off the glow when the mouse cursor leaves the movieclip
function removeGlow(e:MouseEvent):void
{
    glow = false;    
}

//This checks the status of glow and turns on and off our glow
function increaseGlow(e:Event):void
{
    if(glow == true)
    {
        //If glow = true, then it will increase the alpha of robotGlow by 0.02 each frame.
        //This number can be changed to anything between 0 and 1 depending on how fast
        //you want the glow to appear
        robotGlow.alpha = robotGlow.alpha + 0.02;
    }
    else if(glow == false)
    {
        //If glow is false, then it will decrease the alpha by 0.02
        robotGlow.alpha = robotGlow.alpha - 0.02;
    }
    //Assigns the glow filter with the new alpha to robot
    robot.filters = [robotGlow];
}

Using this code we will get this:

This code will be perfect if you want to add glow or another filter to Flash site’s navigation or something similar. Its just under 40 lines, so it’s pretty simple and easy to use.

2 Responses to Animate the GlowFilter in AS3

  1. Bill says:

    I loved your tut. How can I get these glowing objects to iterate over a bunch of thumbs imported from xml? I was able get ALL the thumbs to glow upon rollover, but not just one at a time.
    Thanks

  2. Lorie Cozort says:

    There is a lot of power in Extending MovieClip. It gives your clip clout, demanding respect from all of the lesser MovieClips on the stage. It also offers the developer more flexibility, and opens up a world of potential for your next ActionScript Flash Application. With this power and respect, comes the weight of responsibility.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>