利用Ｆｌａｓｈ ８實現大容量動態Ｂａｎｎｅｒ廣告

摘要：在網頁上發布Banner廣告已經成為商家必不可少的廣告手段。本文介紹了一個解決Banner廣告容量小、使用周期短的方案，并從軟件工程的角度詳細論述了實現方法。

關鍵詞：Banner廣告；flash；大容量；可更新；隨機遮罩動畫

中圖分類號：TP37文獻標識碼：A文章編號：1009-3044(2008)11-20270-04

1 引言

Banner廣告即我們通常所說的網頁上的旗幟廣告，它是以GIF、JPG、SWF等格式建立的文件。Banner廣告一般放置在網頁的不同位置上，當用戶瀏覽網頁的時候，吸引用戶對廣告信息的關注，從而獲得網絡營銷的效果。

通常Banner的尺寸都不會太大，而商家總想在方寸之間盡量多地向觀眾展示自己的產品信息。設計師不僅要考慮展示內容是否豐富，還要考慮展示的方式是否能吸引觀眾的注意力，應避免千篇一律、呆板機械。然而即便是一則設計優秀的Banner廣告也不能長久引人注目，根據有關的調查表明，同一個Banner在向同一受眾暴露4次以上之后，效能就開始下降，同時調查也表明廣告更新頻率一般為二周一次，這就使得設計者在制作Banner廣告時還要充分考慮廣告內容的動態可更新性。

本文介紹了一個解決Banner廣告容量小、使用周期短的方案。采用縮略圖和大圖相配合的方法擴展廣告容量，利用Flash 8 AactionScript編寫載入圖片和文字代碼，實現廣告內容的動態可更新性，同時借助隨機遮罩動畫效果使得廣告畫面多姿多彩，?？闯Ｐ隆Ｎ闹袕能浖こ痰慕嵌?，結合多媒體項目開發方案，將開發工作分成五個基本工作流：需求分析、項目設計、素材收集與加工、項目實現、調試。五個工作流并不是一次完成的，遵照UP（Unified Process統一軟件開發過程）模型，在項目開發的四個過程初始、細化、構造和移交中反復迭代五個工作流，通過不斷累積、精化達到最終的目的。

2 需求分析

通過引言中的分析可以得到本案例主要需求有：

(1)能展示多種商品信息。

(2)能隨機調用豐富活潑的遮罩動畫顯示商品大圖。

(3)能在不修改源程序的情況下更換廣告內容。

3 項目設計

3.1 設計布局圖內容構成

為了增加廣告的展示容量，本案例采用縮略圖和大圖相配合的構圖形式，參考樣例如圖1所示。其中p1到p6是商品縮略圖，diagram是商品大圖。當鼠標滑過縮略圖時在diagram區域顯示相關商品大圖，同時更換廣告文本。單擊大圖打開網頁查看商品詳細信息。

在設計布局圖時，設計師要初步確定文件尺寸以及每個廣告元素的尺寸、位置。根據迭代開發程序的思想，在整個廣告制作過程中廣告元素所占的比例和位置，都有可能隨著制作的進程進行更改。

3.2 設計布局圖的色彩構成

一個好的網上廣告，應使用戶在隨意瀏覽的幾秒鐘之內就能感覺到它的存在。設計者要根據廣告內容和發布的網站，細分廣告所面對的消費群，緊緊圍繞著其感情的需求進行訴求，利用色彩營造情感氛圍，留給消費者強烈的視覺印象，引起他們的感情共鳴。

理想的廣告畫面一般使用顏色不超過四種，過多的顏色會令人眼花繚亂，而且顏色的使用最好有一個主色調，以使畫面顯得主次分明。一般來說，與兒童相關的廣告多考慮用明黃、橙紅、天藍等純度高的顏色，與女性相關的廣告多數以中純度的粉色系為主，而工業產品廣告的色彩往往以黑白灰為主，突出產品的高科技、高品質特性。

3.3 設計廣告動畫

從視覺原理上講，動畫比靜態圖像更能引人注目，有統計表明其吸引力會提高三倍。然而如果把動畫形式固定在一種模式上，動畫也就失去了其應有的效果。設計者可以利用Flash 8設計多種炫麗的遮罩動畫效果，例如：百葉窗、棋盤式、梳理式、回旋式等，在商品大圖顯示過程中隨機調用，使Banner廣告生動活潑、?？闯Ｐ?。

4 素材的收集和加工

