Tom Cornilliac

For my last AIR project and my current Flex project I’ve been using the PureMVC ActionScript framework. It’s a solid framework and on the whole I’m enjoying working with it. When using PureMVC for Flex and AIR development one of the questions I see consistently is how to create mediators for deferred components. In other words, if the view of your app uses a view stack how do you handle creating mediators on the children of the viewstack that are not created yet? Read more…

I just got out of the 360 Flex day 3 keynote, lots of great information (more on that later). At the end of the keynote Ebay announced the immediate availability of an AS3 library for its services.

“The eBay ActionScript 3.0 library provides an interface between the eBay XML API and ActionScript 3.0. This open-source library will allow developers to create novel and innovative applications leveraging both eBay’s marketplace services and Adobe’s Flash Player 9 runtime! It is written in ActionScript 3.0, so any environment using ActionScript 3.0 can use this library, including Adobe Flex 2 and Adobe Flash Pro 9.”

You can download beta 1 from http://adobe.com/go/ebaylibrary/

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)