Make Glowing Edge Effect with Glow Filter in Flash

Make Glowing Edge Effect with Glow Filter in Flash

In this tutorial we will make a glowing edge effect, which is very popular in Flash. You can use this effect on banners or games, the effect will be applied when you move your mouse on the images.

 

First, you need to download the resources below to use in this tutorial:

 

+ The background banner:

 

glowing_edge_background

 

 

+ Images (to place on the background banner and to make effect with):

 

glowing_edge_sample1         glowing_edge_sample2          glowing_edge_sample3

Download these images and you are ready to go!

 

Step 1: Go to File>Import>Import to Library to import above images to your Library

 

glowing_edge_1

 

Step 2: Resize your document to fit with the banner. In this case, our background banner is 593px width x 203 px height so we will resize our document to that size. We also increase the Frame Rate to 24. Press Ctrl-J to open up your Document Properties dialog box and use these values:

 

 glowing_edge_glow_filter_2

 

Step 3: Place the background banner to your document, make sure it fit with your background.

 

 glowing_edge_glow_filter_3

(You can adjust the background banner to fit with your document by going to Window>Align and select Align left edge and Align top edge)

Step 4: Next create a new layer, name it Img1Effect and put your first image onto the 1st block

glowing_edge_glow_filter_4

Step 5: Click on your first image to make sure it is being selected, press F8 to convert it into a movie clip. Click OK

glowing_edge_glow_filter_5

Step 6: Press Ctrl-F3 to open up the Properties dialog, in the Instance Name textbox, type in mc_1

glowing_edge_glow_filter_6

Step 7: Click on the frame 1 of the Img1Effect layer, press F9 to open up the Actions panel, put the following code into it:

import flash.filters.GlowFilter;

var glowEffect:GlowFilter = new GlowFilter(0xFFFFFF,50,0,0,2,3,false,false);

mc_1.filters = [glowEffect];

//Apllied when you move your mouse on the image

mc_1.onRollOver = function() {

this.onEnterFrame = function() {

glowEffect.blurX += (50-glowEffect.blurX)/6;

glowEffect.blurY = glowEffect.blurX;
mc_1.filters = [glowEffect];
}
}
//Applied when you move your mouse out of the image

mc_1.onRollOut = function() {
this.onEnterFrame = function() {
glowEffect.blurX += (0-glowEffect.blurX)/6;
glowEffect.blurY = glowEffect.blurX;
mc_1.filters = [glowEffect];

 

// When blurX property is smaller than 11 we delete it

 if(glowEffect.blurX < 11) {
glowEffect.blurX = 0;
glowEffect.blurY = glowEffect.blurX;
mc_1.filters = [glowEffect];
 delete this.onEnterFrame;
}
}
}

Let’s analysis the code:

First we need to import the flash.filters.GlowFilter to use the Glowing Effect. Next we declare a variable using this class:

var glowEffect:GlowFilter = new GlowFilter(0xFFFFFF,50,0,0,2,3,false,false);

Below is the prototype of this class:

GlowFilter(Color,Alpha,BlurX,BlurY,Strength,Quality,Inner,Knockout)

  • Color: Number (0xRRGGBB) = the color of the glow in hexadecimal. From 0x000000 to 0xFFFFFF – Default: None
  • Alpha: Number (0 to 100) = the alpha transparency of the glow.
  • Blur X: Number (0 to 255) = the amount of horizontal blur.
  • Blur Y: Number (0 to 255) = the amount of vertical blur.
  • Strength: determines how strong the glow will be.
  • Quality: determines the quality of glow (1,2,3)
  • Inner: true for inner glow and false for outer glow. The default value is false.
  • Knockout: if “true”, a knockout effect will be applied to the object, which means the fill of the object will disappear (full transparency) and you will see the background. The default value is false;

Next I want to explain the most difficult line of this code:

glowEffect.blurX += (50-glowEffect.blurX)/6;

This code line will gradually increase the blurX property to a value of 50. For example, the first value of blurX is 0, therefore (50-glowEffect.blurX)/6 = (50-0)/6=8.33. So next time the value of blurX is 8.33. When this code is run the second time, (50-glowEffect.blurX)/6 = (50-8.33)/6=6.9 and the blurX property will have a value of 8.33 + 6.9 = 15.23. This value continues growing to reach 50 (notice the next increment is smaller than the previous one). Let’s see what happens at this time:  (50-glowEffect.blurX)/6 = (50-50)/6=0 -> The value of blurX will remain the same.

By this way, you can also make the glowing effect decrease to 0 by this code:

 glowEffect.blurX += (0-glowEffect.blurX)/6;

Continue to work with other images until you get the final result. You should use three different glowEffect variables to make sure they don’t affect each other.

Now let’s have a look at the final result:

 

 

You can try adding some sound or changing the color of the glowing effect…