Using filters in Flex -- Flex 2.01

You can use Adobe Flash filters to apply style-like effects to Flex components, such as Labels and Text. You can apply filters to any visual Flex component that is derived from UIComponent. Filters are not styles because you cannot apply them with a style sheet or the setStyle() method. The result of a filter, though, is often thought of as a style.

Filters are in the flash.filters.* package, and include the DropShadowFilter, GlowFilter, and BlurFilter classes. To apply a filter to a component with MXML, you add the flash.filters package to the local namespace. You then set the value of the Flex component's filters property to the filter class. The filters property is a property inherited from the DisplayObject class.

The following example applies a drop shadow to a Label control by using expanded MXML syntax and inline syntax:

<?xml version="1.0"?>
<!-- styles/ApplyFilterInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash="flash.filters.*">
  <!-- Apply filter using MXML syntax to set properties. -->
  <mx:Label text="DropShadowFilter" fontSize="20">
    <mx:filters>
     <flash:DropShadowFilter distance="10" angle="45"/>
    </mx:filters>
  </mx:Label>

  <!-- Apply filter and set properties inline. -->
  <mx:Label text="DropShadowFilter (inline)" fontSize="20" 
     filters="{[new DropShadowFilter(10, 45)]}"/>
</mx:Application>

You can apply filters in ActionScript. You do this by importing the flash.filters.* package, and then adding the new filter to the filters Array of the Flex control. The following example applies a white shadow to the Label control when the user clicks the button:

<?xml version="1.0"?>
<!-- styles/ApplyFilterAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
     import flash.filters.*;
  
     public function addFilter():void {
        // First four properties are distance, angle, color, and alpha.
        var f:DropShadowFilter = new DropShadowFilter(5,30,0xFFFFFF,.8);
        var myFilters:Array = new Array();
        myFilters.push(f);
        label1.filters = myFilters;
     }
  </mx:Script>
  <mx:Label id="label1" text="ActionScript-applied filter"/>
  <mx:Button id="b1" label="Add Filter" click="addFilter()"/>
</mx:Application>

If you change a filter, you must reassign it to the component so that the changes take effect. The following example changes the color of the filters when you click the button:

<?xml version="1.0"?>
<!-- styles/FilterChange.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createFilters()">
  <mx:Script><![CDATA[ 
     import flash.filters.*;
  
     private var myBlurFilter:BlurFilter;
     private var myGlowFilter:GlowFilter;
     private var myBevelFilter:BevelFilter;
     private var myDropShadowFilter:DropShadowFilter;
  
     private var color:Number = 0xFF33FF;
  
     public function createFilters():void {
        
        myBlurFilter = new BlurFilter(4, 4, 1);

        myGlowFilter = new GlowFilter(color, .8, 6, 6, 2, 1, 
            false, false);

        myDropShadowFilter = new DropShadowFilter(15, 45, 
            color, 0.8, 8, 8, 0.65, 1, false, false);

        myBevelFilter = new BevelFilter(5, 45, color, 0.8, 
            0x333333, 0.8, 5, 5, 1, BitmapFilterQuality.HIGH, 
            BitmapFilterType.INNER, false);
  
        applyFilters();
     }
  
     public function applyFilters():void {
        rte1.filters = [myGlowFilter];
        b1.filters = [myDropShadowFilter];
        dc1.filters = [myBevelFilter];
        hs1.filters = [myBlurFilter];
     }

     public function changeFilters():void {
        color = 0x336633;
        createFilters();
     }
  ]]></mx:Script>

  <mx:RichTextEditor id="rte1"/>

  <mx:DateChooser id="dc1"/>

  <mx:HSlider id="hs1"/>

  <mx:Button id="b1" label="Click me" click="changeFilters()"/>


</mx:Application>