2.2.1 SWF自適應(yīng)布局技巧---(Rapid Flash Development)快速Flash開發(fā)

by emilmatthew

最后更新:29/12/08

當(dāng)我們開發(fā)全站式Flash應(yīng)用時(shí)，希望呈現(xiàn)一個(gè)鋪滿瀏覽器屏幕的Flash．

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

圖1

想讓你的Flash應(yīng)用在諸多用戶面前都有一個(gè)比較好的頁(yè)面展現(xiàn),就需要一些代碼來輔助了.

注意到AS3中有一個(gè)Event.RESIZE事件,此事件當(dāng)Flash的大小發(fā)生改變時(shí)激發(fā)...AHA,找到答案了;)

看一下實(shí)現(xiàn)的代碼,以下代碼寫在主類中:

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

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

//在程序初始時(shí)就調(diào)用一下界面調(diào)整

screenAdjust(null);
}

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

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

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

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

//內(nèi)部UI調(diào)整,這里調(diào)整的是下部工具欄的一個(gè)Y值.
mDownToolBar.y =stage.stageHeight-UIData.DOWN_BAR_OFF_Y;

}

圖2展示的是Flash主類的坐標(biāo)值與stage寬高的關(guān)系,這里的調(diào)整是將Flash主類的左上角始終貼齊當(dāng)前Flash Player的左上角,無論尺寸如何變化.

圖2

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

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

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

貼一個(gè)實(shí)際的應(yīng)用吧,我的六度拓?fù)湓诓煌瑸g覽器下的表現(xiàn),廣告廣告;)

1024*768

1280*1024

2.2.1 SWF自適應(yīng)布局技巧---(Rapid Flash Development)快速Flash開發(fā)