|
怎么讓歌詞平滑滾動呢？
在整個容器里,只顯示了SHOWNUM行歌詞,所以,不可能就是簡單地讓歌詞在播放過程中一直地上升。
我們主要是讓兩句歌詞之間能夠緩慢地上升,而不是播到相應(yīng)歌詞才讓歌詞跳動.
以以下兩句歌詞為例：
[00:15.84]難過 是因?yàn)閻灹撕芫?BR>[00:21.18]是因?yàn)橄肓颂?BR>在15秒84和21秒18之間,我們讓列表框的所有項(xiàng)目勻速移動一個列表框項(xiàng)目的高度.這樣,當(dāng)時間無限接近21秒18的時候,列表框的所有項(xiàng)目移動的距離接近于一個列表框項(xiàng)目的高度.當(dāng)時間到21秒18,ONENTERFRAME事件響應(yīng)時,列表框的內(nèi)容恰好要更改,因?yàn)楦吡溜@示的歌詞發(fā)生改變.更改是原列表框第一項(xiàng)去掉,其它項(xiàng)目相應(yīng)地往上移動,最后追加后面還沒顯示的歌詞的第一行.所以,假如列表框項(xiàng)目實(shí)際上不移動的話,就會給人一種剛好移動了也恰好是一個列表框項(xiàng)目高度.因此,此時讓列表框的位置恢復(fù)到原來15秒84時的位置,就不會有跳動的感覺。
知道了這個原理以后,就開始寫這段勻速移動的代碼了。這是個初中的物理問題,解決起來應(yīng)該不難。
我們主要是要求出列表框項(xiàng)目移動的距離△S,然后求出列表框項(xiàng)目的位置.這時,可能會有讀者問:那不就是要設(shè)置SHOWNUM個列表框的位置嗎?從上面的分析可見,所有列表框項(xiàng)目的△S值是相同的,所以,我們干脆控制整個列表框的位置屬性。
根據(jù)勻速運(yùn)動的公式,有
△S=V*△T
其中△T就是當(dāng)前歌曲時間與歌詞時間信息的差值,即當(dāng)前時間(T-15.84).那么V怎么求呢?
我們剛才說了,在兩句歌詞的時間差里,我們需要移動一個列表框項(xiàng)目的距離S,代入上述公式,得
S=V*(21.18-15.84)
V=S/(21,18-15.84)
解出了V以后,就可以把距離跟時間的關(guān)系寫出來：
△S=S/(T-15.84)*(21.18-15.84) (其中S為常數(shù))
把該函數(shù)用于AS中：
S就是一個列表框的高度itembutton0._height,15.84就是以當(dāng)前歌詞位置TEMPPOS為下標(biāo)的數(shù)組項(xiàng)的值timeValue[temppos],21,18就是當(dāng)前歌詞下一項(xiàng)的時間信息值timeValue[temppos+1],當(dāng)前歌曲位置T就是歌曲位置pos/1000(因?yàn)樯厦嬖O(shè)置了pos=_parent.song.duration,而duration是以毫秒為單位的,TIMEVALUE數(shù)組是以秒為單位,所以需要轉(zhuǎn)換一下單位)
于是,控制列表框位置的代碼就寫出來了：
delta=itembutton._height*(pos/1000-timeValue[temppos])/ (timeValue[temppos+1]-timeValue[temppos]);
該代碼添加在MOVEUP函數(shù)里。然后列表框的位置就等于列表框初始值減去DELTA(因?yàn)橥蠟樨?fù),所以是減)。
為了獲得初始值,在MOVEUP函數(shù)的外面追加：
inity=_y
接著就可以在MOVEUP函數(shù)里追加：
_y=inity-delta
此時,測試影片,就可以看到平滑移動的效果了.但是,當(dāng)歌詞高亮顯示發(fā)生改變的時候,你會看到列表框上面一項(xiàng)突然消失,同時下面彈出下一項(xiàng).這個該怎么消除呢?
很簡單,就在主場景畫兩塊顏色跟背景顏色一樣,大小跟列表框項(xiàng)目相同的矩形方塊,一塊放在列表框的上面,底線與列表框頂斷對齊,另一塊放在列表框下面,底線跟列表框底線對齊.這樣就看不到這種突然消失的現(xiàn)象了。
效果是達(dá)到了,但是可能有些讀者還會有疑問:要遮住上下兩個項(xiàng)目,用遮罩不是更方便嗎,為什么要這么麻煩呢?
原因在于:這樣做會讓被遮罩層有動態(tài)文本,這就需要嵌入字體輪廓才能顯示文字,而且文字是從歌詞文件那里讀取的,什么字符都可能有,于是,就要為所有字符嵌入字體輪廓.也就是需要導(dǎo)入整個字體文件,結(jié)果就是導(dǎo)致文件很大(一般是幾M到十多M),使得加載的時間大大增加,瀏覽者會等得不耐煩.所以建議讀者還是不使用遮罩為佳.
接著就是制作鼠標(biāo)點(diǎn)擊控制歌詞的效果了。
要實(shí)現(xiàn)點(diǎn)擊歌詞的跳轉(zhuǎn)功能,在ITEMBUTTON按鈕里添加代碼：
on(release){
pos=_parent.timeValue[_name.slice(10)+_parent.startpoint] //獲得被點(diǎn)擊歌詞的相應(yīng)時間,其中,SLICE(10)是把ITEMBUTTON十個字符去掉,以獲得被點(diǎn)擊按鈕所在的索引.
_parent._parent.song.start(pos,1) //從點(diǎn)擊時間開始播放
gotoAndPlay(2) //表示高亮顯示被點(diǎn)擊的歌詞
}
大家現(xiàn)在可以下載源文件了：Player.rar
不過聲音文件太大,沒放到壓縮包里.大家可以從別處下載,或者點(diǎn)擊：download.incoo.com/blueidea/hbro/player/mp3player_x1.swf
然后也告訴大家聲音文件地址的通式：
download.incoo.com/blueidea/hbro/player/sound/歌名.mp3
聲音文件下載后,解壓上面的RAR文件.把它們放到SOUND文件夾下,注意聲音文件名要跟歌詞文件名一致喔(當(dāng)然不包括擴(kuò)展名).歌詞文件放在LYRICS文件夾下。
經(jīng)典論壇討論帖：
http://m.95time.cn/bbs/newsdetail.asp?id=2205817
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 FLASH打造LRC歌詞播放器 [3] 下一頁
◎進(jìn)入論壇Flash專欄版塊參加討論
|
第 1 頁 
第 4 頁 FLASH打造LRC歌詞播放器 [4]
