Problem
You want to display a color image as grayscale (black and white) using MXML.
Solution
Declare a <mx:ColorMatrixFilter/> tag inside the <mx:filter> property tag of your Image. Configure the ColorMatrixFilter instance to use the following matrix values: [0.3086, 0.6094, 0.082, 0, 0, 0.3086, 0.6094, 0.082, 0, 0, 0.3086, 0.6094, 0.082, 0, 0, 0, 0, 0, 1, 0]
Detailed explanation
The sample application below demonstrates this technique. It also shows slight variations to consider. The matrix applied to the first image produces a more aesthetically pleasing grayscale conversion and is similar to the result you would get when converting a color image to grayscale in a graphics program like Photoshop. The matrix applied to the second image is a "pure" grayscale conversion.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
>
<mx:Image
id="photo1"
source="@Embed('mountains.jpg')"
>
<mx:filters>
<mx:ColorMatrixFilter
matrix="[0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0]"
/>
</mx:filters>
</mx:Image>
<mx:Image
id="photo2"
source="@Embed('mountains.jpg')"
>
<mx:filters>
<mx:ColorMatrixFilter
matrix="[0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0, 0, 0, 1, 0]"
/>
</mx:filters>
</mx:Image>
</mx:Application>
