Abut Filters

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.











text="DropShadowFilter (inline)"
fontSize="20"
filters="{[new DropShadowFilter(10, 45)]}"
/>



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:



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;
}
}
]]>




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:




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();
}
]]>







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:



backgroundColor="0xFFFFFF"
layout="absolute"
>

Canvas {
borderStyle:solid;
cornerRadius:10;
borderColor:#000000;
backgroundColor:#FFFFFF;
}



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);
}
]]>



dropShadowEnabled="true"
creationComplete="canvas1.rotation=-10"
x="50" y="80"
width="400"
height="300"
/>


filters="{[getBitmapFilter()]}"
creationComplete="canvas2.rotation=-10"
x="50" y="420"
width="400"
height="300"
/>

Calling Javascript function from Flex Application

There are various ways of calling javascript from your flex application ie. navigateToURL, ExtenalInterface. ExternalInterface is most elegent and simple way of calling javascript from flex application.

ExternalInterface API has also support browser checks. ExternalInterface class has static method call(javascriptFunctionName, ArgumentList, …) to which you can specify the method you need to call.

Success of the call method depends on the HTML pages with allowScriptAccess attribute which is within