早在之前寫過在
[url=http://www.webstudio.com.cn/tutorial/show.php?id=30]
flashmx2004中平鋪背景
[/url]
的方法,雖然它也是有效果的,但相對使用flash8時還是顯得有些復雜.這次介紹的是flash8中的MovieClip的新方法MovieClip.beginBitmapFill()法.使用這種方式來平鋪背景會非常的簡單.下面開始.
[1b]演示文件:[/1b]
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.????選中場景中的第一幀,在其中加入如下代碼:
[1b]代碼:[/1b]?
//導入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類來處理.如下代碼:
[1b]代碼:[/1b]?
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面板.我們做如下的簡單的修改.
[1b]代碼:[/1b]?
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變換.如下:
[1b]代碼:[/1b]?
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度.
測試效果如下所示:
[1b]演示文件[/1b]
如果你對matrix的其它方法感興趣,你可以繼續試試看.可以根據你的需要求來進行定制.ok.
本文轉自：http://www.5uflash.com/flashjiaocheng/Flashaschengxu/95.html

Flash8平鋪網頁背景圖文教程