0

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.

yovetichg
  • 1
  • 3
  • is there any more code? The code posted here should work fine without flickering unless there's something else that's bouncing between states. The more you show the better. – J_A_X May 24 '11 at 21:21
  • What happens if you wrap everything in a top level Group? I notice you have a comment relating to flickering, but if I'm not mistaken that Rect needs to go in a Group to be "hitable". I'm not 100% sure on those mechanics, but I've seen it done that way in a few of the default skins... – drkstr May 24 '11 at 23:38

1 Answers1

0

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!

yovetichg
  • 1
  • 3