效果簡(jiǎn)介：

　　今天，筆者要教大家做一個(gè)很炫而且很實(shí)用的視覺(jué)效果。在winamp主面板的左側，可以看到有音樂(lè )播放時(shí)間的顯示，還有跳動(dòng)的光譜分析器，如圖1所示。本文就是講解如何在Flash中實(shí)現這些視覺(jué)效果。本例的設計效果如圖2所示。

 圖1，圖2

　　同樣的，這個(gè)效果中有很多技術(shù)可以應用到您的作品中。下面我們可就開(kāi)始制作了。

　　源文件下載：點(diǎn)擊這里下載(2.56M, winzip壓縮文件)

　　打開(kāi)FlashMX。按快捷鍵Ctrl+F3打開(kāi)“屬性”，設置場(chǎng)景為200px×100px，黑色，幀速率12fps。

制作元件

　　一、制作“按鈕”元件。

　　1．按快捷鍵Ctrl+F8打開(kāi)“創(chuàng )建新元件”面板新建一個(gè)名為“按鈕”的影片剪輯元件。該按鈕的作用是播放音樂(lè )、停止音樂(lè )和停止光譜分析器地運行。

　　2．點(diǎn)選“窗口”菜單下“公共庫”中的“按鈕”選項。然后在打開(kāi)的“按鈕”庫中找到的“Playback”文件夾，并把其中的“gel Right”拖拽到“按鈕”元件第1幀的場(chǎng)景的中心位置上。如圖3所示。點(diǎn)選場(chǎng)景中的按鈕，按快捷鍵Ctrl+F3打開(kāi)“屬性”面板，給按鈕起個(gè)實(shí)例名“bn1”。如圖4所示。

 圖3 ，    圖4，    圖5

　　3．點(diǎn)選中“按鈕”元件第2幀，按F7鍵插入一個(gè)空白關(guān)鍵幀。接著(zhù)把按鈕公共庫的“Playback”文件夾中的“gel Stop”按鈕拖拽到第2幀場(chǎng)景的中心位置上。也選中該按鈕，在“屬性”面板中起實(shí)例名“bn2”。到這里“按鈕”元件就設計好了。

　　二、制作“光譜分析器”

　　“光譜分析器”是模擬winamp的。要實(shí)現開(kāi)關(guān)的效果必須使用兩個(gè)按鈕元件，并用代碼進(jìn)行跳轉控制。分析器中的光譜柱元件由“光柱一”和“光柱二”兩個(gè)元件組成的。其具體的制作步驟如下。

　　制作“光柱一”元件

　　1．按快捷鍵Ctrl+F8，新建一個(gè)名為“光柱一”的影片剪輯元件。選中“工具”面板中的“矩形”工具（禁用邊線(xiàn)）。接著(zhù)用鼠標左鍵在“光柱一”元件的場(chǎng)景中繪制一個(gè)矩形。選中剛繪制出的矩形，如圖5所示設置其大小以及在場(chǎng)景中的位置。圖5中，可以看到“光柱一”的Y值為-15px。這是為了“光柱一”的底線(xiàn)穿過(guò)場(chǎng)景的中心點(diǎn)，使下面的設計能夠正常地使用其_yscale屬性。這點(diǎn)很重要。如圖6所示。設計“光柱二”的時(shí)候也注意這個(gè)問(wèn)題。

　　2．按快捷鍵Shift+F9打開(kāi)“混色器”面板。在“混色器”面板的下來(lái)菜單中先選擇“線(xiàn)性漸變”選項?！盎焐鳌泵姘逯袃蓚€(gè)小滑塊的顏色分別是“#01B401”和“#022E01”。如圖7所示。接著(zhù)設置場(chǎng)景為“全部顯示”模式（如圖標）。然后選中“工具”面板中的“顏料桶”工具，然后用鼠標左鍵點(diǎn)擊場(chǎng)景中的矩形條（上色）。見(jiàn)圖8所示。

　　3．選中“工具”面板中的“填充變形”工具，然后點(diǎn)擊場(chǎng)景中的矩形條。接著(zhù)拖動(dòng)白色空心小圓圈（旋轉漸變控制點(diǎn)）旋轉到水平位置，如圖8所示。再拖動(dòng)白色空心小方塊（移動(dòng)漸變控制點(diǎn)）進(jìn)行范圍調節，如圖9所示。這樣設置可以使光譜柱更加逼真。

圖6，    圖7

圖8，    圖9

　　制作“光柱二”元件

　　制作“光柱二”元件的方法和“光柱一”元件基本一樣，只是其寬、高為3px和1px，如圖10所示。

　　制作“光譜”元件

　　1．   按快捷鍵Ctrl+F8，新建一個(gè)名為“光譜”的影片剪輯元件。

　　2．   按快捷鍵Ctrl+L，打開(kāi)庫，把庫中的“光柱一”和“光柱二”元件拖拽到場(chǎng)景中，如圖11所示。移動(dòng)元件前，可以先把場(chǎng)景的顯示設置為400% ，這樣方便移動(dòng)元件。

 圖10，          圖11

　　3．   這一步，要先右鍵點(diǎn)擊場(chǎng)景中的兩個(gè)元件，然后打開(kāi)“動(dòng)作”面板，鍵入代碼后再做。但是，本例中的代碼都*添加和講解。但這一步有必要交代以下?，F在，選中場(chǎng)景的兩個(gè)元件，按快捷鍵Ctrl+C進(jìn)行復制，然后再用快捷鍵Ctrl+V粘貼，再復制，再粘貼。*效果如圖11所示。

　　注意，實(shí)際上這時(shí)候每個(gè)元件中都是有代碼的。在移動(dòng)中，可以按快捷鍵Ctrl+K打開(kāi)“對齊”面板幫助對齊。也可以通過(guò)縮放場(chǎng)景的顯示比例來(lái)加速元件的移動(dòng)。

　　制作“播放”按鈕元件

　　1．按快捷鍵Ctrl+F8，新建一個(gè)名為“平臺線(xiàn)”的影片剪輯元件。

　　2．由于這不是關(guān)鍵的制作，筆者就簡(jiǎn)要地講以下它的制作要點(diǎn)。選擇“矩形”工具（禁用邊線(xiàn)），在該元件的場(chǎng)景中拉出一個(gè)矩形長(cháng)條，然后用黑白“線(xiàn)性漸變”色上色。*在矩形條上挖去一些寬為1px的間隙。*設置如圖12所示。

圖12

圖13

圖14

　　3．在庫中雙擊“平臺線(xiàn)”影片剪輯元件，如圖13所示。然后在“平臺線(xiàn)”元件的場(chǎng)景中按快捷鍵Ctrl+A全選，接著(zhù)按F8鍵打開(kāi)“轉換為元件”面板，并創(chuàng )建成名為“播放”的按鈕元件。加入代碼后，單擊“播放”按鈕，“光譜分析器”將會(huì )開(kāi)始運行。這個(gè)功能玩過(guò)Winamp的朋友都知道。

　　4．在庫中雙擊打開(kāi)“播放”按鈕元件，進(jìn)入編輯場(chǎng)景。點(diǎn)選中“點(diǎn)擊”幀按F6鍵插入關(guān)鍵幀。然后用“矩形”工具拉出一個(gè)矩形來(lái)覆蓋原來(lái)的原來(lái)的內容。這個(gè)矩形就是該按鈕的觸發(fā)區域。在圖14中讀者可以發(fā)現“編輯多個(gè)幀” 功能被啟用，這將有利于察看多個(gè)幀中元件的情況，便于編輯。

　　制作“返回”按鈕元件

　　1．在庫中雙擊“光譜”影片剪輯元件。然后在該元件的場(chǎng)景中按Ctrl+A全選，接著(zhù)按F8鍵將其轉換成按鈕元件，名字為“返回”。加入代碼后，單擊“返回”按鈕，“光譜分析器”將會(huì )停止。圖13中是該實(shí)例的全部元件。有些元件放在文件夾里是為了方便管理和使用。

　　2．在庫中把“平臺線(xiàn)”的影片剪輯元件拖拽到“彈起”幀的場(chǎng)景中，并放置在“光譜”元件下。

　　3．雙擊打開(kāi)“返回”按鈕元件，進(jìn)入編輯場(chǎng)景。同樣點(diǎn)選中“點(diǎn)擊”幀按F6鍵插入關(guān)鍵幀。OK。

　　制作“主元件”

　　1．按快捷鍵Ctrl+F8，新建一個(gè)名為“主元件”的影片剪輯元件。在庫中把“播放”按鈕元件拖拽到“主元件”的場(chǎng)景中。接著(zhù)右鍵單擊第1幀，在彈出的菜單中選擇“動(dòng)作”命令，然后在彈出的“動(dòng)作”面板中鍵入代碼“stop();”。其作用是該影片剪輯停止播放。

 圖15，    圖16 

