« How we learned to live with the (dot com) bomb | Main | Article... about moi ?! »

Flash 8 filters

One of the biggest new features of Flash 8 is the filter and blending modes. Although the code required for scripted effects using filters can be daunting for the beginner (and let's face it, theres no end of sites currently showing ActionScript heavy Flash 8 effects, so I dont think I need to go into that here), here's a few script free examples for the don't-do-scripting Flash designers to pore over (sample files included)...

When Photoshop first started supporing layered blend modes and began going in for filtered effects bigtime, the world was full of tutorials showing you how to create various text effects. (Un)luckily, many of these effects are still around online, so I thought it would be a good idea to try to recreate many of them with Flash 8. Waddaya know, most of them worked as well. Here's a selection.

Selection of Flash text effects, based on Photoshop tutorials

All the above effects started off with the same sans font. Each text effect has Flash filters applied at runtime, so there is little additional download caused by these effects. Because the effects are applied at runtime, you can use the text effects on dynamic text (such as user input textfields).
You can download the source FLA file as a zip (5k) here. Note that this is a Flash 8 Pro specific file, and it will not open in anything else.

Once you have the FLA open, you can see how each text effect was created by clicking on the text on the Flash stage and viewing the filters tab of the Properties panel.

OF course, text effects are cool as a learning device, but they are not that practical... and other designers will be prone to laughing openly in the streets at you (and perhaps fart in your general direction) if you use text effects to the same extent as the above example in a real design.

What is needed in design work is a less-is-more approach. The Flash menu below is an example of this.

Flash menu using filter effects


The 3D buttons are created with nothing more than a white circle with a couple of filters applied to it. You can see this menu in operation in the swf below (you may see a blank space if you do not have the Flash 8 player installed), or you can see a working example of this file in a new browser here (requires the Flash 8 player to be installed), and the source files here (zip file, 5K). Note that the FLA is again Flash 8 Pro specific.




The buttons will change due to user interaction (they have different appearances for the up, over and down states). These changes are caused by changing the filter effects - the physical button graphic actually remains the same. This is of course a very powerful trick when designing animated user interfaces. Changing filter effects rather than creating new graphics results in very bandwidth friendly components.

Thus, although it's totally possible to go over the top with filter effects (resulting in a site that will look so yesterday by tomorrow, once everyone knows the trickery), careful use of filter effects can create low bandwidth graphics that look great despite their small size. Additionally, filter effects can be added via a quick couple of clicks, so the amount of time needed to create something like the menu above has gone down from hours to seconds when you use Flash 8.

This entry is based on work carried out for the book Foundation Flash, and a fuller tutorial on these effects can be found in that book.

Posted by motiongraphics on September 15, 2005 11:17 PM

Comments
Comment by Anonymous

good evening. yea i'm annoyed because i've been fooling with flash pro 8 for the last 3 hours. i've made buttons, graphics and movie clips. but when i check the actions tab or the properties tab, there is no filters ANYWHERE. do i need to download them or what is going on here????

Posted on August 16, 2007 05:06 AM

Post a comment




Remember Me?

(you may use HTML tags for style)