本案例中，廣告素材主要包括廣告圖片和廣告文本。

4.1 廣告圖片

首先對需要展示的商品進行拍照，然后依據項目設計階段對布局圖的設計結果，在Photoshop中對照片進行裁剪、色彩色調、圖像大小等處理。

在保存圖片時應該本著一個原則，即在保證圖片品質的前提下盡量壓縮圖片的大小，當前網頁圖片的格式主要有JPG、GIF、PNG等。在本文中建議設計者選擇PNG格式，PNG (Portable Network Graphic Format流式網絡圖形格式)是20世紀90年代中期開始開發的圖像文件存儲格式，其目的是希望替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性，這使得PNG圖像具有許多GIF和JPG沒有的優點，PNG能把圖像文件壓縮到極限以利于網絡傳輸，但又能保留所有與圖像品質有關的信息。只是目前只能是FLASH 8及其以上版本才能調用PNG格式的圖片，其他版本的FLASH軟件需要使用JPG格式。

商品大圖和縮略圖在處理后以PNG格式保存在與廣告SWF文件相同目錄的文件夾diagrams和thumbnails內。

4.2 廣告文本

當廣告圖片更換時，廣告文本也需隨之改變。廣告文本以UTF-8編碼TXT格式保存在與SWF廣告同名的文件夾內，如圖2所示。在文本文件中可輸入參考信息“bannervar=第一幅圖廣告詞|第二幅圖廣告詞|第三幅圖廣告詞|……”，注意文本語法以“”開頭，后接變量名“bannervar=”，bannervar將會用于后面的代碼編寫中，每頁廣告詞用“|”隔開。

當進行廣告內容更換時，首先將新的大圖和縮略圖按照上述方法處理后，覆蓋原有圖片。其次需要在文本文件bannerinfo.txt中修改廣告詞。

5 項目實現

項目實現部分主要包括在Flash 8中實現界面和代碼兩部分：

5.1 界面的實現

從項目設計部分可以看出，本案例界面主要包括一個大圖實例、六個縮略圖實例、一個文本框和一個遮罩動畫效果實例。大圖實例、六個縮略圖實例和文本框可以通過代碼創建，界面實現部分主要是遮罩動畫效果影片剪輯的制作。

（1）新建fla文件命名為“DBanner”保存。

（2）創建影片剪輯maskEffect_mc。

影片剪輯maskEffect_mc用于制作多種遮罩動畫效果，每種效果在時間軸上占據一個關鍵幀，如圖3所示。程序運行時會隨機選擇播放不同的幀，從而產生各種動畫效果。本文僅以橫向百葉窗和星狀縮放動畫為例提供一個實現方案。

在時間軸第一、二和三幀分別插入空白關鍵幀，點選第二幀，繪制矩形橫條，在屬性欄修改橫條的寬度和文件寬度數值相同，高度為2，修改橫條坐標(0，0)，并將橫條轉化為影片剪輯，使橫條成為一個嵌入在maskEffect_mc影片剪輯實例，修改橫條實例名稱為strip。同理點選第三幀，在第三幀制作星狀影片剪輯實例star。

（3）將maskEffect_mc拖放到場景中，修改實例名稱為maskEffects。

5.2 代碼的實現

在場景第一幀寫入如下幀動作：

5.2.1 項目初始化

//讀入廣告詞

System.useCodepage=true;

var lv_banner=new LoadVars();

_global.bannerinfo_array=new Array();

