Flex Drop Shadow Filter at Runtime

I have been working much more with Flex lately and I am quickly becoming an addict. With that said I hope to start showing off some more tutorials in the Flex/ActionScript 3 department. Please forgive me if some of these are useless to you. In this example I want to look at applying a drop shadow filter to an image at runtime.

The first thing we need to do is add our image and a button to the stage. The button is going to allow us to toggle the filter at runtime.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" backgroundColor="#dddddd"> <mx:Image id="myImage" source="clevelandmain.jpg"/> <mx:Button id="btnToggle" label="Toggle Drop Shadow Filter" /> </mx:Application>

Next we have init method that is called when our creationComplete event is dispatched. In this event we are going to add a Click event to our button. I know this can be done on the button but I just prefer doing things in AS.

<mx:Script> <![CDATA[ import flash.filters.DropShadowFilter; private function init():void { btnToggle.addEventListener(MouseEvent.CLICK,toggleDropShadow); } ]]> </mx:Script>

Last we need to define a method named toggleDropShadow. When this method is called we refer to the filters property of our image. The filters property holds an array of filters. For this example we are just checking to see if there is any length to the array as we are only defining 1 filter. If there is no length we create our filter and assign a couple properties to the drop shadow. If there is length we just set it to null. <mx:Script> <![CDATA[ import flash.filters.DropShadowFilter; private function init():void { btnToggle.addEventListener(MouseEvent.CLICK,toggleDropShadow); } private function toggleDropShadow(event:MouseEvent):void { var ds:DropShadowFilter = new DropShadowFilter(); if(myImage.filters.length == 0){ ds.distance = 5; ds.alpha = .4; myImage.filters = [ds]; } else { myImage.filters = null; } } ]]> </mx:Script>

Click on the image to view the example.