0

First, I have a skin 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>

Then I have a 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);
        }
    }
}

and I also have a icons.swc file exported from Flash CS5, and added to the build path.

Finally, I have the following in my 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>

The problem is when I mouse over the ImageButton, the PLAY_ACTIVE symbol cannot be loaded from the swc file, while the Button.icon can use PLAY_ACTIVE.

(NOTE: the styling is working if I used @Embed('assets/play.png') for the imageSkinUp state).

So I'm asking if we could use swc symbols for the ButtonSkin? and if so, which container should I use for the swc symbols in ImageButtonSkin.mxml, s:BitmapImage or something else?

4

2 回答 2

0

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

唯一不工作的是如果符号超过1帧，那么ImageButton的最终结果只能显示第一帧，没有符号动画（Flash中的MovieClip）。

于 2012-12-18T21:07:50.277 回答
0

问题不是swc。覆盖公共函数 styleChanged 并调用 invalidateDisplayList() 并覆盖 updateDisplayList 并更新您的样式。有关如何完成的完整示例，请参阅此链接。

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

于 2012-12-15T02:37:31.270 回答