Please install Adobe Flash
Filters have been around in flash since version 8. They are pretty easy to understand if you have used programs like photoshop. For those of you who don’t know, filters can add a kick to any of your textfields, movieclips, or buttons without having to make them in an outside program such as photoshop. In this tutorial, all filters available as of Flash CS3 will be covered. If you are making a cpu-intensive game and have a chance to pre-render the filters in a program such as photoshop, you should – adding filters at runtime is cpu-intensive.
The examples in this tutorial are here to get you started. You should play around with them as its the best way to learn.
To add a filter, you must first have a textfield, movieclip, or button to apply it to. Once created, highlight it and click on filters in the properties inspector or go to windows>>properties>>filters.
– Click to add a new filter
– Click to remove selected filter
– Click to paste copied filter(s)
– Click to copy selected filter(s)
Filter Types:
Taking it a step futher: Create golden text
If you enjoyed this tutorial or found it difficult, please contact me
Drop shadow is a popular effect used to lift the object off the page. Create some text and choose a light color.
Click the button and choose “Drop Shadow”. Several settings will appear in the properties inspector
- Blur X/ Blur Y: Spreads the effect out further from the center
- Strength: Determines how bold/strong the effect is
- Quality: Determines how choppy or smooth the effect looks
- Angle: Adjusts the angle the effect occurs at
- Distance: Changes how far the effect occurs from the center of the object
One thing to note is the 
icon next to “Blur X” and “Blur Y”. Leaving this on forces the X and Y values to be constrained, meaning they will be proportional to their original size. Unchecking this will allow you to enter any value for either blur x or blur y.
To the right of these options, you will notice three checkboxes labeled “knockout”, “inner shadow”, and “hide object”
- Knockout: This will mask the drop shadow effect and hide the regular object showing only the effect not covered by the object
- Inner Shadow: Applies the drop shadow to the inside of the text instead of the outside
- Hide Object: Hides the original object, leaving behind only the effect
We are going to create a textfield that appears to be 3D. Create a textfield with size of 32, change the font to impact, and set the color to #FF9900. Set blur x and blur y to 3, strength to 500%, quality to “high”. Leave angle and distance at their defaults. For the drop shadow color, pick either a darker orange or a complimentary color such as a deep blue. You should have something similar to the following:
A rather boring textfield now pops off the page! Be sure to play around with the settings, such as knockout and inner shadow!
Blur is a simple effect generally used to make an object appear as if it were moving very fast. Another use of the blur filter is to make a background appear out of focus.
All the options available for the blur filter were previously explained. If you need a refresher, see the drop shadow filter
Make a text field, click it. In the properties inspector, click the filter tab.
Press and select “blur” from the drop down. Leave blur x and blur y at their defaults, set quality to high. You should end up with something like this:
And there you have it, eye-straining text!
Glow is used to give off an “aura” of light, like you would see on a lightbulb. Another useful feature of glow is to add stroke to your text. I’ll cover both.
All settings for this filter were previously covered in the drop shadow filter tutorial
First I will show you how to add a simple glow effect. Make a text field of any size, and click to add a glow filter.
Set blur x and blur y to 10, strength to 200%, and quality to high. Pick any colors, you should have something like the following:
Now I am going to show you how to add a few layers of stroke, or outline, to your text. Create a textfield with size 32, use impact for the font. Set the color to #FF9900.
Click the to add a new filter, select glow. Pick a lighter orange for the color, I used #FFCC00. Set blur x and blur y to 2, strength to 1000%, and quality to high.
Click again to add yet another glow filter. Set blur x and blur y to 5, strength to 1000%, quality to high, and choose black as your color.
You should come out with this comic-book like effect:
You have now mastered the glow filter! Yay!
Bevel isn’t as powerful in flash as it is in other programs like photoshop. Bevel attempts to add an edge to your object that will catch reflected light, much like object in real life. It can be used to create some cool effects. Bevel shouldn’t be overused as it can look tacky.
There are some new settings here that weren’t previously covered.
- Shadow: The part of the object not being hit by “light”
- Highlight: Thr part of the object being hit by “light”
- Type: The style of bevel to be applied
- Inner: The bevel is applied to the inside of the object
- Outter: The bevel is applied to the outside of the object
- Full: The bevel is applied to both the inside and outside
If you don’t understand the other settings, review the drop shadow filter.
First we will use bevel for its intended purpose, to have the object catch reflected light. Create a textfield, size 32, impact as the font.
Click and select bevel. Set blur x and blur y to 2, strength to 400%, and set quality to high. Choose black as you shadow color and a light gray as your highlight. Set angle to 45 and distance to 2. Chose inner for type. You should now have an image that appears to be receiving light from the top left corner like the following:
Now remove the filter, leaving the original text box. We are going to create an easy shine effect. Add a new bevel filter, set blur x and blur y to 5, strength to 1000%, and quality to high. Choose black as your shadow and a light gray as your highlight. Set angle to 90, distance to 20, and type to inner. You should now have a shine going across the top of your text. Play around with different colors to get an effect you like:
The shine is only a small example of one of the effects you can create with the bevel filter. Combine this with other filters and the possibilities are endless.
I don’t consider gradient glow to be one of the most useful filters, but it adds to your arsenal of effects.
I’m not going to show an example for this one, I will just explain it. Back during the glow filter tutorial, we made a comic book effect by adding two different strokes to the text. The gradient glow filter basically does the same thing except it blends the two colors together. When you add this filter, you will be presented with the normal options plus a gradient box. The color on the left will be the color on the outside while the color on the right will be the inside color.
Gradient bevel is a very cool filter. Its basically the bevel filter on steroids. Instead of two colors, it allows you to specify a range of colors. The left of the gradient is the highlight and the right is the shadow. Any number of colors can be specified inbetween. I used the filter to create something it was never intended to… electric text!
Create a new textfield, size 32, impact as the font. Make the text color #CCFFFF.
Press and add the gradient bevel filter. Set blur x and blur y to 5, strength to 100%, and quality to low. I know I have set the quality to high in all the other lessons, but the quality itself can add to the effect. Making the transitions less smooth makes the lines sharper and looking more like electricity. Set angle to 45, distance to 5 and type to inner. Set all the gradient colors to #003366.
Your text should look like the following:
Now that is electrifying! Proof that filters can create fun effects when used for purposes other than what was intended..
Adjust color has fairly common options to change the appearance of an object. You can use it to tint the object etc etc. I don’t really think I need to go into detail here. If you need help, google has some great tutorials on the subject.
We will apply several filters here to create a more complex text effect. We are going to create a 3D golden text effect.
Create a textfield with size 32 text and impact as the font – set the color to #FFCC00
Click and add a bevel filter. This is going to create the hard bumpy surface seen on gold. Set blur x and blur y to 0, strength to 1000%, and quality to high. Set the shadow to white and the highlight to #FFFF00. Set angle to 45, distance to 3 and type to inner.
Click and add another bevel filter. This will add our shine. Set blur x and blur y to 5, strength to 250%, and quality to high. Set the shadow to #FFCC00 and highlight to #FFFF00. Set the angle to 45, distance to 5 and type to inner.
Click and add a glow filter. This will outline the text to help us see it better. Set blur x and blur y to 2, strength to 1000%, and quality to high. Change the color to #FF9900.
Click and add a drop shadow. this will give our text some dimension. Set blur x and blur y to 0, strength to 1000%, quality to high, angle to 45, and distance to 3. Set the color to #FF9900.
There! Save that incase of tough times…
You are now a master of basic filters! Go buy yourself a cold one.
Pop, that is……Ry very informative….great instructions, easy to follow and teaches as it goes along