效果簡介：
今天，筆者要教大家做一個很炫而且很實用的視覺效果。在winamp主面板的左側，可以看到有音樂播放時間的顯示，還有跳動的光譜分析器，如圖1所示。本文就是講解如何在Flash中實現(xiàn)這些視覺效果。本例的設計效果如圖2所示。
圖1，圖2
同樣的，這個效果中有很多技術可以應用到您的作品中。下面我們可就開始制作了。
相關下載：源文件下載：點擊這里下載(2.56M, winzip壓縮文件)
制作步驟：打開FlashMX。按快捷鍵Ctrl+F3打開“屬性”，設置場景為200px×100px，黑色，幀速率12fps。
制作元件
一、制作“按鈕”元件。
1．按快捷鍵Ctrl+F8打開“創(chuàng)建新元件”面板新建一個名為“按鈕”的影片剪輯元件。該按鈕的作用是播放音樂、停止音樂和停止光譜分析器地運行。
2．點選“窗口”菜單下“公共庫”中的“按鈕”選項。然后在打開的“按鈕”庫中找到的“Playback”文件夾，并把其中的“gel Right”拖拽到“按鈕”元件第1幀的場景的中心位置上。如圖3所示。點選場景中的按鈕，按快捷鍵Ctrl+F3打開“屬性”面板，給按鈕起個實例名“bn1”。如圖4所示。
圖3 ， 圖4， 圖5
3．點選中“按鈕”元件第2幀，按F7鍵插入一個空白關鍵幀。接著把按鈕公共庫的“Playback”文件夾中的“gel Stop”按鈕拖拽到第2幀場景的中心位置上。也選中該按鈕，在“屬性”面板中起實例名“bn2”。到這里“按鈕”元件就設計好了。
二、制作“光譜分析器”
“光譜分析器”是模擬winamp的。要實現(xiàn)開關的效果必須使用兩個按鈕元件，并用代碼進行跳轉控制。分析器中的光譜柱元件由“光柱一”和“光柱二”兩個元件組成的。其具體的制作步驟如下。
制作“光柱一”元件
1．按快捷鍵Ctrl+F8，新建一個名為“光柱一”的影片剪輯元件。選中“工具”面板中的“矩形”工具（禁用邊線）。接著用鼠標左鍵在“光柱一”元件的場景中繪制一個矩形。選中剛繪制出的矩形，如圖5所示設置其大小以及在場景中的位置。圖5中，可以看到“光柱一”的Y值為-15px。這是為了“光柱一”的底線穿過場景的中心點，使下面的設計能夠正常地使用其_yscale屬性。這點很重要。如圖6所示。設計“光柱二”的時候也注意這個問題。
2．按快捷鍵Shift+F9打開“混色器”面板。在“混色器”面板的下來菜單中先選擇“線性漸變”選項?！盎焐鳌泵姘逯袃蓚€小滑塊的顏色分別是“#01B401”和“#022E01”。如圖7所示。接著設置場景為“全部顯示”模式（如圖標）。然后選中“工具”面板中的“顏料桶”工具，然后用鼠標左鍵點擊場景中的矩形條（上色）。見圖8所示。
3．選中“工具”面板中的“填充變形”工具，然后點擊場景中的矩形條。接著拖動白色空心小圓圈（旋轉漸變控制點）旋轉到水平位置，如圖8所示。再拖動白色空心小方塊（移動漸變控制點）進行范圍調節(jié)，如圖9所示。這樣設置可以使光譜柱更加逼真。
圖6， 圖7
圖8， 圖9
制作“光柱二”元件
制作“光柱二”元件的方法和“光柱一”元件基本一樣，只是其寬、高為3px和1px，如圖10所示。
制作“光譜”元件
1． 按快捷鍵Ctrl+F8，新建一個名為“光譜”的影片剪輯元件。
2． 按快捷鍵Ctrl+L，打開庫，把庫中的“光柱一”和“光柱二”元件拖拽到場景中，如圖11所示。移動元件前，可以先把場景的顯示設置為400% ，這樣方便移動元件。
圖10， 圖11
3． 這一步，要先右鍵點擊場景中的兩個元件，然后打開“動作”面板，鍵入代碼后再做。但是，本例中的代碼都*添加和講解。但這一步有必要交代以下?，F(xiàn)在，選中場景的兩個元件，按快捷鍵Ctrl+C進行復制，然后再用快捷鍵Ctrl+V粘貼，再復制，再粘貼。*效果如圖11所示。
注意，實際上這時候每個元件中都是有代碼的。在移動中，可以按快捷鍵Ctrl+K打開“對齊”面板幫助對齊。也可以通過縮放場景的顯示比例來加速元件的移動。
制作“播放”按鈕元件
1．按快捷鍵Ctrl+F8，新建一個名為“平臺線”的影片剪輯元件。
2．由于這不是關鍵的制作，筆者就簡要地講以下它的制作要點。選擇“矩形”工具（禁用邊線），在該元件的場景中拉出一個矩形長條，然后用黑白“線性漸變”色上色。*在矩形條上挖去一些寬為1px的間隙。*設置如圖12所示。
圖12
圖13
圖14
3．在庫中雙擊“平臺線”影片剪輯元件，如圖13所示。然后在“平臺線”元件的場景中按快捷鍵Ctrl+A全選，接著按F8鍵打開“轉換為元件”面板，并創(chuàng)建成名為“播放”的按鈕元件。加入代碼后，單擊“播放”按鈕，“光譜分析器”將會開始運行。這個功能玩過Winamp的朋友都知道。
4．在庫中雙擊打開“播放”按鈕元件，進入編輯場景。點選中“點擊”幀按F6鍵插入關鍵幀。然后用“矩形”工具拉出一個矩形來覆蓋原來的原來的內容。這個矩形就是該按鈕的觸發(fā)區(qū)域。在圖14中讀者可以發(fā)現(xiàn)“編輯多個幀” 功能被啟用，這將有利于察看多個幀中元件的情況，便于編輯。
制作“返回”按鈕元件
1．在庫中雙擊“光譜”影片剪輯元件。然后在該元件的場景中按Ctrl+A全選，接著按F8鍵將其轉換成按鈕元件，名字為“返回”。加入代碼后，單擊“返回”按鈕，“光譜分析器”將會停止。圖13中是該實例的全部元件。有些元件放在文件夾里是為了方便管理和使用。
2．在庫中把“平臺線”的影片剪輯元件拖拽到“彈起”幀的場景中，并放置在“光譜”元件下。
3．雙擊打開“返回”按鈕元件，進入編輯場景。同樣點選中“點擊”幀按F6鍵插入關鍵幀。OK。
制作“主元件”
1．按快捷鍵Ctrl+F8，新建一個名為“主元件”的影片剪輯元件。在庫中把“播放”按鈕元件拖拽到“主元件”的場景中。接著右鍵單擊第1幀，在彈出的菜單中選擇“動作”命令，然后在彈出的“動作”面板中鍵入代碼“stop();”。其作用是該影片剪輯停止播放。
圖15， 圖16
圖17
2．點選“播放”按鈕，起實例名為“music1”。如圖15所示。
3．點選中第2幀，按F7鍵插入空白關鍵幀。在庫中把“返回”按鈕元件拖拽到第幀的場景中。并同樣在幀中鍵入代碼“stop();”。第1和第2幀中元件的位置應該保持一致。
4．點選“返回”按鈕，起實例名為“music2”。
三、導入音樂
1．按快捷鍵Ctrl+R打開“導入”面板，導入一首MP3歌曲。建議大家先選擇文件小一點的歌，越小越好，否則經常在測試的時候等待，浪費時間。
2．打開庫，雙擊庫中前面是個小喇叭圖標的聲音文件打開“聲音屬性”面板，然后如圖16所示設置。這樣會使導出的文件變得很小。
3．右鍵單擊庫中的聲音文件，在彈出的菜單中選擇“鏈接...”命令，打開“鏈接屬性”面板，并如圖17進行設置。為聲音創(chuàng)建標識符為“music”，以便用程序將其導出使用。
設計主場景
設計主場景之前，先看看主場景中都有哪些東西，有什么作用。如圖18所示。中間兩個虛線矩形框就是兩個動態(tài)文本。中間是一個輸入冒號的靜態(tài)文本。有一個裝飾用的小三角。最下面的是“主元件”和“按鈕”元件，這兩個元件的功能前面已經講過了。這兩個動態(tài)文本的作用是顯示音樂當前的播放時間。他們的制作方法如下。
1．點選“工具”面板中的文本工具，如圖19所示設置“屬性”面板。實例中的字體筆者已經壓縮在源文件中了，讀者可自行下載。關鍵是一定要給該動態(tài)文本起個實例名稱“text1”。接著使用“矩形”工具在主場景中拉出一個動態(tài)文本，即圖18左側的虛線部分。
圖18
圖19
2．再制作一個動態(tài)文本“text2”，即圖18右側的虛線部分。方法同上。
3．在兩個動態(tài)文本之間再設計一個靜態(tài)文本，并輸入一個冒號。
4．在庫中把“主元件”和“按鈕”這兩個影片剪輯元件拖拽到如圖18所示的相應位置即可。并給“主元件”起個實例名稱“mc”。這很重要，是為了使“按鈕”元件能夠控制它。
設計代碼
這部分是本文的重點，也是精華，希望大家花點心思研究一下。
1．右鍵單擊主場景的第1幀，在彈出菜單中選擇“動作”命令，然后在打開的“動作”面板中鍵入如下代碼。這段代碼主要是創(chuàng)建一個聲音對象和兩個全局函數。
// 創(chuàng)建新的Sound對象
mysound = new Sound();
// 把在庫中建立鏈接的聲音附加到mySound對象中
mysound.attachSound("music");
// 隱藏動態(tài)文本“text1”，使得聲音沒有播放時“光譜分析器”的條件不滿足而不能工作_root.text1._visible = 0;
// 使用_global對象來創(chuàng)建全局函數stsrt_fun
// stsrt_fun函數的作用是播放聲音、顯示時間
_global.start_fun = function() {
// 播放聲音
mysound.start();
// 初始化兩個動態(tài)文本的內容為“00”
_root.text1.text = _root.text2.text = "00";
// 定義fun函數，用來顯示時間
function fun() {
// Math對象的floor方法返回小于等于指定參數的整數
// Sound對象中的position屬性返回聲音已播放的毫秒數
// 變量x紀錄了聲音已經播放的時間
x = Math.floor(mysound.position/1000);
// 根據分秒的關系，顯示文本的內容
// 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．進入“主元件”的編輯場景。右鍵單擊“主元件”場景中的第1幀，在彈出菜單中選擇“動作”命令，在打開的“動作”面板中鍵入如下代碼。這段代碼的作用是“music 1”按鈕被點擊后，如果動態(tài)文本沒有被隱藏，則跳轉到第2幀。
stop();
music1.onRelease =function() {
if ( _root.text1._visible == 1 ) {
gotoAndStop(2);
}
}
在打開的“動作”面板中鍵入如下代碼。
右鍵單擊場景中的第2幀，在“動作”面板中鍵入如下代碼。該代碼的作用是“music2”按鈕被點擊后，返回到到第1幀。
stop();
music2.onRelease = function() {
gotoAndStop(1);
}
3．進入“按鈕”影片剪輯元件的編輯場景。右鍵單擊場景中第1幀，在“動作”面板中鍵入如下代碼。這段代碼的作用是“bn1”按鈕被點擊后，顯示動態(tài)文本，執(zhí)行start_fun函數，然后跳轉到第2幀。
stop();
bn1.onRelease = function() {
_root.text1._visible = 1;
_root.text2._visible = 1;
start_fun();
gotoAndStop(2);
}
右鍵單擊場景中的第2幀，在“動作”面板中鍵入如下代碼。該代碼的作用是點擊“bn2”按鈕后，先調用stop_fun函數。接著隱藏兩個動態(tài)文本并讓“mc”實例（即“主元件”）返回其場景的第1幀。*“按鈕”影片剪輯元件也返回到其場景的第1幀停止。
stop();
bn2.onRelease = function() {
stop_fun();
_root.text1._visible = 0;
_root.text2._visible = 0;
_root.mc.gotoAndStop(1);
gotoAndStop(1);
}
4．打開庫，雙擊“光譜”元件。在其場景中選中“光柱二”元件，按F9鍵打開“動作”面板，鍵入如下代碼。代碼中隨機數值的大小可以隨意設置。但要注意“光柱二”和“光柱一”元件之間的距離。
// _alpha是影片剪輯的透明度屬性
// _yscale屬性的作用是使影片剪輯在垂直方向上進行縮放
// Math對象的random方法返回一個大于等于0而小于1的數字?！皉amdom(90)”的用法已經不被建議了
onClipEvent (enterFrame) {
_alpha = Math.random()*60 + 40;
_yscale = Math.random()*90 + 10;
}
選中場景中的“光柱一”元件，按F9鍵打開“動作”面板，鍵入如下代碼。
// _y是影片剪輯的（Y）軸坐標屬性
onClipEvent (enterFrame) {
_y = -Math.random()*6 - 12;
}
好了，整個效果到這里就設計完成了。測試一下，應該會讓你自己吃驚不小的。在效果中，讀者可以使用電子表中的顯示字體，這樣，效果看起來就更逼真些。
