Tag Archives: skin

Setting the disabled alpha on a Spark TextInput control in Flex 4

In a previous example, “Styling the disabled state on a Spark TextInput control in Flex 4”, we saw how you could style the disabled state on a Spark TextInput control in Flex 4 using CSS.

The following example shows how you can set the alpha of the disabled state of a Spark TextInput control in Flex 4 by creating a custom Spark TextInput skin and setting the alpha property on the disabled skin state.

Continue reading Setting the disabled alpha on a Spark TextInput control in Flex 4

Creating a toggleable MX LinkButton control in Flex 4

In a previous example, “Creating a toggleable LinkButton control in Flex”, we saw how you could create a toggleable Flex LinkButton control by extending the mx.skins.halo.LinkButtonSkin and adding custom “selectedUpSkin”, “selectedOverSkin”, “selectedDownSkin”, and “selectedDisabledSkin” skin states.

The following example shows how you can create a toggleable MX LinkButton control in Flex 4 by creating a custom MX LinkButton skin and specifying a background fill for the selected (“selectedUp”, “selectedOver”, “selectedDown”, and “selectedDisabled”) states.

Continue reading Creating a toggleable MX LinkButton control in Flex 4

Setting a gradient background fill on a Spark TextArea control in Flex 4

In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4”, we saw how you could create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.

The following example shows how you can create a linear gradient background on a Spark TextArea control in Flex 4 by modifying the background fill in the TextArea control’s skin to a LinearGradient.

Full code after the jump.

Continue reading Setting a gradient background fill on a Spark TextArea control in Flex 4

Setting the fill colors on a Halo Button control in Flex 4

The following example shows how you can set the fill colors on a Halo Button control (with default Spark skin) in Flex 4 by creating a custom skin and setting the gradient colors in the fill layer:

<!-- layer 2: fill -->
<s:rect left="1" right="1" top="1" bottom="1"
        radiusX="2" radiusY="2">
    <s:fill>
        <s:lineargradient rotation="90">
            <s:gradiententry color="red"
                    color.overStates="haloGreen"
                    alpha="0.85"
                    alpha.selectedOver="1"></s:gradiententry>
            <s:gradiententry color="haloOrange"
                    color.overStates="haloBlue"
                    alpha="0.85"
                    alpha.selectedOver="1"></s:gradiententry>
        </s:lineargradient>
    </s:fill>
</s:rect>

Full code after the jump.

Continue reading Setting the fill colors on a Halo Button control in Flex 4

Removing the vertical separator from the Halo ComboBox control in Flex 4

In a previous example, “Removing the vertical separator from the ComboBox control in Flex”, we saw how you could remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

The following example shows how you can remove the vertical separator fro a Halo ComboBox control (with default Spark skin) in Flex 4 by creating a custom skin and setting the skin style.

Full code after the jump.

Continue reading Removing the vertical separator from the Halo ComboBox control in Flex 4

Setting an image background on a Halo ButtonBar control in Flex 4

The following example shows how you can set an image background on a Halo ButtonBar control (with default Spark skin) in Flex 4 by setting the buttonStyleName, firstButtonStyleName, lastButtonStyleName, and skin styles.

Full code after the jump.

Continue reading Setting an image background on a Halo ButtonBar control in Flex 4