Tom Cornilliac

Lately I have been spending a lot of time considering Flex application design. I work in a really small shop (two of us) and we don’t have the luxury of a Designer on staff. As a result when it comes time to make our Flex applications look muy bonito it’s yours truly who has to put on the designer hat. Since  I’m “design challenged” my options to date have been limited to CSS. Skinning is beyond my abilities as I don’t get Flash (timeline….huh?). So the Flex Style Explorer has been my designer buddy for awhile.

Yesterday while researching the depths of Flex CSS I discovered you can apply Flash Filters to Flex Components. That’s what I want to explore in this post. Flash filters can not only make your application look better but they can also improve the user experience. You could us the Glow filter to provide user feedback based on mouse movements or you might use Blur filter to direct the user’s attention to an object on screen (similar to a modal Title Window but with more options). The flash.filters package contains 13 filters you can use and combine to create some amazing styles without having to resort to skinning.

There are two methods for implementing Flash Filters in your Flex application.

1. You can create a new namespace linked to the flash.filters.* package, just like you would a Flex Component.
2. You can apply filters through ActionScript

Both of these approaches have their own benefits and it’s really up to the developer/designer as to which method to use. Let’s look at the basic syntax of each method.

<mx:Application>
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*"
    xmlns:flashFilter="flash.filters.*"&gt;

<mx:TextArea>
    width="150" height="100"
    cornerRadius="6" text="Some text"&gt;
         <mx:filters>
             <flashFilter:DropShadowFilter>
                 inner="true" distance="3"
                 angle="120" color="0x000000"
                 alpha="0.4" /&gt;
            </flashFilter:DropShadowFilter>
        </mx:filters>
</mx:TextArea>

</mx:Application>

import flash.filters.*;

private function addGlow(event:MouseEvent):void
{
    var g:GlowFilter = new GlowFilter(0x006666, 0.65, 15, 15);
    var newFilters:Array = new Array();
    newFilters.push(g);
    event.currentTarget.filters = newFilters;
}

As you can see Flash Filters are easy to implement and you don’t need any other software.

Flash Filters Demonstrated

I’ve created a very small Flex app to demonstrate both of these techniques as well as give you something to look at. View Source is enabled so right + click and select view source to download the app and view the full source.

Other Resources

• Adobe Consulting
• Flex Themes at scalenine.com
• Using Filters in Flex (livedocs)