跳到主要內容

Flash組件一步一步來

這篇來分享一下關於製作Flash的組件
在這兒我們練習製作一個定位用的組件
參數面版上有定位的基準點和偏移值。
組件本身也是一個 MovieClip 類別, 因為要對stage做偵聽
所以一開始要去偵聽addedToStage事件。
1.AlignComponent.as
package milkmidi.tutorial {  
import flash.display.MovieClip; 
import flash.events.Event; 
public class AlignComponent extends MovieClip{  
public function AlignComponent()  {   
addEventListener(Event.ADDED_TO_STAGE , _addedToStageHandler);
addEventListener(Event.REMOVED_FROM_STAGE , _removedFromStageHandler);  
}  
private function _addedToStageHandler(e:Event):void {
removeEventListener(Event.ADDED_TO_STAGE, _addedToStageHandler);   
stage.addEventListener(Event.RESIZE , _resizeHandler);   
trace(this, "_addedToStageHandler");
_resizeHandler();
}  
private function _resizeHandler(e:Event = null):void {    
}  
private function _removedFromStageHandler(e:Event):void {
removeEventListener(Event.REMOVED_FROM_STAGE, _removedFromStageHandler);   
stage.removeEventListener(Event.RESIZE , _resizeHandler);
}   
} 
}

2.先在畫面上繪製一個色塊(50x50),將其轉成MovieClip元件
同時在Class欄位填上類別路徑


3.在元件庫上選擇 Component Definition

此時會出現 Component Definition 面版


4.在 as 檔設定參數
這兒的參數之後是要對映到參數面版上的
使用的tag為[Inspectable( name = "變數名", type = "類型", defaultValue = "預設值" )]
變數名稱是對映到set的變數, 可以使用的類型有List,String,Number等。
public function get align():int { return _align; }  
[Inspectable( name = "align", type = "List", enumeration = "9,6", defaultValue = "9" )]  
public function set align(value:int):void {
_align = value;
trace("align:" + _align); 
_resizeHandler();
}

public function get offsetX():int { return _offsetX; }

[Inspectable( name = "offsetX", type = "Number", defaultValue = "0" )]  
public function set offsetX(value:int):void {
_offsetX = value;
trace("offsetX:" + _offsetX);   
_resizeHandler();
}
5.在面版上輸入對映的參數
Name:面版上的說明, 跟類別裡程式碼沒任何關系, 可以打上中文
Variable:對映類別裡的參數
Value:預設值
Type:類別
同時在Class欄位也打上寫好的類別檔路徑


開啟 Component Inspector面版, 點擊一下組件, 此時參數就出現了

SourceCodeDownload

當stage Resize時, 會發生事件, 此時就可以一起更新座標值
在這就奶老師就不寫if else判斷 align的值。
private function _resizeHandler(e:Event = null):void {  
parent.x = stage.stageWidth + _offsetX;
parent.y = 0;
}

6.這時候就可以做一個元件來測試


7.更換livepreview元件
製作一個新的flash, 在裡面繪製圖型, 發怖成.swf檔
開啟 Component Definition面版
按下 中間的 Live preview , 右邊有個Set按扭。
第三個選項:Live Preview with .swf file embedded in .fla file
並將路徑填入

此時的組件就換上你的設計檔了。


8.更換元件庫裡的小Icon
大小:18x18, jpg或是png格式
開啟 Component Definition面版
在Description下方有個圖示按下他


選擇Custom, 找到你要放的小圖示

完成啦


9.匯出SWC
在元件庫上, 找到剛剛製作好的組件, 按下右鍵, 選擇 Export SWC File


10.包裝成mxp
到這兒我們的組件己經完成了, 接著要再包裝成mxp檔,好方便讓其他使用者安裝
包裝mxp使用的軟體是Adobe Extension Manager , 在這奶老師使用的版本為CS3
寫一份xml文件來定義mxp裡有什麼, 其副檔名為.mxi
最重要的是這段,
    
    