lv_banner.load(\"bannerinfo.txt\");

lv_banner.onLoad=function(){

bannerinfo_array=this.bannervar.split(\"|\"); }

_global.imgN=0;

//在最底層創建大圖實例

createEmptyMovieClip (\"diagram\"，0);

//為diagram創建名為diagramIn 的嵌入實例，在diagram中嵌入一個影片實例是為了配合后面的代碼實現部分，因為如果一個圖像被加載到了影片剪輯實例中， 那么該實例的某些屬性和方法就不再起作用了。但是如果該圖像被加載到嵌入的實例中， 那么父實例仍然像一般的影片剪輯實例那樣起作用。

diagram.createEmptyMovieClip (\"diagramIn\"，0);

//創建縮略圖實例

createEmptyMovieClip (\"thumbnail1\"，1);

createEmptyMovieClip (\"thumbnail2\"，2);

……

//為縮略圖創建嵌入實例

thumbnail1.createEmptyMovieClip (\"thumIn\"，0);

thumbnail2.createEmptyMovieClip (\"thumIn\"，0);

……

//創建動態文本并設置動態文本屬性

createTextField(\"bannerText\"，10，10，200，300，50);

myformat = new TextFormat();

myformat.color=0xffff00;

myformat.size=24;

……

//按照設計階段確定的圖片位置設計實例和文本坐標

diagram._x=0;

diagram._y=0;

thumbnail1._x=100;

thumbnail1._y=300;

……

//載入縮略圖

thumbnail1.thumIn.loadMovie(\"thumbnails/1\"+\".png\");

thumbnail2.thumIn.loadMovie(\"thumbnails/2\"+\".png\");

……

//載入默認大圖

diagram.diagramIn.loadMovie(\"diagrams/d1\"+\".png\");

//自定義選擇遮罩效果函數

function choseMaskEffect(i){

diagram.setMask(\"maskEffects\");

maskEffects.reset();//遮罩動畫初始化

n=random(6)+2;

maskEffects.gotoAndStop(n);

diagram.diagramIn.loadMovie(\"diagrams/d\"+i+\".png\");}

5.2.2 縮略圖動作：調用隨機遮罩，顯示相關文本并記錄圖片序號

thumbnail1.onRollOver=function(){

choseMaskEffect(1);

bannerText.text=bannerinfo_array[0];

bannerText.setTextFormat(myformat);

_global.imgN=0;}

其他縮略圖動作同上。

5.2.3 大圖動作：根據圖片序號鏈接到產品相應網頁

diagram.onPress= function(){

switch(_global.imgN){

case 0:

getURL(\"http://******\");

break;

case 1:

getURL(\"http://******\");

break;

…….}}

（4）遮罩效果代碼

打開影片剪輯maskEffect_mc，在第一幀寫入幀動作如下：

//初始化

function reset(){

//刪除動態生成的實例

for(i=0;i<40;i++)

removeMovieClip(\"strip\"+i);

//初始化星狀收縮

star._xscale=0;

star._yscale=0;

i=0;

j=0; }

stop();

在第二幀寫入橫向百葉窗動畫代碼如下：

onEnterFrame=function(){

if(j<11){

do {

duplicateMovieClip(\"strip\"，\" strip\"+i，i);//復制多個橫條

setProperty(\"strip\"+i，_y，i*10);//將條沿縱軸每隔10像素擺放一個

setProperty(\"strip\"+i，_yscale，j*50);//橫條縱向拉伸

i++;}while(i<40)//復制40個橫條，復制數量與大圖尺寸相關

j++;//控制伸縮比例

i=0;}

else

delete onEnterFrame;}

在第三幀寫入縮放動畫代碼如下：

onEnterFrame=function(){

if(i<30) //拉伸30次，拉伸次數與大圖尺寸相關

{setProperty(\"star\"，_xscale，i*600);

setProperty(\"star\"，_yscale，i*600);

setProperty(\"star\"，_rotation，j*20);

i++;}

else

delete onEnterFrame;}

6 調試

調試工作是軟件開發第四階段——移交階段的主要工作流，設計師不僅需要在本機測試程序的性能，還要將程序嵌入到網頁中在客戶端進行測試，修復在測試中發現的問題，并且寫出必要的用戶手冊。本案例中，用戶手冊里需要詳細寫明與更換廣告內容有關的信息，如商品大圖、商品縮略圖和廣告詞的保存位置，以及格式、圖片尺寸等。

7 結束語

在網頁上發布Banner廣告已經成為商家必不可少的廣告手段。本文介紹了一個擴展Banner廣告容量和延長廣告使用周期的方案，并從軟件開發的角度詳細論述了實現方法，希望能對Banner廣告設計師和flash學習者有所幫助和啟發。

參考文獻：

[1] 張東雨，李寧.廣告色彩奧妙[M].沈陽：遼寧美術出版社，2002．

[2] 余明陽，陳光紅.廣告策劃創意學[M].上海：復旦大學出版社，2003．

[3] 賈琳琳.Flash MX Professional 2004中文版教程[M].北京：北京希望電子出版社，2005．

[4] 提高網站Banner廣告效率的九大要訣.http://homepage.yesky.com.

[5] 5種Web圖像格式簡述.http://www.blueidea.com.

[6] Frank Buschman，Regine Meunier，Hans Rohnert，等，著，賁可榮，郭福亮，趙皚，等，譯．面向模式的軟件體系結構:模式系統[M].北京：機械工業出版社，2005．

注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文