Share on Google+Share on Google+

Filters in Flex4

Advertisement
Filters are used for effects not for style. You can use filters with MX and Spark components.

Filters in Flex4:

Filters are used for effects not for style. You can use filters with MX and Spark components. You cannot apply them with style and setStyle() method. The package of filters is spark.filters.* and mx.filters.*. You will use filters in a <mx:filters> and <s:filters> tag. You can use any number of filters in a <mx:filters> and <s:filters> tag.
There are so many filters like: DropShadowFilter, GlowFilter, BevelFilter and BlurFilter etc. In this example you can see how we can use filters for making a effect of components.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<s:Panel title="Style using Filters Example" width="402" height="260">

<s:Label text="This is a DropShadowFilter"

fontSize="24" x="20" y="24"

fontWeight="bold"

fontFamily="verdana"

color="#D79E17">

<!-- This is DropShadowFilter -->

<s:filters>

<s:DropShadowFilter distance="5" angle="45" />

</s:filters>

</s:Label>

<s:Label text="This is a BlurFilter"

fontSize="24" x="20" y="136"

fontWeight="bold"

fontFamily="verdana"

color="#19389F">

<!-- This is BlurFilter -->

<s:filters>

<s:BlurFilter blurX="2" blurY="2" quality="1"/>

</s:filters>

</s:Label>

<s:Label text="This is a GlowFilter"

fontSize="24" x="20" y="77"

fontWeight="bold"

fontFamily="verdana"

color="#777B12">

<!-- This is GlowFilter -->

<s:filters>

<s:GlowFilter color="#eaf041"

alpha="0.8"

blurX="4" blurY="4"

inner="false"

strength="10"

quality="2"/>

</s:filters>

</s:Label>

<s:Label text="This is a BevelFilter"

fontSize="24" x="20" y="187"

fontWeight="bold"

fontFamily="verdana"

color="#38D163">

<!-- This is BevelFilter -->

<s:filters>

<s:BevelFilter angle="45"

highlightColor="#FF0000"

distance="6"

shadowColor="#808080"

quality="4"/>

</s:filters>

</s:Label>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisements

Advertisement

Posted on: June 22, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.