Flash8平鋪網頁背景-flash tile image_Flash教程
推薦:Flash放在網頁層中不顯示的問題這個問題雖然很多人都知道解決的方法,可是也同樣很多人不知道,經常有朋友會問起。解決方法是給插入的Flash加一個透明屬性。以下代碼中,param標簽針對IE起
之前寫過在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. 選中場景中的第一幀,在其中加入如下代碼:
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.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面板.我們做如下的簡單的修改.
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變換.如下:
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度.
測試效果如下所示:
演示文件
假如你對matrix的其它方法感愛好,你可以繼續試試看.可以根據你的需要求來進行定制.ok
分享:使網頁里的Flash保持原始幀頻wmode參數值設為Opaque同樣可以使網頁里的Flash保持原始幀頻。Transparent與Opaque之間的差異在于Transparent答應透明,因此,假如SWF文件
- 相關鏈接:
- 教程說明:
Flash教程-Flash8平鋪網頁背景-flash tile image
。