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()
}
如果大家按着笔者的教程来做,现在基本的效果应该出来了.先测试一下.
只是发现歌词是跳动的,不是平滑的向上滚动.
怎么让歌词平滑滚动呢?笔者将在下一节介绍
怎么让歌词平滑滚动呢？
在整个容器里,只显示了SHOWNUM行歌词,所以,不可能就是简单地让歌词在播放过程中一直地上升.
我们主要是让两句歌词之间能够缓慢地上升,而不是播到相应歌词才让歌词跳动.
以以下两句歌词为例:
[00:15.84]难过 是因为闷了很久
[00:21.18]是因为想了太多
在15秒84和21秒18之间,我们让列表框的所有项目匀速移动一个列表框项目的高度.这样,当时间无限接近21秒18的时候,列表框的所有项目移动的距离接近于一个列表框项目的高度.当时间到21秒18,ONENTERFRAME事件响应时,列表框的内容恰好要更改,因为高亮显示的歌词发生改变.更改是原列表框第一项去掉,其它项目相应地往上移动,最后追加后面还没显示的歌词的第一行.所以,假如列表框项目实际上不移动的话,就会给人一种刚好移动了也恰好是一个列表框项目高度.因此,此时让列表框的位置恢复到原来15秒84时的位置,就不会有跳动的感觉.
知道了这个原理以后,就开始写这段匀速移动的代码了.
这是个初中的物理问题,解决起来应该不难.
我们主要是要求出列表框项目移动的距离△S,然后求出列表框项目的位置.这时,可能会有读者问:那不就是要设置SHOWNUM个列表框的位置吗?从上面的分析可见,所有列表框项目的△S值是相同的,所以,我们干脆控制整个列表框的位置属性.
根据匀速运动的公式,有
△S=V*△T
其中△T就是当前歌曲时间与歌词时间信息的差值,即当前时间(T-15.84).那么V怎么求呢?
我们刚才说了,在两句歌词的时间差里,我们需要移动一个列表框项目的距离S,代入上述公式,得
S=V*(21.18-15.84)
V=S/(21,18-15.84)
解出了V以后,就可以把距离跟时间的关系写出来.
△S=S/(T-15.84)*(21.18-15.84) (其中S为常数)
把该函数用于AS中.
S就是一个列表框的高度itembutton0._height,15.84就是以当前歌词位置TEMPPOS为下标的数组项的值timeValue[temppos],21,18就是当前歌词下一项的时间信息值timeValue[temppos+1],当前歌曲位置T就是歌曲位置pos/1000(因为上面设置了pos=_parent.song.duration,而duration是以毫秒为单位的,TIMEVALUE数组是以秒为单位,所以需要转换一下单位)
于是,控制列表框位置的代码就写出来了.
delta=itembutton._height*(pos/1000-timeValue[temppos])/ (timeValue[temppos+1]-timeValue[temppos]);
该代码添加在MOVEUP函数里.
然后列表框的位置就等于列表框初始值减去DELTA(因为往上为负,所以是减)
为了获得初始值,在MOVEUP函数的外面追加:
inity=_y
接着就可以在MOVEUP函数里追加:
_y=inity-delta
此时,测试影片,就可以看到平滑移动的效果了.但是,当歌词高亮显示发生改变的时候,你会看到列表框上面一项突然消失,同时下面弹出下一项.这个该怎么消除呢?
很简单,就在主场景画两块颜色跟背景颜色一样,大小跟列表框项目相同的矩形方块,一块放在列表框的上面,底线与列表框顶断对齐,另一块放在列表框下面,底线跟列表框底线对齐.这样就看不到这种突然消失的现象了.
效果是达到了,但是可能有些读者还会有疑问:要遮住上下两个项目,用遮罩不是更方便吗,为什么要这么麻烦呢?
原因在于:这样做会让被遮罩层有动态文本,这就需要嵌入字体轮廓才能显示文字,而且文字是从歌词文件那里读取的,什么字符都可能有,于是,就要为所有字符嵌入字体轮廓.也就是需要导入整个字体文件,结果就是导致文件很大(一般是几M到十多M),使得加载的时间大大增加,浏览者会等得不耐烦.所以建议读者还是不使用遮罩为佳. |
