效果簡介：

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

 圖1，圖2

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

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

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

制作元件

　　一、制作“按鈕”元件。

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

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

 圖3 ，    圖4，    圖5

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

　　二、制作“光譜分析器”

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

　　制作“光柱一”元件

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

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

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

圖6，    圖7

圖8，    圖9

　　制作“光柱二”元件

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

　　制作“光譜”元件

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

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

 圖10，          圖11

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

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

　　制作“播放”按鈕元件

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

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

圖12

圖13

圖14

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

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

　　制作“返回”按鈕元件

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

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

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

　　制作“主元件”

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

 圖15，    圖16 

圖17

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

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

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

　　三、導(dǎo)入音樂

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

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

　　3．右鍵單擊庫中的聲音文件，在彈出的菜單中選擇“鏈接...”命令，打開“鏈接屬性”面板，并如圖17進(jìn)行設(shè)置。為聲音創(chuàng)建標(biāo)識(shí)符為“music”，以便用程序?qū)⑵鋵?dǎo)出使用。

　　設(shè)計(jì)主場景

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

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

 圖18

圖19

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

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

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

　　設(shè)計(jì)代碼

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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