跳到主要內容

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…

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 組合, 可寫成一行,或…

gulp 前端自動化 - spritesheet

大家好,我是奶綠茶
今天來介紹如何使用 gulp 來自動化將圖片拼成 spritesheet
奶綠我使用的套件是 gulp.spritesmith
https://www.npmjs.com/package/gulp.spritesmith
可以使用 handlebars 格式,拼出自己想要的 css 格式
{{#sprites}} .{{name}} { background-position: {{px.offset_x}} {{px.offset_y}}; width: {{px.width}}; height: {{px.height}}; background-image: url({{{escaped_image}}}); } {{/sprites}} gulp 的設定
gulp.task('sprite',()=>{ console.log('sprite'); const spriteData = gulp.src('src/sprite_src/*') .pipe(spritesmith({ imgName: '../img/sprite.png', cssName: '_sprite.css', padding: 4, imgOpts: { quality: 100 }, cssTemplate: 'src/css/handlebars/basic.handlebars', })); const imgStream = spriteData.img .pipe(buffer()) .pipe(gulp.dest('dist/img/')); const cssStream = spriteData.css .pipe(gulp.dest('src/css')); return merge(imgStream, cssStream); });…