Flex 4 custom TextInput skin & # 8594; will the new graphic darken for some reason?

Flex 4 / AS3: I created a custom skin for TextInput by choosing New-> MXML Skin and choosing "TextInput - spark.components" as the Host component. Therefore, the "default skin class for the Spark TextInput component" became the starting point.

In a new skin (called "textinput_skin") I added a new visual that should appear to the left of the text in the text input.

The button shape should look something like this: http://www.adobe.com/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_2.adimg.mw.125.jpg/1279877300467.jpg (because that I copied the code for drawing it from the Adobe example).

Instead, inside my TextInput, it looks like this: http://i.imgur.com/8aWE7HB.png

This is my code in a custom TextInput skin (most of them are new now, but I added a new visual):

<!-- border - NOT NEW STUFF --> 
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>     
        <!--- @private -->
        <s:SolidColorStroke id="borderStroke" weight="1" />
    </s:stroke>
</s:Rect>

<!-- fill - NOT NEW STUFF -->
<!--- Defines the appearance of the TextInput component background. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- @private Defines the background fill color. -->
        <s:SolidColor id="bgFill" color="0xFFFFFF" />
    </s:fill>
</s:Rect>

<!-- shadow - NOT NEW STUFF -->
<!--- @private -->
<s:Rect left="1" top="1" right="1" height="1" id="shadow">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.12" />
    </s:fill>
</s:Rect>

<s:Group> <!-- NEW PART: group with horizontal layout, to get graphical element to the left of the text in the text input -->
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

    <s:Group> <!-- a second group that defines the 'image' shape and interior text (looks like a green rect with rounded corners and text inside)'
        <!-- border and fill -->
        <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
            <s:fill>
                <s:SolidColor color="0x77CC22"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="0x131313" weight="2"/>
            </s:stroke>
        </s:Rect>

        <!-- highlight on top -->
        <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" height="50%">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
                    <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- text -->
        <s:Label text="txt" color="0xFFFFFF" 
                 textAlign="center"
                 verticalAlign="middle"
                 horizontalCenter="0" verticalCenter="1"
                 left="6" right="6" top="6" bottom="6" 
                 />
    </s:Group>

    <!-- text - NOT NEW STUFF - the normal textDisplay element for the Text Input -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
                        verticalAlign="middle"
                        widthInChars="10"
                        left="1" right="1" top="1" bottom="1" />
</s:Group>

<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
<s:Label id="promptDisplay" maxDisplayedLines="1"
            verticalAlign="middle"
            mouseEnabled="false" mouseChildren="false"
            includeIn="normalWithPrompt,disabledWithPrompt" 
            includeInLayout="false"
            />

      

        
        
        
      

    

And I am using a skin like:

<s:TextInput skinClass="model.textinput_skin" fontFamily="Arial" id="textinputid" name="item3" visible="true" editable="true" />            

      

        
        
        
      

    

The problem is the graphic is fading. It looks like it might have an alpha 1, or there is another transparent element in front of it. As you can see in the code, I made my text color 0xFFFFFF, but it clearly shows up as darker than white.

Can anyone help me determine what will darken my element?

By the way, I know there is a "shadow" element. But in updateDisplayList (), the shadow is only set visible if borderVisible == true. I tried setting borderVisible = false and I tried to completely remove the shadow element from the skin. It's not a problem.

Also, at some point I used an image instead of drawing the shape programmatically. Even the image was darkened.

Many thanks.