Using Filters In Flex | Taterboy.com: Graphics, Multimedia and Such

Using Filters In Flex – taterboy
April 6th, 2009 | Filed under: ActionScript 3, Flex, Tutorials

Flash developers have been using filters on MovieClips since Flash 8. Filters in Flex it is not as easy as using Flashes Filters property panel, but they are available. Many samples show how to create filters using pure ActionScript, but these samples use good old mxml and I think are a lot easier to use. Filters can be used on most DisplayObjects and dynamic text.

There are 6 other filters that are not contained in this demo:

ColorMatrixFilter
ConvolutionFilter
DisplacementMapFilter
EffectTargetFilter
GradientBevelFilter
GradientGlowFilter

^?View Code ACTIONSCRIPT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="300" layout="vertical" backgroundGradientColors="[0x000000,0x323232]" creationComplete="init()" >
 
	<mx:Script>
		<![CDATA[
 
            private var time:Timer;
            private var count:int = 0;
 
            private function init():void{
            	time = new Timer(1000,0);
            	time.addEventListener(TimerEvent.TIMER,timeHandler);
            	time.start();
 
            }
 
            private function timeHandler(ev:TimerEvent):void{
            	count ++;
            	dynamicText.text = String(count);
            }
 
			private function filterHandler(ev:MouseEvent):void{
				var filterArr:Array = [];
 
				blurBox.selected ? filterArr.push(blur): null;
				glowBox.selected ? filterArr.push(glow): null;
				shadowBox.selected? filterArr.push(dropShadow): null;
				bevelBox.selected ? filterArr.push(bevel): null;
 
				textSample.filters = filterArr;
				dynamicText.filters = filterArr;
			}
		]]>
	</mx:Script>
	<mx:Panel id="panelSample" title="Filters Samples" color="#ffffff" 
		width="450" height="200" x="100" y="60" layout="vertical" borderAlpha="0.2" 
		horizontalAlign="center" verticalAlign="middle" >
 
		<mx:Text id="textSample" text="SAMPLE TEXT" color="0x000000" fontWeight="bold" fontSize="40" filters="{[bevel]}" />
 
		<mx:HBox horizontalAlign="center" width="100%" color="#323232">
			<mx:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
			<mx:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
			<mx:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
			<mx:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
		</mx:HBox>
 
		<mx:Text id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />
 
	</mx:Panel>
	<mx:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
	<mx:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
	<mx:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
	<mx:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7"  />
 
</mx:Application>