注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

FlyingWind

 
 
 

日志

 
 
 
 

传统歌词同步显示类Actionscript3.0开发  

2008-08-27 21:17:39|  分类: Flash制作教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
传统歌词同步显示类Actionscript3.0开发
更新时间:2008/08/30   11:39


    你是flash制作爱好者吗?
    如果你是,我想你一定做过歌词同步显示的flash吧!你是不是感觉非常麻烦呢?
    如果是的话,不要着急。下面我将告诉你我的新创秘笈。让你不再为此发愁。


    以前我用过三四种方法做歌词同步显示,虽然做的效果还可以,但我要花很多的时间去实现它。我想如果做一个flash把大多数时间花在这上面太不值了。因此我就想如果能用程序控制那就好了。后来我就自己开发了一个类来实现歌词同步显示。今天我在这里与大家分享一下。(虽然这个类只能实现传统歌词同步显示,但是已有了很大的进步。我将在一步工作中开发一个能实现卡拉OK形式的歌词同步显示,大家慢慢等待吧!)

下面我教大家怎样使用本人开发的类
类的源文件在本日志 的后面,直接复制保存为TraditionLyricsDisplay.as文件(注意大小写,且不要改名)
步骤1-5请看下面的日志
Flash音量控件(actionscript 3.0)
请大家一定要看,否则配置不正确都无法使用。

6.此类要传递三个参数public function TraditionLyricsDisplay(lyrics:Array,size:int,loop1:Boolean)
lyrics:Array:lyrics是一个二维数组保存歌词播放的时间和歌词;
size:int:size是一个int形变量,用于设置歌词字体的大小;
loop1:Boolean:loop1是一个Boolean变量true表示歌词将循环显示,false表示歌词只显示一次。

上面三个参数,最难的第一个参数,它有特殊的要求,下面我将向大家介绍;
请不要心急:先看一下我写的一个例子,达到先入为主效果后,我再解释;
将下面代码放在第一帧中

var str:Array=[
["00:01.58","她的眼睛会下雨"],
["00:03.56","作词:和平的战役  作曲:和平的战役 林距离"],
["00:05.17","演唱:胡歌"],
["00:12.45","她的眼睛是善感得会下雨"],
["00:15.96","她的脚下是洛阳城的风景"],
["00:19.00","晴朗天已经慢慢成为过去"],
["00:22.32","删不掉云彩记载他的信息"],
["00:25.49","那感情被她珍藏几个世纪"],
["00:28.60","在窗前月光慢慢将它抹去"],
["00:31.57","不经意花香扑满你的日记"],
["00:34.89","别吵醒让夜安慰让她睡去"],
["00:38.28","荡秋千 秋千荡漾着童年 荡几个轮回"],
["00:44.06","说誓言 誓言说透了昨天 说了一世的悲"],
["00:49.93","忽然间 翩翩风华的少年 风干了书眉"],
["00:55.95","她眼前 是那落雨的季节 落了一叶的美"],
["01:02.42","摘朵木叶吹 往那心上人儿吹 彩虹在潆洄"],
["01:08.83","吹 往那相思海边吹 思念被包围"],
["01:15.99","吹 往那情字眼里吹 温暖一生一次的情味"],
["01:21.49","酒不再陈年 花期已改变 不再想错或与对"],
["01:27.98","她扎着 一帘的马尾 和誓言来幽会"],
["01:34.07","那妩媚 和她曾经的心碎 眼神多憔悴"],
["01:40.65","那蔷薇 怀着爱的慈悲 用心来调味"],
["01:46.76","在深闺 那段情怅的芦苇 落下一岸的灰"],
["01:52.82","她在流着哗啦啦的眼泪"],
["01:55.88","她的心里不停地在想谁"],
["01:58.91","我的世界漫无边际着她的雨水"],
["02:03.18","滴滴落在手心手背"],
["02:05.37","她在流着哗啦啦的眼泪"],
["02:08.39","她只需要一点点的安慰"],
["02:11.42","我的知觉不能走出这爱的重围"],
["02:15.68","谁能给结局的完美"],
["02:18.20","风霜掩饰不了最深的脆弱"],
["02:23.51","她在隐隐地作痛 岁月依旧很懵懂"],
["02:30.08","许多年华依然不变泪已凋谢"],
["02:36.69","我的诺言背叛荒芜了从前"],
["02:43.00","她在流着哗啦啦的眼泪"],
["02:46.50","她的心里不停地在想谁"],
["02:49.51","我的世界漫无边际着她的雨水"],
["02:53.76","滴滴落在手心手背"],
["02:56.02","她在流着哗啦啦的眼泪"],
["02:58.99","她只需要一点点的安慰"],
["03:02.15","我的知觉不能走出这爱的重围"],
["03:06.19","谁能给结局的完美"],
["03:08.68","她在流着哗啦啦的眼泪"],
["03:11.68","她的心里不停地在想谁"],
["03:14.78","我的世界漫无边际着她的雨水"],
["03:18.81","滴滴落在手心手背"],
["03:21.16","她在流着哗啦啦的眼泪"],
["03:24.11","她只需要一点点的安慰"],
["03:27.41","我的知觉不能走出这爱的重围"],
["03:31.54","谁能给结局的完美"],
["03:34.05","她在流着哗啦啦的眼泪"],
["03:36.74","她只需要一点点的安慰"],
["03:39.99","我的知觉不能走出这爱的重围"],
["03:44.17","谁能给结局的完美"]
];
var size:int=30;
var TLD:TraditionLyricsDisplay=new TraditionLyricsDisplay(str,size,false);

