Filters in Flex4

Home Tutorial Flex Flex4 Components Filters in Flex4

Filters in Flex4
Posted on: June 22, 2010 at 12:00 AM

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">

<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">

<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">

<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">

<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

Related Tags for Filters in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics