O'Reilly logo

Learning Flex 4 by Elijah Robison, Alaric Cole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Filters

In previous examples you applied effects by declaring an effect, assigning a target or multiple targets as an Array to that effect, and then calling the effect’s play() method. With filters, however, while you define their instances in your Declarations section, you bind them directly to your visual components as members of their filters property, which is also an Array. This is similar in concept, yet backward compared to the previous effects examples you’ve seen.

Example 14-17 contains a quick example to demonstrate setup and application of filter effects, and Figure 14-9 shows the result.

Example 14-17. Applying a DropShadowFilter effect to the FXG graphic

<?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"
    xmlns:local="*"
    height="100%" width="100%">

<fx:Declarations>

    <s:DropShadowFilter id="dropShadow" distance="12"/>

</fx:Declarations>

<local:CoolTriangle id="coolTriangle" horizontalCenter="0" verticalCenter="0"
    filters="{[dropShadow]}"/>

</s:Application>
The triangle graphic with a DropShadowFilter

Figure 14-9. The triangle graphic with a DropShadowFilter

Note

This example uses the FXG graphic we discussed in the sidebar “FXG Graphics” on page 288. If you want to keep things simple by using our graphic, just download it off the Web and save it in your project’s src directory. You can get it ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required