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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