TLD.x=0;
TLD.y=30;
addChild(TLD);

效果如下面的flash,本flash中的音量控件是用的另外一个类(请看Flash音量控件(actionscript 3.0)日志)

    

flash下载

你已经饱了眼福了,该学习学习了。我先该向大家说具体一点了。

A.先向大家介绍二维数组的建立,这个很重要哦。
   var   ss:Array=[[a1,a2,....,an],[a1,a2,....,an]];
  上面就是建立二维数组的语法注意红色的括号不能少;蓝色的括号之间用逗号分开(输代码时一定要用英文输入   法)。
B.本类用的是一个N行二列的二维数组,且数词元素都是字符串
C.如果你注意了这些使用此类就没有什么难的了;如果你现在遇到一个让头痛的问题的话,请不要急下面将为你解决。让喝一杯茶吧。


D.让大家头痛的问题,我想只有一个就是歌词数组的建立,如果要你自己输入的话,这可是一个大工程哦。
  大家想一想有没有好的方法能让你快速建立好数组呢?
   答案当然是肯定的。
 帮为帮到底
下面我教你们一绝招

I.先用千千静听编辑好歌词;在千千静听歌词编辑状态下将歌词复制出来(一定要是复制出来的千万不要将歌词保存后再要记事本打开)。然后粘贴到word中。删除不必要的行。
下面以我做的例子中的一小段为例:

[00:12.45]她的眼睛是善感得会下雨
[00:15.96]她的脚下是洛阳城的风景
[00:19.00]晴朗天已经慢慢成为过去
[00:22.32]删不掉云彩记载他的信息
[00:25.49]那感情被她珍藏几个世纪
[00:28.60]在窗前月光慢慢将它抹去
[00:31.57]不经意花香扑满你的日记
[00:34.89]别吵醒让夜安慰让她睡去
[00:37.96]
[00:38.28]荡秋千 秋千荡漾着童年 荡几个轮回
[00:44.06]说誓言 誓言说透了昨天 说了一世的悲
[00:49.93]忽然间 翩翩风华的少年 风干了书眉