source:要包裝的檔案
destination:安裝好的檔要放置到flash裡的那個資料夾下
因為是組件,所以要放到 $flash/Components下, 而tutorials資料夾名稱可以換上自己的
選擇包裝擴充功能, 將mxi包裝成mxp, 然後可以安裝mxp檔了

重新啟動Flash , 在Components面版就會出現 剛剛製作好的組件, 拉到場景上就可以使用

轉貼文章請注明出處:http://milkmidi.blogspot.com/2009/12/flash.html
Source Download

留言

匿名表示…
謝謝奶老師~~剛問了如何制作
就很快有了教學~
現在我也可以自行制作組件了~~^_^
真的感謝奶老師~~
Cain寫道…
太讚了!原來是這樣
milkmidi寫道…
還有livePreview的部份沒講到
下一篇再來補充
george lynch寫道…
★★★★★五顆星:讚~~~感謝分享~~
匿名表示…
拜讀中...Orz
sizkacoder寫道…
- .-" 感覺是跳著說...

請問有智商低於九十的解說嗎

關於組件好像都沒有比較完整的說明...

就連Adobe自己都講得不清不楚(U)
鳥烏寫道…
網頁中的程式碼應該加入變數的定義吧!
不然會有錯誤,找不到_align,_offsetX
private var _align;
private var _offsetX:Number;
鳥烏寫道…
作者已經移除這則留言。
Zou Chang寫道…
不好意思問一個有點笨的問題,請問為什麼在定義處理參數的function時要宣告為public?用private會出現甚麼錯誤呢?
milkmidi寫道…
因為該參數要給面版來使用
對程式語言來說,要給別人使用的變數
就一定要是 public
milkmidi寫道…
因為該參數要給面版來使用
對程式語言來說,要給別人使用的變數
就一定要是 public

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

Android完全入門篇-01 安裝SDK與裝置USBDriver

大家好,我是奶綠茶
筆者以 Windows 系統來介紹安裝
1. 下載 Android SDK
http://developer.android.com/sdk/index.html
有分 32 位元和 64 位元的版本
為了教學方便,筆者將檔案放置在 D:\ 下
壓開後會有
eclipse資料夾:Eclipse程式碼編譯器
sdk:Android 開發用的 SDK
SDK Manager.exe:sdk管理用的軟體


2. 開啟手機的"開發人員選項"
部份手機該選項被隱藏起來了
要開啟的話,點選"關於手機"
接著連點"版本號碼"七次,就會重新開啟該功能
接著再開啟"USB偵錯"功能
接上你的 USB 線後
這樣你的電腦才能透過 USB 線來偵錯手機的資訊
3. 為裝置安裝 adb usb driver
因為各家廠牌的 Driver 都不同也不通用,所以需要自行 Google 找 Driver
可以用"XXX廠牌 型號 adb usb driver"關鍵字來找
例:HTC Newone adb usb driver
接著找到 我的電腦 / 內容


裝置管理員

會看到一個金嘆號未知的裝置, 按右鍵更新驅動程式軟體

選擇"瀏覽電腦上的驅動程式軟體"

完成後就會看到裝置啟動,並出現 XXX Android ADB Interface

4.測試是否連接成功
進入到第一步下載的 sdk 資料夾裡
D:\adt-bundle-windows-x86_64-20131030\sdk
然後在 platform-tools 資料夾上按住 Shift 鍵,然後再按滑鼠右鍵
選擇"在此處開啟命令視窗"
(此功能只有 Win7 之後的版本才支援, XP使用者就要自行輸入 dos 指令進入到資料夾)
輸入 adb devices
如果看到一串數字,並顯示 device 就表示連線成功
5.新增環境變數(選擇性設定)
為了方便的使用 adb 指令
可以為 windows 設定變數
開啟我的電腦 / 內容 / 左邊的"進階系統設定"
點選下方 環境變數

下方系統變數,找到 Path的選項,按下編輯

在變數值欄位的最後方加入
;D:\adt-b…

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…