customized TabBar buttons flickering on mouseover/mouseout

Question

I am using a custom skin on Flex's TabBar, and specifically the skin the controls ButtonBarButton. The width of the button is a variable size depending on the text it contains, and background of the button is an image that only displays on the selected states of the button.

The following is my MXML for the skin:

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" stateGroups="overStates" />
    <s:State name="down" stateGroups="downStates" />
    <s:State name="disabled" stateGroups="disabledStates" />
    <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<!-- invisible background to prevent "machine gun" flickering on edge of button -->
<s:Rect top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:SolidColor color="0xFFFFFF"
                      alpha="0.0"/>
    </s:fill>
</s:Rect>
<s:Group>
    <s:layout>
        <s:HorizontalLayout gap="0"/>
    </s:layout>

    <!-- left edge of button -->
    <s:BitmapImage source.selectedStates="images/btn_left.png"
                   top="0" bottom="0" left="0"
                   width="6"/>
    <!-- background and text of button -->
    <s:Group>
        <!-- layer 1: image -->
        <s:BitmapImage source.selectedStates="images/btn_bg.png"
                       fillMode="repeat"
                       left="0" right="0"/>
        <!-- layer 2: text -->
        <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
        <s:Label id="labelDisplay"
                 textAlign="center"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 horizontalCenter="0" verticalCenter="1"
                 left="10" right="10" top="2" bottom="2">
        </s:Label>
    </s:Group>
    <!-- right edge of button -->
    <s:BitmapImage source.selectedStates="images/btn_right.png"
                   top="0" bottom="0" right="0"
                   width="6"/>
</s:Group>

The button flickers on mouseover and mouseout. Does anyone know if I am missing a state for this type of button, or if I am incorrectly applying the source of the button?

As for more code, the TabBar component is layed out as follows:

<s:Group>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:Label text="Title:"/>
        <s:Label text="Sign in"/>

    </s:Group>
    <s:TabBar dataProvider="{navigationList}"
              chromeColor="#FFFFFF"
              skinClass="skins.NavigationBarSkin"/>
</s:Group>

and the overridden TabBarSkin has the following snippet:

<!-- layer 1 background -->
<s:Rect id="backgroundFill" topLeftRadiusX="4" topRightRadiusX="4" top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:LinearGradient>
            <s:GradientEntry color="0x625454"/>
            <s:GradientEntry color="0x3F3536"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" 
             top="10" left="15" right="15" bottom="0">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="10" />
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ButtonBarButton skinClass="skins.NavigationBarButtonSkin" />
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

I tried wrapping the entire block in a Group tag, but to no avail. The invisible Rect does indeed fix the "machine gun" flickering that occurred when the mouse hovered over any edge of the button, but there is still a flicker on every mouse enter and mouse leave of each button.

Answer 1

Figured it out:

The key was to set the source of the BitmapImage via the @Embed method.

<s:BitmapImage source.selectedStates="@Embed('images/btn_left.png')"/>

I should have remembered this from my days working in Flash. If the Embed annotation is not used, the resource is linked, and therefore is fetched every time a state is changed, i.e. mouse over and mouse out.

Thanks for the speedy replies though!