圖17

　　2．點(diǎn)選“播放”按鈕，起實(shí)例名為“music1”。如圖15所示。

　　3．點(diǎn)選中第2幀，按F7鍵插入空白關(guān)鍵幀。在庫中把“返回”按鈕元件拖拽到第幀的場(chǎng)景中。并同樣在幀中鍵入代碼“stop();”。第1和第2幀中元件的位置應該保持一致。

　　4．點(diǎn)選“返回”按鈕，起實(shí)例名為“music2”。

　　三、導入音樂(lè )

　　1．按快捷鍵Ctrl+R打開(kāi)“導入”面板，導入一首MP3歌曲。建議大家先選擇文件小一點(diǎn)的歌，越小越好，否則經(jīng)常在測試的時(shí)候等待，浪費時(shí)間。

　　2．打開(kāi)庫，雙擊庫中前面是個(gè)小喇叭圖標的聲音文件打開(kāi)“聲音屬性”面板，然后如圖16所示設置。這樣會(huì )使導出的文件變得很小。

　　3．右鍵單擊庫中的聲音文件，在彈出的菜單中選擇“鏈接...”命令，打開(kāi)“鏈接屬性”面板，并如圖17進(jìn)行設置。為聲音創(chuàng )建標識符為“music”，以便用程序將其導出使用。

　　設計主場(chǎng)景

　　設計主場(chǎng)景之前，先看看主場(chǎng)景中都有哪些東西，有什么作用。如圖18所示。中間兩個(gè)虛線(xiàn)矩形框就是兩個(gè)動(dòng)態(tài)文本。中間是一個(gè)輸入冒號的靜態(tài)文本。有一個(gè)裝飾用的小三角。最下面的是“主元件”和“按鈕”元件，這兩個(gè)元件的功能前面已經(jīng)講過(guò)了。這兩個(gè)動(dòng)態(tài)文本的作用是顯示音樂(lè )當前的播放時(shí)間。他們的制作方法如下。

　　1．點(diǎn)選“工具”面板中的文本工具，如圖19所示設置“屬性”面板。實(shí)例中的字體筆者已經(jīng)壓縮在源文件中了，讀者可自行下載。關(guān)鍵是一定要給該動(dòng)態(tài)文本起個(gè)實(shí)例名稱(chēng)“text1”。接著(zhù)使用“矩形”工具在主場(chǎng)景中拉出一個(gè)動(dòng)態(tài)文本，即圖18左側的虛線(xiàn)部分。

 圖18

圖19

　　2．再制作一個(gè)動(dòng)態(tài)文本“text2”，即圖18右側的虛線(xiàn)部分。方法同上。

　　3．在兩個(gè)動(dòng)態(tài)文本之間再設計一個(gè)靜態(tài)文本，并輸入一個(gè)冒號。

　　4．在庫中把“主元件”和“按鈕”這兩個(gè)影片剪輯元件拖拽到如圖18所示的相應位置即可。并給“主元件”起個(gè)實(shí)例名稱(chēng)“mc”。這很重要，是為了使“按鈕”元件能夠控制它。

　　設計代碼

　　這部分是本文的重點(diǎn)，也是精華，希望大家花點(diǎn)心思研究一下。

　　1．右鍵單擊主場(chǎng)景的第1幀，在彈出菜單中選擇“動(dòng)作”命令，然后在打開(kāi)的“動(dòng)作”面板中鍵入如下代碼。這段代碼主要是創(chuàng )建一個(gè)聲音對象和兩個(gè)全局函數。

