自從 Flex 開發專案升級到 4.5 Spark Component 後
新的 Advanced State Syntax, Skinning 功能增加不少彈性,很多簡單的圖形也不一定需要用 Flash 做
直接用幾個 MXML Graphics 標籤就能完成
但是有些情況,還是用到 Flash 做比較方便
譬如 Shape Tween 之類的
這時候該如何將 Flash MovieClip 與 Flex Spark Skin 整合在一起呢?
目前想到最方便的做法仍是利用 UIMovieClip
如同上次介紹的方式 Flash Stateful MovieClip
拉好時間軸動畫,下好 Frame Label
接下來輸出 SWF,然後用以下方式嵌入到 Spark Skin MXML
<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Library>
<fx:Definition name="BtnMC">
<!-- 嵌入 SWF MovieClip 資源到 UIMovieClip Class 上 -->
<ui:UIMovieClip xmlns:ui="mx.flash.*">
<fx:Metadata>
[Embed(source="../assets/assets.swf#assets.ButtonMC")]
</fx:Metadata>
</ui:UIMovieClip>
</fx:Definition>
</fx:Library>
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<!-- 建立 UIMovieClip 實體,與 Skin 狀態做 Binding -->
<fx:BtnMC currentState="{currentState}" top="0" bottom="0" left="0" right="0"/>
</s:SparkButtonSkin>
這樣做法比較特別地方是在於嵌入的方式
不需要額外建立 AS3 UIMovieClip 子類別
而是直接宣告在 Skin MXML 內,減少檔案的數量
另外一個特別的地方是在於,直接把 UIMovieClip 實體狀態 Binding 到 Spark Skin 狀態
這樣就完成了,Skin 能拿來用於 Spark Button 上
嵌入的 MovieClip 會自動依照 Spark Button 狀態播放影格或是做影格跳躍
很方便吧!
Ticore 是一個 Flash/Flex/AS3 Developer,大約在 2000 年開始接觸到 Flash AS,覺得非常有趣,從此以後便開始 Flash 開發與程式學習之路,目前專注於 Flash Platform 相關的應用開發,包含 FMS/Flex/Game/App/Event 等
This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License