Actionscript 3 动态加载皮肤图像

（我的另一个永无止境的问题…）

我需要一个图像组件，其状态类似于

切换按钮

。我想我应该尝试子类化

ToggleButton

并定义一个定制的Flex

skin

，而不是从头开始构建。我没有太多的剥皮经验，并拼凑了下面的代码

它似乎工作得很好–将皮肤中的

位图图像

绑定到

位图数据

加载到按钮实例：

---

切换按钮

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   minWidth="21" minHeight="21" 
                   alpha.disabledStates="0.5">
    <fx:Metadata>[HostComponent("components.EventButton")]</fx:Metadata>

    <!-- host component -->
    <!-- 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>

    <s:BitmapImage source="{hostComponent.upImageData}" 
                   includeIn="up, disabled"
                   left="0" right="0" top="0" bottom="0" />

    <s:BitmapImage source="{hostComponent.overImageData}" 
                   left="0" right="0" top="0" bottom="0" 
                   includeIn="over"/>

    <s:BitmapImage source="{hostComponent.downImageData}" 
                   left="0" right="0" top="0" bottom="0" 
                   includeIn="down, upAndSelected, overAndSelected, downAndSelected"/>
</s:Skin>

<?xml version="1.0" encoding="utf-8"?>
<s:ToggleButton xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:skins = "skins.*"
          skinClass="skins.EventSkin"
          creationComplete="creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[

            [Bindable]
            public var upImageData:BitmapData;

            [Bindable]
            public var overImageData:BitmapData;

            [Bindable]
            public var downImageData:BitmapData;

            [Bindable]
            public var disabledImageData:BitmapData;

            // image loading code removed

        ]]>
    </fx:Script>
</s:ToggleButton>

是的，你走的路是对的。“皮肤机制”是一个非常强大和灵活的工具。大约一年前，我有过类似的任务，我用同样的方法解决了它（只使用标准的ToggleButton和自定义皮肤）。spark组件的视觉表示中的所有更改可能都在skin类中

作为另一个选项，您应该能够使用状态变量语法：

<s:ToggleButton icon.up="{upIcon}"
        icon.over="{overIcon}"
        icon.down="{downIcon}"
        icon.disabled="{disabledIcon}"
        icon.upAndSelected="{upAndSelectedIcon}"
        icon.overAndSelected="{overAndSelectedIcon}"
        icon.downAndSelected="{downAndSelectedIcon}"
        icon.disabledAndSelected="{disabledAndSelectedIcon}" />

---

有关这方面的更多讨论，请参阅此Apache。

感谢您的现实检查。我现在正试图指定

命中区域

，但它只是禁用了我的

切换按钮

。我已将hitArea精灵的

mouseebled

设置为false。你知道精灵是否需要在显示列表中，或者它只是一个变量吗？”（我的另一个永无止境的问题…）哈哈！正如@Crabar所说，你肯定走对了方向。Flex 4蒙皮功能非常强大（如果相当冗长的话）。