How do i 'gray' picture/object in flex 4

Question

Hi All,
Is there a way to make a picture 'gray' in Flash Builder? For example i have a png color picture and i want to 'take out the colors' and show it grayed.
Any ideas?

Answer 1

animated code
<?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/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<s:Animate target="{gs_filter}" id="loop" repeatCount="1" duration="3000">
<s:SimpleMotionPath property="scale" valueFrom="0.00" valueTo="1.00"/>
</s:Animate>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.filters.ShaderFilter;
[Embed(source="GreyScale.pbj")] private var GrayScaleClass:Class;
private var gs_filter:ShaderFilter = new ShaderFilter(new GrayScaleClass());
private function changeColor():void
gs_filter.scale=0.01;
img.filters = [gs_filter];
loop.play();
protected function hs_changeHandler(event:Event):void
gs_filter.scale=[hs.value/100];
]]>
</fx:Script>
<mx:Image id="img" x="85" y="83" width="305" height="229" source="flower.jpg"/>
<s:Button x="85" y="27" label="Add Filter" click="changeColor()"/>
<s:HSlider id="hs" x="86" y="339" width="303" minimum="1" maximum="100" liveDragging="true" change="hs_changeHandler(event)"/>
</s:Application>