2.2.1 SWF自適應布局技巧---(Rapid Flash Development)快速Flash開發

by emilmatthew

最后更新:29/12/08

當我們開發全站式Flash應用時，希望呈現一個鋪滿瀏覽器屏幕的Flash．

鋪滿瀏覽器屏幕的Flash可以通過設置引用Flash參數中的width和height為100%來實現.但是,光做這點是不夠的,原因是Flash的內部的界面部局,尚沒有如此智能(指的是非FLEX PROJECT,如ActionScript Project或用Flash IDE編譯的項目等). 今天,用戶的瀏覽器分辨率主要為1024*768和1280*1024,還有一些老外用那種非常寬大的瀏覽器:

圖1

想讓你的Flash應用在諸多用戶面前都有一個比較好的頁面展現,就需要一些代碼來輔助了.

注意到AS3中有一個Event.RESIZE事件,此事件當Flash的大小發生改變時激發...AHA,找到答案了;)

看一下實現的代碼,以下代碼寫在主類中:

//4.init screen size adjust
private function initScreenAdjust():void
{
//Set Scale Mode,設定縮放模式為無縮放
stage.scaleMode=StageScaleMode.NO_SCALE;

//Set Screen adjust event,設置屏幕縮放
stage.addEventListener(Event.RESIZE,screenAdjust);

//在程序初始時就調用一下界面調整

screenAdjust(null);
}

//4.1Adjust Sample實例
private function screenAdjust(evt:Event):void
{

//UIData.SCREEN_WIDTH和UIData.SCREEN_HEIGHT指的是編譯出的Flash寬高值.

//可通過[SWF(width="1024",height="768"]的形式進行設定(FLEX),或在FLASH IDE中直接設定
var offX:int=Math.floor((UIData.SCREEN_WIDTH -stage.stageWidth)/2);
var offY:int=Math.floor((UIData.SCREEN_HEIGHT-stage.stageHeight)/2);

//this指的是主類,這樣做的原因請參考圖2
this.x=offX;
this.y=offY;

//內部UI調整,這里調整的是下部工具欄的一個Y值.
mDownToolBar.y =stage.stageHeight-UIData.DOWN_BAR_OFF_Y;

}

圖2展示的是Flash主類的坐標值與stage寬高的關系,這里的調整是將Flash主類的左上角始終貼齊當前Flash Player的左上角,無論尺寸如何變化.

圖2

其實,我這里只是給出一種界面調整方案而已,有時,你可能希望主類局中,一切就看你的需要嘍.

一個簡單的示例程序地址,可以通過調整瀏覽器的大小來觀察界面的布局改變:Video始終居中;上,下工具欄分別位于上下兩邊,(代碼很容易,主要的上面都已經貼了,就不附代碼了)

http://www.xia108.com/labs/rapidFlashDev/chp2.solution/2.2.1FullScreen/index.htm

貼一個實際的應用吧,我的六度拓撲在不同瀏覽器下的表現,廣告廣告;)

1024*768

1280*1024

2.2.1 SWF自適應布局技巧---(Rapid Flash Development)快速Flash開發