Flash8平鋪網頁背景

作者: egoldy

性質: 原創

閱讀次數: 13479

發表時間: 2007-02-09 17:35:01


      聲明:此教程版權歸webstudio.com.cn所有, 轉載請注明出處。
      早在之前寫過在flashmx2004中平鋪背景的方法,雖然它也是有效果的,但相對使用flash8時還是顯得有些復雜.這次介紹的是flash8中的MovieClip的新方法MovieClip.beginBitmapFill()法.使用這種方式來平鋪背景會非常的簡單.下面開始.


演示文件:

1.    我們需要先準備一張小圖.當前我們使用的是一張小的gif圖像如下圖所示:

如果你想測試可以直接下載些圖像來測試.
2.    新建一個flash文檔,大小隨意,將我們選定的這張圖像導入到庫中,并在庫中直接為此圖像設置鏈接.當前我們設置為pattern1,基本方法是選中庫中剛導入的圖像,右擊選擇鏈接,如下圖所示:

3.    完成這一步操作之后,按下來我們準備使用代碼來平鋪背景.在前面我們提到過我們將使用MoiveClip.beginBitmapFill()方法.我們先看一下beginBitmapFill()方法:
public beginBitmapFill(bmp:BitmapData, [matrix:Matrix], [repeat:Boolean], [smoothing:Boolean]) : Void
beginBitmapFill方法是用位圖來添充繪畫區域,也就是說它需要先有一個繪畫區域,它有四個參數,bmp參數可以是一張透明或不透時 的圖像,matrix參數主要用來用bmp進行變換操作,包括旋轉,縮放和移動,后面兩個參數repeat是設定是否重復, smoothing參數是設計是否平滑,默認為false即不平滑.針對于beginBitmapFill()最基本的應用是你可以只使用bmp參 數.ok.下面我們準備編碼.
4.    選中場景中的第一幀,在其中加入如下代碼:

//導入flash8 bitmapData類
import flash.display.BitmapData;
//創建bitmapData實例,這里使用的是flash8的loadBitmap.如不清楚可以//參看本站的flash8 bitmapData教程
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
//使用beginBitmapFill()方法開始添充.
this.beginBitmapFill(tile);
//下面一段是根據屏幕的大小來繪制繪畫區域,用以beginBitmapFill來添充.
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill(); 

5.    現在測試你的影片,你就可以看到如下圖所示的效果了.

6.    呵呵,看上去的確很簡單,只需要幾行代碼即可,相對于flashmx2004的平鋪效果來說,現在你不在需要計算屏幕的寬高能容納多少張小圖 了.ok.現在點擊右上角的窗口放大按鈕,我們發現只有中心區域有添充,四周并沒有,也就是說它沒隨屏幕的變化而進行重繪,這并不是我們想要的,對于背景 來說,需要讓它隨著屏幕大小的變化而變化. 接下來我們繼續添加代碼.
7.    要想讓它隨著屏幕的大小變小,我們需要使用flash8中的Stage類來處理.如下代碼:

Stage.scaleMode = "noScale";
Stage.align = "TL";
var stageListener:Object = new Object();
stageListener.onResize = function() {
    trace("w:"+Stage.width+", h:"+Stage.height);
    tilebg();
};
Stage.addListener(stageListener);
//調用tilebg()函數第一次繪制
tilebg();

*******************************************
import flash.display.BitmapData;
function tilebg(){
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
this.beginBitmapFill(tile);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
} 

我們在我們原有的代碼之上加入了一段Stage大小變化的偵聽,這一段應當說是我非常常用的代碼,為了方便起見,我們把原來的代碼定義成一個函數即 tilebg(),這樣當屏幕大小發生變化時,就會執行onResize()方法,就會調用定義好的tilebg()函數.ok.現在在測試你的影片,剛 才的問題已經解決了,你可以點擊swf窗口的放大按鈕來查看效果
8.    接下來我們深入研究一下beginBitmapFill()其它的幾個參數.假設我們希望我們平鋪完的效果始終是光滑的.那么我們 就設定smoothing始終為true; 我們來看Matrix和repeat兩個參數.選中第一幀,打開actionscript面板.我們做如下的簡單的修改.

function tilebg(){
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
var matrix = new flash.geom.Matrix();
    repeat = false;
    smoothing = true;
this.beginBitmapFill(tile,matrix,repeat,smoothing);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
} 

我們只需要在tilebg()函數中做一點修改, 分別定義了matrix, repeat,和smoothing三個參數,還有一處不要忘記 了,this.beginBitmapFill(tile,matrix,repeat,smoothing)把其它三個參數加入進去.默認狀態下 repeat為true;現在我們改成false.測試我們可以觀看到這樣的效果.

看上去也是不錯的效果. 當然此時它仍會隨屏幕的大小發生變,接下來我們看Matirx,flash8中Matrix變換矩陣相對比較復雜.但flash8提供了幾種關于matrix的簡單方法,比如旋轉,縮放,位移等,這里我們示范一下旋轉.
9.    再次修改上面的tilebg()函數.加入matrix變換.如下:

function tilebg(){
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
    var matrix = new flash.geom.Matrix();
    matrix.rotate(Math.PI/4);
    repeat = false;
    smoothing = true;
this.beginBitmapFill(tile,matrix,repeat,smoothing);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
} 

我們在其中加入了一行matrix.rotate(Math.PI/4)即轉動45度.
測試效果如下所示:
演示文件


 

服務項目_SERVICE

關于我們

萬博思圖(北京)信息技術有限公司,專業的flash,flex開發團隊,5年經驗。公司致力于互聯網上的業務的開展,對于互動網站行銷,互聯網應用程序開發有成熟的解決方案。我們關注互聯網市場動態,關注新技術,更注重在新的領域不斷探索發現。
萬博思圖業務內容主要包括企業品牌Flash網站開發,企業形象宣傳Flash設計,動畫,多媒體演示,Flex企業級應用程序開發,擁有眾多成功案例,歡迎來電咨詢。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝陽區光華路15號院泰達時代中心4號樓704 郵編: 100026 EMAIL: [email protected]
電話: 010-59070059   (新號:010-59897050 010-59897060)  手機: 13693660520 傳真: 010-59070059-801
京公網安備:110108006741      京ICP備:05013074號-1
王先生
浙江6十1开奖结果规则 江苏七位数开奖查询20013期 江西11选5五码分布走势图 pk10规律 天津快乐10分复式奖金 彩票 秒速飞艇怎么看 网赌北京快乐8有输的人吗 游戏联盟 下载东北辽宁麻将大全 江西优乐麻将下载 大乐透彩票 四川麻将玩法 江西多乐彩今日开奖 2019开奖结果 开奖记录 银河国际棋牌官网 大地棋牌官网安卓版下载 紫幻河南麻将看牌器