歌词算是分析完了.当然,歌词头的信息没有分析,这些内容将在显示中被忽略,读者有兴趣的话可以自己分析,文件头的意义大概如下：

[ti:黑色幽默]标题为黑色幽默
[ar:周杰伦]艺术家为周杰伦
[al:Jap]专辑为JAP
[by:歌词吾爱http://www.51lrc.com]来源为歌词吾爱http://www.51lrc.com
[offset:400]笔者不太清楚,大概是缓冲时间为400毫秒吧,有错的话请指出来。

接着就是让歌词显示在MC中,在预览图的歌词显示器里,播到哪句歌词,哪句就会闪烁;点击一句歌词,音乐会跳到相应位置。这是怎么做的呢?
首先,每一行字都是一个影片剪辑实例,在库里是同一影片剪辑.该剪辑有两帧,第一帧是正常时的状态,第二帧是音乐播到该歌词时的状态。此外,影片剪辑里还有一按钮,用于点击歌词。

下面就一起做这个MC:
新建一个MC,命名为ITEMBUTTON,在该MC里做一个动态文本,变量名为caption1,
然后在文本相应的图层插入一个关键帧,改变一下文本的颜色,使音乐播放到该歌词时有变色的效果.变量名改为caption2.(本来这是多此一举的事情,但不知为什么,变量名相同的话,第二帧老是显示不出文字,所以笔者被迫这样做)。
然后新建一个图层,在该图层新建一按钮,命名为ITEMBUTTON_BUTTON
接着新建一图层,在第一帧输入AS：

stop();//以防止两个状态在开始时交替变换.

至此,显示歌词的MC单元完成了。
把该MC拖到先前创建的LYRICSITEMS剪辑中.实例名为ITEMBUTTON0,假如你需要显示N行歌词,就复制N个,最后就是有N+1个ITEMBUTTON影片剪辑,实例名分别为ITEMBUTTON1,ITEMBUTTON2,...."ITEMBUTTON"+N(为什么是N+1个,在后面会解释).把这些剪辑按顺序从上到下排列好。

当然,这也可以用DUPLICATEMOVIECLIP来实现,但是笔者的机器太慢了,导致这样运行经常出问题,在各位的机里应该不会有此问题(笔者的机:C4,1.0G,内存128MB)

在LRC列表框里,定义一个函数MOVEUP(因为歌词向上移动所以就这样命名该函数),该函数要显示的只是跟时间有关的内容,而且其它内容对歌词主体播放会有影响,主要是数据类型不统一。
因为数组是经过排序的,根据ASCII排列规则,时间集中在一个区域(前提是歌词信息也标准,即变量名不以数字开头),这区域的两头都可能有跟时间没关的信息。
所以显示前先去掉前面和后面的歌词信息。
去掉方法，定义两个变量,STARTING,ENDING,表示歌词从哪句开始显示,哪句结束.
在LYRICSITEMS添加一个函数：

function moveUp(){
var starting
var ending
for (i=0; i>=timeValue.length-1; i++) {//从时间数组的前面读起
if (!isNaN(timeValue[i])) {//读到数据类型为数字的时候
starting = i;//表示到了时间的开始
break;//退出循环
}
}
for (i=timeValue.length-1; i>=0; i--) {//从时间数组的后面读起
if (!isNaN(timeValue[i])) {//读到数据类型为数字的时候
ending = i;//表示到了时间的末端
break;//退出循环
}//第二次循环也可以从STARTING开始,不过一般来说,从STARTING开始,循环的次数要多一些,所以就从TIMEVALUE.LENGTH-1开始往上循环.
}
}

下一步,让歌词随着歌曲的播放而进行高亮显示(其实就是让相应歌词的MC跳到第二帧)

根据TIMEVALUE数组的值来定位：
比如说:下面是一段歌词：
[00:15.84]难过 是因为闷了很久
[00:21.18]是因为想了太多
[00:24.91]是心理起了作用
在15秒84和21秒18之间,第一句歌词处于高亮状态
在21秒18和24秒91之间,第二句歌词处于高亮状态
据此定义一变量TEMPPOS定位歌词.
在MOVEUP函数里追加：

var pos=_parent.song.position//获得歌曲当前的位置
for (i=starting; i<=ending; i++) {//从歌词的时间信息项开始循环
if (i == ending || pos<=timeValue[i+1]*1000) {//当歌曲的时间处在两个相邻时间值之间或者播到末尾,简单地说就是歌词时间跟歌曲时间相对应的时候
    temppos = i;//获得要高亮显示的歌词的位置
    break;//并退出循环
}
}

预览图中,列表所显示的是高亮歌词及其上下4句歌词,这里涉及一个问题,就是该从哪句开始显示.为此定义一变量STARTPOINT，追加代码：

var shownum=9;//显示歌词的行数,为ITEMBUTTON实例数目.
var startpoint=temppos-Math.floor(shownum/2);//该数值使高亮歌词显示在列表框中间.
for(var i=0;i<=shownum-1;i++){
this["itembutton"+i].caption1=LyricsText[i+startpoint]
this["itembutton"+i].caption2=this["itembutton"+i].caption1
}//随着歌曲的播放,重置歌词的内容.
this["itembutton"+(temppos-startpoint)].gotoAndStop(2)//让播到的歌词高亮显示
this["itembutton"+(temppos-startpoint-1)].gotoAndStop(1);//让刚才高亮的歌词恢复原来的状态

函数主要部分是这样。
让MOVEUP函数在歌曲播放时不断执行,以同步显示歌词,加入：

this.onEnterFrame=function(){
moveUp()
}

如果大家按着笔者的教程来做,现在基本的效果应该出来了.先测试一下。

出处：蓝色理想
责任编辑：moby

上一页 FLASH打造LRC歌词播放器 [2] 下一页 FLASH打造LRC歌词播放器 [4]

◎进入论坛Flash专栏版块参加讨论