// 創(chuàng )建新的Sound對象
mysound = new Sound();
// 把在庫中建立鏈接的聲音附加到mySound對象中
mysound.attachSound("music");
// 隱藏動(dòng)態(tài)文本“text1”，使得聲音沒(méi)有播放時(shí)“光譜分析器”的條件不滿(mǎn)足而不能工作_root.text1._visible = 0;
// 使用_global對象來(lái)創(chuàng )建全局函數stsrt_fun
// stsrt_fun函數的作用是播放聲音、顯示時(shí)間
_global.start_fun = function() {
// 播放聲音
mysound.start();
// 初始化兩個(gè)動(dòng)態(tài)文本的內容為“00”
    _root.text1.text = _root.text2.text = "00";
// 定義fun函數，用來(lái)顯示時(shí)間
    function fun() {
// Math對象的floor方法返回小于等于指定參數的整數
// Sound對象中的position屬性返回聲音已播放的毫秒數
// 變量x紀錄了聲音已經(jīng)播放的時(shí)間
        x = Math.floor(mysound.position/1000);
// 根據分秒的關(guān)系，顯示文本的內容
// TextField對象的text屬性可以設定文本內容
        if (x<10) {
            _root.text1.text = "00";
            _root.text2.text = "0" + x;
        } else if (x>=10 && x<60) {
            _root.text1.text = "00";
            _root.text2.text = x;
        } else if (x<600) {
            if (x%60<10) {
                _root.text1.text = "0" + Math.floor(x/60);
                _root.text2.text = "0" + x%60;
            } else if (x%60>=10) {
                _root.text1.text = "0" + Math.floor(x/60);
                _root.text2.text = x%60;
           }
        }
    }
// 每隔1000毫秒調用一次fun函數
    setInterval(fun, 1000);
// 循環(huán)播放聲音
    mysound.onSoundComplete = start_fun;
}
// 定義全局函數stop_fun，作用是停止播放聲音
_global.stop_fun = function() {
    mysound.stop();
}

　　2．進(jìn)入“主元件”的編輯場(chǎng)景。右鍵單擊“主元件”場(chǎng)景中的第1幀，在彈出菜單中選擇“動(dòng)作”命令，在打開(kāi)的“動(dòng)作”面板中鍵入如下代碼。這段代碼的作用是“music 1”按鈕被點(diǎn)擊后，如果動(dòng)態(tài)文本沒(méi)有被隱藏，則跳轉到第2幀。

stop();
music1.onRelease =function() {
if ( _root.text1._visible == 1 ) {
     gotoAndStop(2);
}
}

　　在打開(kāi)的“動(dòng)作”面板中鍵入如下代碼。

　　右鍵單擊場(chǎng)景中的第2幀，在“動(dòng)作”面板中鍵入如下代碼。該代碼的作用是“music2”按鈕被點(diǎn)擊后，返回到到第1幀。

stop();
music2.onRelease = function() {
    gotoAndStop(1);
}

　　3．進(jìn)入“按鈕”影片剪輯元件的編輯場(chǎng)景。右鍵單擊場(chǎng)景中第1幀，在“動(dòng)作”面板中鍵入如下代碼。這段代碼的作用是“bn1”按鈕被點(diǎn)擊后，顯示動(dòng)態(tài)文本，執行start_fun函數，然后跳轉到第2幀。

stop();
bn1.onRelease = function() {
    _root.text1._visible = 1;
    _root.text2._visible = 1;
    start_fun();
    gotoAndStop(2);
}

　　右鍵單擊場(chǎng)景中的第2幀，在“動(dòng)作”面板中鍵入如下代碼。該代碼的作用是點(diǎn)擊“bn2”按鈕后，先調用stop_fun函數。接著(zhù)隱藏兩個(gè)動(dòng)態(tài)文本并讓“mc”實(shí)例（即“主元件”）返回其場(chǎng)景的第1幀。*“按鈕”影片剪輯元件也返回到其場(chǎng)景的第1幀停止。

stop();
bn2.onRelease = function() {
    stop_fun();
    _root.text1._visible = 0;
    _root.text2._visible = 0;
    _root.mc.gotoAndStop(1);
    gotoAndStop(1);
}

　　4．打開(kāi)庫，雙擊“光譜”元件。在其場(chǎng)景中選中“光柱二”元件，按F9鍵打開(kāi)“動(dòng)作”面板，鍵入如下代碼。代碼中隨機數值的大小可以隨意設置。但要注意“光柱二”和“光柱一”元件之間的距離。

// _alpha是影片剪輯的透明度屬性
// _yscale屬性的作用是使影片剪輯在垂直方向上進(jìn)行縮放
// Math對象的random方法返回一個(gè)大于等于0而小于1的數字?！皉amdom(90)”的用法已經(jīng)不被建議了
onClipEvent (enterFrame) {
    _alpha = Math.random()*60 + 40;
    _yscale = Math.random()*90 + 10;
}

　　選中場(chǎng)景中的“光柱一”元件，按F9鍵打開(kāi)“動(dòng)作”面板，鍵入如下代碼。

// _y是影片剪輯的（Y）軸坐標屬性
onClipEvent (enterFrame) {
    _y = -Math.random()*6 - 12;
}

　　好了，整個(gè)效果到這里就設計完成了。測試一下，應該會(huì )讓你自己吃驚不小的。在效果中，讀者可以使用電子表中的顯示字體，這樣，效果看起來(lái)就更逼真些。