II.按Ctrl+F弹出查找替换对话框,选择替换选项卡
  在查找内容中输入  [       替换中输入[“      替换全部
  再在查找内容中输入  ]       替换中输入”,“      替换全部
  然后在查找内容中输入  ^p       替换中输入"],^p      替换全部

替换后:

[“00:12.45”,”她的眼睛是善感得会下雨”],

[“00:15.96”,”她的脚下是洛阳城的风景”],

[“00:19.00”,”晴朗天已经慢慢成为过去”],

[“00:22.32”,”删不掉云彩记载他的信息”],

[“00:25.49”,”那感情被她珍藏几个世纪”],

[“00:28.60”,”在窗前月光慢慢将它抹去”],

[“00:31.57”,”不经意花香扑满你的日记”],

[“00:34.89”,”别吵醒让夜安慰让她睡去”],

[“00:37.96”,”“],

[“00:38.28”,”荡秋千 秋千荡漾着童年 荡几个轮回”],

[“00:44.06”,”说誓言 誓言说透了昨天 说了一世的悲”],

[“00:49.93”,”忽然间 翩翩风华的少年 风干了书眉”],


现在差不多完成了,将最后的那个绝色的逗号去掉

然后复制替换上面二维数组中蓝色的部分就可以 了

简单吧。。


这次就到这里了,下次再与大家分享其它方面的


 


源代码:更新时间:2008/08/30   11:30
/*
 * Tradition Lyrics Display
 * -----------------
 * Written by Dai yiyuan
 *
 *   My blog address
 *  http://colorfuldiary.blog.163.com
 *
 * Please mail me if you
 *- 've found bugs
 *- like this program
 *- don't like a particular feature
 *- would like something to be modified
 *
 *  If you want to use this program ,please read the following first
 *  
 *
*/
package {
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldType;
    import flash.text.TextField;
    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.filters.BevelFilter;
    import flash.filters.GlowFilter;
    import flash.filters.BitmapFilterType;
    import flash.filters.BitmapFilterQuality;


    public class TraditionLyricsDisplay extends MovieClip {
        var lyrics:Array;
        var txt1:TextField=new TextField();
        var maskShape:Shape=new Shape();
        var myFormat:TextFormat = new TextFormat();
        var myTimer:Timer=new Timer(80,0);
        var i:int=0;
        var loop1:Boolean=false;

        //constructor with three parameters
        //lyrics:Array   a array has the data of lyrics and display time
        //lyrics is a two-dimension array variable 
        //size:int    The fontsize
        //loop1:Boolean   true:Circulate display;  false:display once
        //the first dimension store the time for the lyrics display
        //the second dimension store the lyrics
        public function TraditionLyricsDisplay(lyrics:Array,size:int,loop1:Boolean) {
            this.lyrics=lyrics;
            this.loop1=loop1;
            myFormat.color=0xff0000;
            myFormat.size=size;
            myFormat.align=TextFormatAlign.LEFT;
            myFormat.font="Verdana";
            //Create BevelFilter for txt
            var bevel:BevelFilter=new BevelFilter();
            bevel.distance=8;
            bevel.angle=45;
            bevel.highlightColor=0xffffff;
            bevel.highlightAlpha=0.8;
            bevel.shadowColor=0xFF0000;
            bevel.shadowAlpha=1;
            bevel.blurX=3;
            bevel.blurY=3;
            bevel.strength=1;
            bevel.quality=BitmapFilterQuality.LOW;
            bevel.type=BitmapFilterType.INNER;
            bevel.knockout=false;
            //Create GlowFilter for txt
            var glow:GlowFilter=new GlowFilter();
            glow.alpha=0.8;
            glow.blurX=3;
            glow.blurY=3;
            glow.strength=1;
            glow.quality=BitmapFilterQuality.LOW;
            glow.color=0xff0000;

            txt1.defaultTextFormat=myFormat;
            txt1.autoSize=TextFieldAutoSize.LEFT;
            txt1.filters=[bevel,glow];
            txt1.x=0;
            txt1.y=0;
            txt1.appendText("  ");

            maskShape.graphics.beginFill(0xff5500);
            maskShape.graphics.drawRect(0,0,1,txt1.height);
            maskShape.graphics.endFill();
            maskShape.x=0;
            maskShape.y=0;
            txt1.mask=maskShape;
            this.addChild(maskShape);
            this.addChild(txt1);
           
            myTimer.addEventListener("timer", showLyrics);
            myTimer.start();
        }
        private function showLyrics(evt:TimerEvent):void {
            var num:int=myTimer.currentCount;
            var time:Number=num * 80;
            var temp:Number=0;
            if (i<lyrics.length) {
                temp=Number(lyrics[i][0].substr(0,2))*60+Number(lyrics[i][0].substr(3,5));
                if (time >= 1000*temp) {
                    txt1.replaceText(0,txt1.length,lyrics[i][1]);
                    i++;
                    this.width=txt1.width;
                    maskShape.width=txt1.width;
                   
                }
            } else {
                myTimer.reset();
                if (loop1) {
                    myTimer.start();
                }
                i=0;
            }

        }
    }
}
  评论这张
 
阅读(340)| 评论(6)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017