flash 8 自製 modal window

In actionscript, flash February 14, 2006 - 2:46 pm

在flash 裏要產生 modal window(只有前景的視窗可操作，背景所有東西都不能按)有兩種方式，一種是用 PopUpManager，另一種是用 Alert.create()。

一般正常用法是先透過 PopUpManager 產生一個 Window 元件，然後再用 Window.contentPath = xxx 將自已的東西放進去。

但這個做法有個缺點，如果你不想要那個固定格式(灰底 + titlebar)的視窗，就要很辛苦的動點手腳重新 skinning。

最近有個案子又需要這種功能，但設計師(hi Brad!)需要用自已的mc視窗，因此我寫了個小工具可以隨意指定自製的mc 成為 modal window, 原理其實很簡單，就是把 mx.managers.PopUpManager 打開讀完一遍懂了後就知道，讀完後就會知道其實 adobe 的工程師已經寫好許多方便的小程式等者被用，例如

1. DepthManager 裏面有 setDepthBelow(), createChildAtDepth()等程式可用
2. 這些 Manager都會隨者 Window 元件一起以 mixins 的方式加MovieClip身上。

如果你沒時間再走一遍整個流程，看看這個超短簡介也可以，基本上產生一個modal window的過程如下：

1、先產生一片超大的白色mc把整個畫面(Stage size)蓋住，然後在它身上吃掉所有的 mouse click event。

2、用 setDepthBelow() 將剛才產生的白底mc 移到自製mc 的下方，這支程式會很聰明的將自製mc 移到剛才白色mc的上一層。

PLAIN TEXT

Actionscript:

/*
usage:
@parent: 以那個mc為基準建立 modal window
@mc: 要成為 modal window的視窗
@alpha: 背景的透明度，預設 50%
@color: 背景的顏色，預設白色
@released under creative commons 2.5, richtechmedia.com
*/
function createModal(parent:MovieClip, mc:MovieClip, alpha:Number, color:Number){
var modal:MovieClip = parent.createChildAtDepth("modal", DepthManager.kTopmost);
modal.setDepthBelow(mc);
mc.modal = modal;
//
modal.resize = function(){
modal._width = Stage.width;
modal._height = Stage.height;
}
//
modal._alpha = (alpha)?alpha:50;
modal.resize();
modal.onRelease = undefined;
modal.useHandCursor = false;
//變顏色
if(color){
co = new Color(modal);
co.setRGB(color);
}
}

至於關掉也很簡單

PLAIN TEXT

Actionscript:

function closeModal(o:MovieClip, _modal) {
//trace("closeModal mc> " + o + " modal : " + _modal);
_modal.swapDepths(findNextAvailableDepth(0,_root,"up"));
_modal.removeMovieClip();
//
o.swapDepths(findNextAvailableDepth(0,_root,"up"));
o.removeMovieClip();
}

by admin

1 Comment Add your own

1. Brad&hellip | February 15th, 2006 at 7:38 pm

哈哈!這個範例真讚啦!!
原本我想每個嵌入一個底，反正心想都共用元件，自己改也方便，但這就是設計師的思維@@...

沒錯!我是以UI設計師的思維來搞，哈哈哈哈~~土法煉鋼法!!(繼續努力研究AS2.0!!...)

Trackback this post | Subscribe to the comments via RSS Feed

flash 8 自製 modal window

1 Comment Add your own

留言回應