AIR的窗口外觀修飾(透明、無邊框)

這個教程主要針對flex有一定基礎,準備開始AIR開發的朋友。由於AIR是針對桌面應用程序,所以相對於flex的web應用,自然就多出了對應用程序窗口的控制。而AIR的一大特點就是允許開發者使用自定義的窗口代替系統窗口從而使開發者對程序UI的設計更加隨心所欲,設計出獨具個性風格的跨平臺的桌面應用程序。

羅嗦的話到次爲止,下面正式開始主題,本教程主要實現了以下功能。

1. 屏蔽系統窗口、 flash窗口、窗口底部狀態欄。使用自定義窗口。
2. 對自定義窗口的縮放、移動、關閉。

在實現以上操作的過程中,我加入了一些額外的操作來豐富我們的demo,都是很簡單,很實用的東西。

3. 移動窗口時實現半透明效果,移動結束時還原。
4. 關閉窗口動畫。
5. 窗口背景填充。

1、屏蔽系統窗口,flash窗口,窗口底部狀態欄。使用自定義窗口。
當一個AIR項目創建成功後,你會發現相對與 web項目,你的工程目錄下多了一個名爲 XXX-app.xml的文件,這是我們項目的配製文件,實現自定義窗口就是靠它。打開它,修改如下代碼:

<!– The type of system chrome to use (either “standard” or “none”). Optional. Default standard. –> 
<!–<systemChrome></systemChrome> –>
去掉對systemChrome的註釋,改爲

<!– The type of system chrome to use (either “standard” or “none”). Optional. Default standard. –> 
<systemChrome>none</systemChrome>
這樣我們就去掉了系統窗口,轉而使用了flash的自帶窗口,下面我們把flash窗口也去掉。在你的主mxml文件中設置WindowedApplication 的這些屬性

<mx:WindowedApplication showTitleBar=”false” borderThickness=”0″ showStatusBar=”false” showGripper=”false” ….. />
這樣就完全去掉了所有的窗口,程序運行後只顯現應用程序的內容。大家可以參考幫助手冊來了解以上屬性的意思。說到這裏就引出了下一個問題,屏蔽了所有窗口以後如何對窗口進行基本的,放大,縮放,關閉操作呢。我們看下面。

2、對自定義窗口的縮放,移動,關閉。
AIR比flex web應用多了一個類叫NativeWindow,我們就是靠這個類對窗口就行操作。在demo中,我用了以下幾個方法來移定窗口,他們都在鼠標MouseDown event中被觸發。

this.nativeWindow.startResize(”L”); 
this.nativeWindow.startResize(”R”); 
this.nativeWindow.startResize(”T”); 
this.nativeWindow.startResize(”B”); 
this.nativeWindow.startResize(”TL”); 
this.nativeWindow.startResize(”RB”);
很容易可以看出,L R B T代表 Left, Right, Bottom 和 Top, 所以在調用startResize時設置適當的參數我們就可以輕易的實現對窗口各個方向的縮放。對於窗口的移定,在mouseDown event中使用

this.nativeWindow.startMove();
而對窗口的關閉,則很簡單的在按鈕click事件調用this.close()。

好了,以上就是對自定義窗口的操作。下面的東西我是用來完善我的demo,使它cool一點。相信大家在自己的應用程序中也會需要類似的東西,一個應用程序除了功能,細節上的處理也是很重要的。

3、移動窗口時實現半透明效果,移動結束時還原。
要實現這個效果我們需要重新打開我們的XXX-app.xml文件,設置以下內容。

<!– Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. –> 
<transparent>true</transparent>
這個可以允許我們讓應用程序的背景透明,這個很有用,比方說QQ寵物就是一個背景透明的應用程序,利用背景透明,我們可以開發出很獨特的應用程序。接下來要做的就簡單了。

在上面移動窗口的mouseDown事件中加入 this.alpha = 0.x; 下面是demo中的代碼。我將透明度設爲0.6,this. alpha只針對應用程序的背景設置透明,如果你想讓更多的東西透明,只需要對相應的控件設置alpha既可。

private function moveMe():void{ 
this.nativeWindow.startMove(); 
this.alpha = 0.6; 
}
讓透明還原我在mouseUp事件中設置alpha =1;

private function mouseUpHandle():void{ 
this.alpha = 1; 
}
這樣簡單的設置也許就會使你的應用程序看起來不一樣,怎麼不試試呢:)

4、關閉窗口動畫。
我使用了下面的Iris效果對在窗口關閉時使用。有什麼效果呢,大家關閉一下就知道了。 flex中內置了很多效果給我們使用,很多時候我們只需要適當的組合,就能得到意想不到的效果,比如 Move與 WipeDown一起可以實現Mac系統,菜單向下滑出的效果。諸如此類,只要有想像力,我們可以用很簡單的代碼,實現很有用的功能。 在demo 中,如下設置得到關閉動畫

<mx:WindowedApplication closeEffect=”irisIn” ….. /> 
<mx:Iris id=”irisIn” duration=”500″ showTarget=”false” />

5、窗口背景填充。

這個功能其實在開發程序的時候用的不多,我是不想讓demo看起來太單調所以加了背景,我們知道flex是不能像Html那樣輕易的讓背景重複顯示 的,所以我們的用一些特殊方法處理以下,demo中的 setBackground方法用於設置整個背景。這裏面涉及到的 Bitmap, BitmapData, Graphics類的具體作用,大家感興趣的話可以看幫助手冊,我的觀點是當裏用到的時候查幫助也不遲,只要知道有這麼些個類可以爲你幹什麼活就好。

private function setBackground():void{ 
var backgroundImage :Bitmap; 
var backgroundBitmapData :BitmapData; 
backgroundImage = new bg(); 
backgroundBitmapData = new BitmapData( backgroundImage.width, backgroundImage.height ); 
backgroundBitmapData.draw( backgroundImage ); 
workarea.graphics.beginBitmapFill( backgroundBitmapData, null,true ); 
workarea.graphics.drawRect(0,0, 2000, 2000); 
workarea.graphics.endFill(); 
}


本文轉自:http://www.68design.net/Web-Guide/Flash/46381-1.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章