flex drawing different gradient colors of objects

Question

I want to have a rectangle which has three different colors in flex. I used spark components like fill and gradiententry, but could not get three colors side by side like this.

black-red-black of ratio 0.2 0.8 0.2. I could get only two colors working but not this ratio. Also i want solid colors on rectangle and not gradient.

<s:Rect id="rectangle1" height="100" width="300">
    <s:fill>
        <s:LinearGradient>
            <s:GradientEntry color="black" ratio="0.5"    alpha="1"/>
            <s:GradientEntry color="red"  ratio="0.5" alpha="1"/>
    </s:LinearGradient> 
    </s:fill>
</s:Rect>

Answer 1

Aren't you saying you want 3-rectangles? You want a gradient, but then you state you want solid colors (no gradient).

You mean like this?

<?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"
               minWidth="955"
               minHeight="600">

    <s:Rect id="rectangle1"
            height="15"
            width="300">
        <s:fill>
            <s:SolidColor color="0x0" />
        </s:fill>
    </s:Rect>

    <s:Rect id="rectangle2"
            top="15"
            height="70"
            width="300">
        <s:fill>
            <s:SolidColor color="0xff0000" />
        </s:fill>
    </s:Rect>

    <s:Rect id="rectangle3"
            top="85"
            height="15"
            width="300">
        <s:fill>
            <s:SolidColor color="0x0" />
        </s:fill>
    </s:Rect>

</s:Application>

Otherwise, you can kind of accomplish your goal like this:

<?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"
               minWidth="955"
               minHeight="600">

    <s:Rect id="rectangle1"
            height="100"
            width="300">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x0" ratio="0" />
                <s:GradientEntry color="0x0" ratio=".2" />
                <s:GradientEntry color="0xff0000" ratio=".2" />
                <s:GradientEntry color="0xff0000" ratio=".8" />
                <s:GradientEntry color="0x0" ratio=".8" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

</s:Application>