Using filters in Flex
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 filter class to the component's filters Array. The filters Array is a property inherited from the DisplayObject class. It contains any number of filters you want to apply to the component.
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">
<!-- Apply filter using MXML syntax to set properties. -->
<mx:Label text="DropShadowFilter" fontSize="20">
<mx:filters>
<mx: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>
The executing SWF file for the previous example is shown below:
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><![CDATA[
import flash.filters.*;
public function toggleFilter():void {
if (label1.filters.length == 0) {
/* The first four properties of the DropShadowFilter constructor 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;
} else {
label1.filters = null;
}
}
]]></mx:Script>
<mx:Label id="label1" text="ActionScript-applied filter."/>
<mx:Button id="b1" label="Toggle Filter" click="toggleFilter()"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
You cannot bind the filter properties to other values.
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>
The executing SWF file for the previous example is shown below:
Some Flex containers and controls have a dropShadowEnabled property. You can set this property to true to add a drop shadow filter to those components. However, when you use this property, the Flex components draw their own drop shadows for performance reasons. They copy the edges of the target and then draw the shadow onto a bitmap, which is then attached the target. If the target component is rotated, the drop shadow might appear jagged because of the way rotated vectors are rendered.
To avoid this and have smooth drop shadow filters on rotated components, you use the DropShadowFilter class, as described in the examples in this section.
The following example shows the difference between drawing a filter with the dropShadowEnabled property and using the DropShadowFilter class:
<?xml version="1.0" encoding="utf-8"?>
<!-- styles/SmoothFilter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="0xFFFFFF"
layout="absolute"
>
<mx:Style>
Canvas {
borderStyle:solid;
cornerRadius:10;
borderColor:#000000;
backgroundColor:#FFFFFF;
}
</mx:Style>
<mx:Script>
<![CDATA[
private function getBitmapFilter():DropShadowFilter {
var distance:Number = 3;
var angle:Number = 90;
var color:Number = 0x000000;
var alpha:Number = 1;
var blurX:Number = 8;
var blurY:Number = 8;
var strength:Number = 0.65;
var quality:Number = BitmapFilterQuality.LOW;
var inner:Boolean = false;
var knockout:Boolean = false;
return new DropShadowFilter(distance, angle, color, alpha,
blurX, blurY, strength, quality, inner, knockout);
}
]]>
</mx:Script>
<!-- This rotated canvas applies a filter using the dropShadowEnabled
property. As a result, the edges are slightly jagged. -->
<mx:Canvas id="canvas1"
dropShadowEnabled="true"
creationComplete="canvas1.rotation=-10"
x="50" y="80"
width="400"
height="300"
/>
<!-- This rotated canvas applies a bitmap filter. As a result,
the edges are smoother. -->
<mx:Canvas id="canvas2"
filters="{[getBitmapFilter()]}"
creationComplete="canvas2.rotation=-10"
x="50" y="420"
width="400"
height="300"
/>
</mx:Application>
The executing SWF file for the previous example is shown below:
For information about using filters with chart controls, see Using filters with chart controls.