Flex与Flash组合开发最佳实践(2)__Use swf for skin in Flex4

 

之前写了两篇Blog

 

1·Flex Skin使用方法

2·Flex与Flash组合开发最佳实践__Combain Flex&Flash

 

本篇Blog应该是对上两篇的一个延伸。

 

就目前来说，在Flex4中Adobe并未提供Flex Skin Design Extensions ，并且由于Flex4对Skin方面进行了很大的改进，所以在Flex4中使用SWF所元件的皮肤，和在3中有很大的却别。

 

1·创建皮肤

 

制作一个元件，使用“Convert Symbol to Flex Component”转换为Flex中可以使用的元件

由于是自己建立的元件，所以默认状态下9-缩放切片并未勾选，如果需要的话可以将这个勾选上。

将生成的SWC文件导入FlashBuilder4 下

 

2·建立CrossButtonSkin组件，继承自spark.skins.SparkSkin

 

MXML语言:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/halo"
             xmlns:local="*"
             minWidth="30"
             minHeight="30"
             width="100%">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function state1_enterStateHandler(event:FlexEvent):void
            {
                zoomInEffect.end();
                zoomInEffect.play();
            }

            protected function state1_exitStateHandler(event:FlexEvent):void
            {
                zoomOutEffect.end();
                zoomOutEffect.play();
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:Scale id="zoomInEffect"
                 duration="100"
                 autoCenterTransform="true"
                 target="{this}"
                 scaleXTo="1.1"
                 scaleYTo="1.1"/>
        <s:Scale id="zoomOutEffect"
                 duration="100"
                 autoCenterTransform="true"
                 target="{this}"
                 scaleXTo="1"
                 scaleYTo="1"/>
    </fx:Declarations>
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <!-- states -->
    <s:states>
        <s:State name="up"/>
        <s:State name="over"
                 enterState="state1_enterStateHandler(event)"
                 exitState="state1_exitStateHandler(event)"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>
    <local:SkinButtonCross id="crossButonAsset"
                           width="100%"
                           height="100%"/>
</s:SparkSkin>

 

 

 <local:SkinButtonCross id="crossButonAsset"
         width="100%"
         height="100%"/>

 

这个部分就是从Flash 中导出的资源文件，注意width，height需要设置为100%

 

 

3·使用皮肤

 

在主场景中拖拽出来一个Button控件，再右边选择样式->外观->skin.CrossButtonSkin

 

这样就可以把一个swf元件作为皮肤，导入Flex4里面来了。

 

Demo