 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: + Images (to place on the background banner and to make effect with):   
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 
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:  Step 3: Place the background banner to your document, make sure it fit with your background.  (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 
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 
Step 6: Press Ctrl-F3 to open up the Properties dialog, in the Instance Name textbox, type in mc_1 
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...
Download fla file |
