Filters in Flex4


 

Filters in Flex4

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

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"

0

fontFamily="verdana"

color="#777B12">

<!-- This is GlowFilter -->

1

<s:filters>

<s:GlowFilter color="#eaf041"

alpha="0.8"

2

blurX="4" blurY="4"

inner="false"

strength="10"

3

quality="2"/>

</s:filters>

</s:Label>

4

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

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

fontWeight="bold"

5

fontFamily="verdana"

color="#38D163">

<!-- This is BevelFilter -->

6

<s:filters>

<s:BevelFilter angle="45"

highlightColor="#FF0000"

7

distance="6"

shadowColor="#808080"

quality="4"/>

8

</s:filters>

</s:Label>

</s:Panel>

9

</s:Application>

Output:

Running Application:

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

0

Download this code

Ads