寫 FLEX 的時候，常常會使用到圖檔，但是支援的檔案 JPG GIF 以及 PNG 都是點陣圖檔，這些圖檔在縮放的時候都會造成一定比例的失真，這時候我們需要使用 FLASH 繪製的向量圖檔，可是呢，如果要使用 SWF 檔案就必須要使用 SWFLOADER 了，如果這些圖案要做互動，那就挺麻煩了，要在 FLASH 內寫好呼叫事件，其實有更方便的做法。

圖 : 點陣圖最大的缺點就是放大後會失真

其實，在 FLASH 中繪製元件並且轉 SWC 給 FLEX 使用還有很多好處，第一個當然是向量化的圖件，這點當然是必須使用，第二，可以使用 FLASH 中的九宮格定位法，但是使用上還有很多要注意的，第三點就是可以使用字定形狀或是自訂觸發區域的按鈕。

這邊就稍微試試看放大的效果，以及自訂觸發區域的按鈕吧。先來看看結果如何。

回歸正題，要將 FLASH 繪製的檔案給 FLEX 用，你必須依照以下的步驟進行

STEP 1 : 下載 FLEX 組件套件並安裝

可以參考這邊文章 使用 FLASH 和 FLEX ，我們先到官方下載

Flex Skin Design Extensions & Flex Component Kit for Flash CS3

必要下載的 FLEX SKIN DESIGN EXTENSION FOR FLASH 以及 FLEX COMPONENT KIT FOR FLASH CS3 PROFESSIONAL ，下載好請安裝。

主要的是 FCK 一定要安裝，不然無法匯出 UIMovieClip 類別

STEP 2 : 在 FLASH 中將元件轉為 FLEX 的可視元件

1. 將匯入的 AI 向量圖案轉成 movieClip ( 注意，請選擇影片，我拍照拍錯了 )

2. 將MOVIECLIP 轉換為 UIMovieClip

先選好要匯出的元件

接著按下功能列的  命令  -> 將元件轉換成 FLEX 組件

轉換完成之後，你應該會看到如下的圖片

 

看到那個小小 FX 圖案就可以了。

STEP 3 : 將 FLASH 發布成 SWC 元件檔

選擇檔案的發布設定

點選 FLASH ，並且將 會出 SWC 打勾

完成後，發佈，就會看到發佈後會多一個 SWC 檔案。

STEP 4 : 將 SWC 在 FLEX 中實作

將 SWC 放入 FLEX 專案的 LIB 資料夾中

接著就可以在 FLEX 輸入剛剛我們設定的類別

如此一來我們就大功告成了

 

其實，使用 FLASH 製作的元件還有很多好處，例如我範例中，使用了再 FLASH 製作的按鈕，另外在 FLEX 中製作偵聽事件，這樣子就可以製作奇形怪狀的按鈕了

朋友可以打開範例玩看看

另外補上原始碼

case0904.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="14" xmlns:local="*" creationComplete="aaa()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function aaa():void{
 
				var a:SimpleButton = this.img2.getChildAt(1) as SimpleButton;
				a.addEventListener(MouseEvent.CLICK,bbb);
			}
			private function bbb(event:MouseEvent):void{
 
				Alert.show("你點擊到 FLASH 內的按鈕囉");
 
			}
		]]>
	</mx:Script>
	<mx:HBox width="100%" horizontalAlign="center">
		<mx:Image id="img1" source="img/case1.png" width="100" height="151"/>
		<local:CaseMC id="img2" width="100" height="151"/>
	</mx:HBox>
	<mx:ApplicationControlBar dock="true" horizontalAlign="center">
		<mx:Button label="放大" click="this.img1.scaleX=3;this.img1.scaleY=3;this.img2.width=300;this.img2.height=453;"/>
		<mx:Button label="縮小" click="this.img1.scaleX=1;this.img1.scaleY=1;this.img2.width=100;this.img2.height=151;"/>
	</mx:ApplicationControlBar>
 
</mx:Application>

Random Posts

相關文章 :

• 在 FLASH 開啟本機圖檔。FLEX SDK 4 需要
• FLEX on PHP , 使用 ZendAMF remoteObject
• FLEX 一次開啟多個檔案 & 限制檔案類型
• FLEX 利用物件概念儲存圖片資料
• FLEX 動態更換中文字型 ( 非嵌入方式 )

Ausir ActionScript, FLEX, 程式設計 Actionscript, FLASH, FLEX 3, SWC, SWF, 元件化