在自定义的 ImageButtonSkin 中使用 Flex.SWC 符号

Question

首先，我有一个皮肤ImageButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="up" />
    </s:states>
<!-- what should I use here????? BitmapImage might not be working for symbols from SWC lib -->
    <s:BitmapImage id="theImage"
             source.up="{getStyle('imageSkinUp')}"
             source.over="{getStyle('imageSkinOver')}"
             source.down="{getStyle('imageSkinDown')}"
             source.disabled="{getStyle('imageSkinDisabled')}" />
    <!-- SkinParts
    name=iconDisplay, type=spark.primitives.BitmapImage, required=false
    name=labelDisplay, type=spark.core.IDisplayText, required=false
    -->
</s:Skin>

然后我有一个ImageButton.as：

package components
{
    import skins.ImageButtonSkin;
    import spark.components.Button;
    [Style(name="imageSkinUp", type="*")]
    [Style(name="imageSkinOver", type="*")]
    [Style(name="imageSkinDown", type="*")]
    [Style(name="imageSkinDisabled", type="*")]
    public class ImageButton extends Button
    {
        public function ImageButton()
        {
            super();
            setStyle("skinClass", ImageButtonSkin);
        }
    }
}

我还有一个从 Flash CS5 导出的icons.swc文件，并添加到构建路径中。

最后，我的TestProject.mxml中有以下内容：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="components.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var playing:Boolean = false;
        ]]>
    </fx:Script>
    <s:Panel title="Test Project" width="400" height="300">
        <s:Button x="30" y="32" label="Button"
                  click="playing = !playing"
                  icon="{playing ? PLAY_ACTIVE : PLAY_ENABLED}" />
        <components:ImageButton x="19" y="96" label="ImageButton"
                                imageSkinUp="@Embed('assets/play.png')"
                                imageSkinOver="{PLAY_ACTIVE}"
                                imageSkinDown="{PLAY_ACTIVE}"
                                imageSkinDisabled="{PLAY_ACTIVE}" />
    </s:Panel>
</s:Application>

问题是当我将鼠标悬停在ImageButton上时，无法从swc文件中加载PLAY_ACTIVE符号，而Button.icon可以使用PLAY_ACTIVE。

（注意：如果我将@Embed('assets/play.png')用于imageSkinUp状态，则样式有效）。

所以我问我们是否可以对 ButtonSkin 使用 swc 符号？ 如果是这样，我应该使用哪个容器来存放 ImageButtonSkin.mxml 、s:BitmapImage 或其他东西中的 swc 符号？

Answer 1

问题不是 swc。 覆盖公共函数样式更改并调用 invalidateDisplayList（） 并覆盖 updateDisplayList 以及更新样式。 有关如何完成此操作的完整示例，请参阅此链接。

http://blogagic.com/98/styling-flex-custom-components

Answer 2

事实证明，我的代码实际上是有效的。 我没有意识到PLAY_ACTIVE符号是白色的，所以我没有看到它。

唯一不起作用的是，如果元件有超过 1 帧，则 ImageButton 的最终结果只能显示第一帧，而不能显示元件动画（Flash 中的影片剪辑）。