返回列表 回复 发帖

flash实时音乐真实频率变化(全as)正在直播教程

教程直播放在12楼以下,flash实时音乐真实频率变化,(非组件)

效果显示:http://k.thec.cn/liuping2006/music_jump_line/music_jump_line.swf


如果感大家兴趣,我将介绍制作方法。

实时音频跳动条的制作
Flash对声音的处理主要有:
就目前Flash的已有版本(Flash5、FlashMX、Flash2004、Flash8),Flash对声音文件的处理能力还是不够强大的。
mp3是目前网络上最为大众的声音格式,原因是mp3有高效率的压缩(约1/12),并能很好地保持原有声音的音质。
Flash有两种播放mp3的方法,一是将mp3导入Flash内部(直接放在时间帧上,如果声音文件较大,则会占用很多的帧;放在库中,用AS绑定声音),尽管flash可以再次压缩mp3,但仍会使swf文件增肥;二是将mp3放置在Flash外部,用AS将外部的mp3导入到swf播放文件中。但不管上述那种方法,都不能实时显示声音文件的频谱数据。在播放声音时,如果能实时地显示声音的频谱特性,像一些著名媒体播放器那样在播放声音时有许多跳动小块伴随着美妙的音乐舞动身姿,对欣赏者来说能起到“声色俱全”的作用。
   Flash本身不能直接采集到声音文件中的频谱数据,必需借助其它软件,如FlashAmp(适合较小mp3文件,Flash通过数组存贮来自FlashAmp收集到的mp3频谱数据,而如果mp3文件较大时,FlashAmp收集到的mp3频谱数据将会十分庞大)。而另一软件SwiftMP3在将mp3转成为swf时存贮了来自mp3中的音频数据等,并以变量名s0、s1、s2、s3、……、s17共18个变量表示。如某个mp3通过SwiftMP3转换成的swf中存贮了来自mp3中的下列数据:
Title = "";
Artist = "";
Album = "";
Id3 = "1";
// [Action in Frame 2]
// [Action in Frame 3]
s0 = "1";
s1 = "11";
s2 = "4";
s3 = "3";
s4 = "2";
s5 = "6";
s6 = "2";
s7 = "3";
s8 = "4";
s9 = "3";
s10 = "2";
s11 = "2";
s12 = "1";
s13 = "2";
s14 = "1";
s15 = "1";
s16 = "1";
s17 = "1";
// [Action in Frame 4]
s0 = "3";
s1 = "5";
s2 = "8";
s3 = "1";
s4 = "4";
s5 = "2";
s6 = "1";
s7 = "2";
s8 = "3";
s9 = "1";
s10 = "3";
s11 = "4";
s12 = "1";
s13 = "2";
s14 = "1";
s15 = "5";
s16 = "2";
//由于篇幅原因,中间部分省略
tellTarget("_level0"){
    stop();
    gotoAndPlay("");}

因此,在Flash中可以访问上述表中的所有变量,如标题名”Title”、艺术家” Artist”、专集” Album”、 Id3的值以及每一帧上的变量名及其变量值(s0 = "1";s1 = "11";s2 = "4";……;s17 = "2";)。下以一实例说明如何访问mp3中变量完成Flash中实时音频跳动条的制作
一、        准备素材
利用SwiftMP3处理几首mp3为swf,此名称分别为1.swf、2.swf、3.swf、….,并存放在一个名为mousic_lib的文件夹里。
二、        制作过程
①打开Flash新建一名为music_jump_line.fla的文件。设置此flash文件场景大小为89*70(目的是为以后其它场合需要它作为小附件时的调用)。
②创建一个名称为music_cell电影元件,它在库中的链接名取为music_cell,在此music_cell电影元件内图层1上创建3个关键帧。把主代码封存在一个电影元件里的目的也是为以后其它flash里要使用这个实时音频跳动条时提供方便,直接复制过去就行了。
在第1个关键帧上写如下as:
var g = 1;//定义一个变量g,用它来控制外部包含mp3音乐的1.swf、2.swf、3.swf文件名。
在第2个关键帧上写如下as:
stop();
//.................1.................
var col = 0x51E450;
//跳动块色
var colbt = 0xDDCE22;
//按钮色
var txtcol = 0xFFFFFF;
//进度显示字体颜色
this.createEmptyMovieClip("line_cell", 1);
with (line_cell) {
        moveTo(0, 0);
        beginFill(col);
        lineTo(4, 0);
        lineTo(4, 2);
        lineTo(0, 2);
        endFill();
        _visible = 0;
}
//......1........音乐跳动小块
//................2...................
for (var i = 0; i<18; i++) {
        line_cell.duplicateMovieClip("line_cell"+i, i+20,{_x: 5*i,_y:-1});        
        line_cell.duplicateMovieClip("m"+i, 40+I,{_x:5*i});        
}
//......2.....以上为最上层跳动块以及跳动竖条
this.createEmptyMovieClip("mm", 0);
mm.loadMovie("mousic_lib/"+g+".swf");
//.................3...................
onEnterFrame = function () {
        var mm_c = mm._currentframe;
        var mm_t = mm._totalframes;
        var mm_p = Math.round((100*mm_c/mm_t)*100)/100;
        if (mm_p<10) {
                pstext.text = "0"+mm_p+"%";
        } else {
                pstext.text = mm_p+"%";
        }
        pstext.setTextFormat(TF);
        // 文本格式设置时特别要注意文字内容必须放在"baifenbitext.setTextFormat(TF);"之前,否则设置无效!!!
        if (mm._currentframe == mm._totalframes) {
                g++;
                mm.loadMovie("mousic_lib/"+g+".swf");
        }
        if (mm.Id3 == undefined) {
                mytext.text = "load..";
                g = 1;
                mm.loadMovie("mousic_lib/"+g+".swf");
        }
        for (i in mm) {
                if (mm<20) {
                        for (var i = 0; i<18; i++) {
                                this["line_cell"+i]._y =-1-mm["s"+i]*4;
this["m"+i]._yscale= Math.floor((this["line_cell"+i]._y-this["m"+i]._y)/this["m"+i]._height)*100;
                        }
                }
        }
};
//.........3........
//....................4.......................
this.createEmptyMovieClip("playbtn", 6);
with (playbtn) {
        moveTo(65, 4);
        beginFill(colbt);
        lineTo(73, 9);
        lineTo(65, 14);
        lineTo(65, 4);
        endFill();
}
this.createEmptyMovieClip("stopbtn", 7);
with (stopbtn) {
        moveTo(14, 4);
        beginFill(colbt);
        lineTo(24, 4);
        lineTo(24, 14);
        lineTo(14, 14);
        lineTo(14, 4);
        endFill();
}
playbtn.onRelease = function() {
        delete onEnterFrame;
        unloadMovie("mm");
        gotoAndPlay(3);
};
stopbtn.onRelease = function() {
        unloadMovie("mm");
        delete onEnterFrame;
};
//.......4.......播放与停止按钮
//..................5..................
this.createEmptyMovieClip("nextbtn", 9);
with (nextbtn) {
        moveTo(80, 4);
        beginFill(colbt);
        lineTo(88, 8);
        lineTo(88, 4);
        lineTo(89, 4);
        lineTo(89, 14);
        lineTo(88, 14);
        lineTo(88, 10);
        lineTo(80, 14);
        lineTo(80, 4);
        endFill();
}
nextbtn.duplicateMovieClip("prevbtn", 10);
prevbtn._xscale = -100;
prevbtn._x = 89;
nextbtn.onRelease = function() {
        delete onEnterFrame;
        unloadMovie("mm");
        g++;
        gotoAndPlay(3);
};
prevbtn.onRelease = function() {
        delete onEnterFrame;
        unloadMovie("mm");
        g--;
        gotoAndPlay(3);
};
//......5......以上为前进与后退按钮
//................6................
this.createTextField("pstext", 8, 25, 2, 41, 20);
TF = new TextFormat();
TF.font = "Arial";
TF.size = 10;
TF.color = colbt;
TF.align = "center";
//........6..........以上为动态显示播放进度的文本
this.createEmptyMovieClip("bjline", -2); //.........背景..........
with (bjline) {
        lineStyle(0, 0x1A7133, 50);
        moveTo(0, 16);
        beginFill(0x003333, 90);
        lineTo(89, 16);
        lineTo(89, -50);
        lineTo(0, -50);
        lineTo(0, 16);
        endFill();
}
this.createEmptyMovieClip("line", -1);//跳动条底座水平线
with (line) {
        lineStyle(0, 0x00FF00, 50);
        moveTo(0, 0);
        lineTo(89, 0);
        lineTo(0, 0);
}
//...............背景"music"字................................
this.createTextField("sxl_text", -20, 10, -59, 70, 26);
TFS = new TextFormat();
TFS.font = "Arial Black";
TFS.size = 20;
TFS.color = 0x003939;
TFS.align = "center";
sxl_text.text = "music";
sxl_text.setTextFormat(TFS);
//...........................................................
在第3个关键帧上写如下as:
gotoAndStop(2);
③回到主场景,在第1帧上写as:
this.attachMovie("music_cell", "mc", 1,{_y:50});
//至此大功告成!
④测试此music_jump_line.swf文件,可以看到舞台上的绿色小精灵随着音乐翩翩起舞。通过下方的几个按钮可以控制音乐的播放与停止,前一首与后一首的选择。
三、        制作后记
1、        基本技术:
①if(条件) {        要执行的指令} 条件循环, 如果条件为 true,则 Flash 将运行条件后面花括号 ({}) 内的语句
②with (对象) {要执行的指令} 动作使用范围,参数计算对象中的表达式和动作。这可以使您不必重复书写对象的名称或路径
③for(初始值; 循环条件; 计算的表达式) {        循环体内要执行的指令} 条件循环
④myMovieClip.createEmptyMovieClip (新实例名, 深度)创建作为现有影片剪辑子级的空影片剪辑方法
⑤myMovieClip.createTextField (新实例名, 深度,x坐标,y坐标,文本宽度,文本高度) 创建作为由 MovieClip 参数指定的影片剪辑子级的新空文本字段的方法
⑥myMovieClip.duplicateMovieClip(新实例名, 深度[,初始值]) 复制影片剪辑方法
⑦myMovieClip.onEnterFrame=function(){}以帧频不断刷新的事件处理函数
⑧myMovieClip.onRelease () {}点击后释放时的事件处理函数
⑨myMovieClip.attachMovie(“库中链接名”, 新实例名, 深度[,初始值] ) 从库中取一个元件并将其附加到舞台上由 MovieClip 指定的影片中的方法
2、        关键技术:
    for (i in mm) {//遍历电影实例mm
        if (mm<20) {//如果mm中的变量个数小于20
        for (var i = 0; i<18; i++) {//因为mm中的变量s有18个
        this["line_cell"+i]._y = -1-mm["s"+i]*2;/*各个跳动小块的高度变化由mm中的对应数值来影响。负号是因为各个跳动小块的注册点在左上角,因此,要使它向上跳动时,其y值应取负;*2是因为增大向上跳动的幅度,使运动明显。
                                外部导入的1.swf、2.swf、….、n.swf。音乐文件中含有音乐数据其变量名为s0、s1、s2、s3、....s17,它们在每一帧上的值都有变化*/
this["m"+i]._yscale= Math.floor((this["line_cell"+i]._y-this["m"+i]._y)/this["m"+i]._height)*100;/*跳动小竖条在y轴方向上的缩放由上述的跳动小块的y值决定*/
                        }
                }
        }
};
3、        基本特点:
①        此软件按顺序播放外部音乐swf文件,到最后一首时会自动跳到第一首从头再播,一直loop。
②        外部音乐swf文件可以不指定个数,music_jump_line.swf会自动控制播放。
特别说明:上述代码考虑了美工。下面的这个是没有加美工的:
http://k.thec.cn/liuping2006/mus ... sic_jump_line_p.swf是加了背景等效果。

感谢大家捧场教程在下面
看下现说了.
好啊..赶兴趣,,讲讲怎么做?
不错啊.写个教程啊.
自顶 别下去了
原帖由 sxl001 于 2006-9-2 14:43 发表
自顶 别下去了
看过了.如果想要做的话.没有教程.就....
所以呢.楼主介绍下制作方法.那么大家更加会棒场的啦.
楼主的这段代码即将是历史的财富了,

flash.media.SoundMixer:
computeSpectrum(outputArray:ByteArray, FFTMode:Boolean = false, stretchFactor:int = 0):void

不过还是要说,flash对声音的支持唉,还是不够强大的。
很感兴趣!
AS3.0 可以直接做这样的声波
FLASH 9  PLAYER9才可以 一共才几行
大家等吧。。。。 呵呵
IT民工
效果很好 以前看到过 也做过不少,只是电平条好象没有缓冲  请介绍详细方法!!
对呀,我这个就是了:http://wwm.oot.cn/
http://wwm.oot.cn
装了宽带,下班后也可以上网,终于有时间可以把教程写出来与大家交流了。由于我是现写,比较慢,大家也可以跟我一起来完成这个制作。好吗?别笑我,

特别说明://欢迎复制、转载,但请注明出处:闪吧sxl001,QQ:362987636//为了方便讲解与制作,部分元件没有用as写!

打开flash,并保存名为music_jump_cell.fla,在此music_jump_cell.fla里新建一个名叫music_cell的电影元件(说明:建一个元件的目的是为了需要时调出它的方便),在它的第一帧设置一个变量:var g = 1;//外部swf包含音乐的文件名序号,下面会看到它变化的情况:即1、2、....、n、
见图:1.jpg
第2帧的代码我先帖出来(见图:2.jpg),我再一一解释在其第2帧的代码含义:
var line_cell_color = 0xE90CDE;
//跳动块色
var ps_txt_col = 0xFFFFFF;
//进度显示字体颜色
var center_line_color = 0xFFFFFF;
//音乐条基底线条色
//........以上是初始颜色值........
this.createEmptyMovieClip("line_cell", 1);
with (line_cell) {
        moveTo(0, 0);
        beginFill(line_cell_color);
        lineTo(4, 0);
        lineTo(4, 2);
        lineTo(0, 2);
        endFill();
        _visible = 0;
}
//......1........音乐跳动小块,就是那个跳在最上方的小长方形,它的长与宽分别是:4*2
//................2...................
for (var i = 0; i<18; i++) {
        line_cell.duplicateMovieClip("line_cell"+i, i+20, {_x:5*i, _y:-1});//复制18个上述的那个小长方形,名称分别是line_cell0、line_cell1、....line_cell17
                                                                                                                               //并设置它们的初始坐标
        line_cell.duplicateMovieClip("m"+i, 40+i, {_x:5*i});//复制18个上述的那个小长方形,名称分别是m0、m1、...、m17,并设置它们的初始坐标
}
//......2.....以上为最上层跳动块以及跳动竖条(就是那个关键的带缓动效果的)
this.createEmptyMovieClip("mm", 0);//再创建一个mc,名称为mm
mm.loadMovie("./music_lib/"+g+".swf");//导入外部1.mp3、2.mp3、...、n.mp3音乐文件经过转换的1.swf、2.swf、....、n.swf
onEnterFrame = function () {                                      //检测装载进度情况
        var mmload = mm.getBytesLoaded();
        var mmtotal = mm.getBytesTotal();
        var mmposition = Math.round(mmload/mmtotal)*100;
        if (mmload == mmtotal) {
                delete onEnterFrame;//装载完成时删除刷新
                _root.loading_mc._visible = false;//进度条不可见
                nextFrame();                    //装载完成时跳到第三帧去
        } else {
                _root.loading_mc._visible = true;//显示装载进度
                stop();
        }
};

[ 本帖最后由 sxl001 于 2006-9-15 02:17 编辑 ]
1.jpg
2.jpg
关注
music_line内的第3个关键帧:(见图:3.jpg)
//欢迎复制、转载,但请注明出处:闪吧sxl001,QQ:362987636//
onEnterFrame = function () {
        var mm_c = mm._currentframe;//装入mm的外部音乐数据的当前帧
        var mm_t = mm._totalframes;//装入mm的外部音乐数据的总帧数
        var mm_p = Math.round((100*mm_c/mm_t)*100)/100;//百分比保留两位小数,目的是增加点动态效果
        if (mm_p<10) {
                pstext.text = "0"+mm_p+"%";//显示音乐完成百分比,如果小于0,则在数字前加上0
        } else {
                pstext.text = mm_p+"%";//显示音乐完成百分比
        }
        pstext.setTextFormat(TF);
        // 文本格式设置时特别要注意文字内容必须放在"baifenbitext.setTextFormat(TF);"之前,否则设置无效!!!
        if (mm._currentframe == mm._totalframes) {//如果一首歌全部播放完时
                g++;                                            
                mm.loadMovie("mousic_lib/"+g+".swf");//自动播放下一首歌
        }
        if (mm.Id3 == undefined) {                        //如果音乐数据没导入成功时,也就是在最后一首歌播放完时
                pstext.text = "";                     //文本不显示
                g = 1;                                        //自动跳转到播放第一首歌
                mm.loadMovie("mousic_lib/"+g+".swf");
        }
        for (i in mm) {                                                        //遍历mm  
                if (mm<20) {                                  /*mm中包含有外部导入的音乐文件带来的s0、s1、....、s17等变量,s0、s1、....、s17变量
                                                                                                   在外部.swf文件里就是代表音频数据的变化值,我们这个播放器关键的地方就是这里了,
                                                                                                     也就是取得其中的变化值给那18个跳动小精灵,使它们随着s0、s1、....、s17的变化而
                                                                                                    产 生上下跳动的运动。*/
                        for (var i = 0; i<18; i++) {
                                var mmsi = mm["s"+i];//mm中的s0、s1、....、s17
                                var li = this["line_cell"+i];//画面上看到的那些最上面的跳动小方块,也就是那么4*2的小精灵了,
                                var mi = this["m"+i];//画面上看到的那些具有缓动效果的m0、m1、....、m17,
                                li._y = -1-mmsi*4;//小精灵由于画线时注册点在左上角,为让它向上跳起,所以取负值了
                                mi._yscale = Math.floor((-1-mmsi*4-mi._y)/mi._height)*100;//缓动效果的m0、m1、....、m17在y轴上的
                                                                                                                                                                                          //缩放值。
                        }
                }
        }
};
//.............1.............................
this.createTextField("pstext", 8, 50, 2, 20, 10);
TF = new TextFormat();
TF.font = "Arial";
TF.size = 4;
TF.align = "center";
TF.color = ps_txt_col;
//.......1.............为动态显示播放进度的文本........
//........................2........................
this.createEmptyMovieClip("centerline", -1);
//跳动条底座水平线
with (centerline) {
        lineStyle(0, center_line_color, 100);
        moveTo(0, 0);
        lineTo(89, 0);
        lineTo(0, 0);
}
//.................2........是跳动条底座水平线
3.jpg
music_line内第四个关键帧上的as:
                                                             gotoAndStop(2);//跳回到第2帧
(见图:4.jpg)

[ 本帖最后由 sxl001 于 2006-9-10 03:19 编辑 ]
4.jpg
上面完成的是主要工作之一,接下来返回返回主场景
主场景右下方放置4个按钮,用来控制播放。(见图:5.jpg)
按钮的名称分别是:stop_btn、play_btn、next_btn、prev_btn。
新建一图层放as:(见图:6.jpg)
this.attachMovie("music_cell", "mc", 1, {_x:160, _y:220});//将库中的那个包含四个关键帧的电影元件调出到主场景上来,并设置它的坐标值
mc._xscale = 260;//放大
mc._yscale = 260;//放大
stop_btn.onRelease = function() {//点停止播放按钮时
        unloadMovie("mc.mm");//卸载mc里面的那个包含音乐的mm
        delete mc.onEnterFrame;//删除mc里的刷新,释放内存
};
play_btn.onRelease = function() {
        delete mc.onEnterFrame;//删除mc里的刷新,释放内存
        unloadMovie("mc.mm");//卸载mc里面的那个包含音乐的mm
        mc.gotoAndPlay(4);//mc跳转到第4帧以使重新导入新的音乐数据
};
next_btn.onRelease = function() {
        delete mc.onEnterFrame;//删除mc里的刷新,释放内存
        unloadMovie("mc.mm"); //卸载mc里面的那个包含音乐的mm
        mc.g++;                      //mc.g++表示mc里导入的外部音乐文件的名称增加,即向后跳到下一首
        mc.gotoAndPlay(4);  //mc跳转到第4帧以使重新导入新的音乐数据
};
prev_btn.onRelease = function() {
        delete mc.onEnterFrame;//删除mc里的刷新,释放内存
        unloadMovie("mc.mm");  //卸载mc里面的那个包含音乐的mm,
        mc.g--;                            //mc.g--表示mc里导入的外部音乐文件的名称减少,即向前跳到上一首

        mc.gotoAndPlay(4);  //mc跳转到第4帧以使重新导入新的音乐数据
};

[ 本帖最后由 sxl001 于 2006-9-10 03:20 编辑 ]
5.jpg
6.jpg
赶上直播了
非常 非常好的教程,等你这个写完 我想一定要加上一个音量控制 这个音量控制要与电平条相连,,,,,,音量小 电平跳动幅度小 反之则大 期盼..........
接下来,加上背景,(见图:7.jpg)

[ 本帖最后由 sxl001 于 2006-9-10 03:20 编辑 ]
7.jpg
接下来在同目录下建一个名叫music_lib的文件夹,再请出SwiftMP3,打开SwiftMP3,在SwiftMP3打开的界面中点左边的那个"+"按钮,选择你喜欢的几首mp3,
(见图:8.jpg)  再点中间最右边的那个齿轮按钮,再点下面的那个"OK"按钮,开始转换mp3为swf(见图:9.jpg),将上述转换的swf文件保存到刚才建立的名叫"music_lib"文件夹里,并分别将它们的名字改为:1.swf、2.swf、3.swf、.....、n.swf(见图:10.jpg)

[ 本帖最后由 sxl001 于 2006-9-10 03:21 编辑 ]
8.jpg
9.jpg
10.jpg
接下来,发布19楼制作的music_jump_cell.fla为music_jump_cell.swf,与文件夹music_lib在同一目录下,打开刚才发布的music_jump_cell.swf就可以开始你的音乐之旅了(见图:11.jpg),
[attach]aid[/attach]
尽情享受吧!祝你好心情!就写到这里吧,第一次写教程,写得不好的地方,请指出,非常感谢你的捧场!

效果显示:http://k.thec.cn/liuping2006/music_jump_line/music_jump_line.swf

特别说明:我这个教程是为像我这样的新手所写,为了新手们(我和你)的共同提高,我没有放上源程序,目的就是通过上面你自己的制作,去感悟才能真正提高,如果你认为源程序是你必需的,可以QQ:285510591或者说在闪吧里给我发短信。我将给予源程序!

[ 本帖最后由 sxl001 于 2006-9-10 03:25 编辑 ]
11.jpg
谢谢楼主 我做了一下 听到声音了 可是电平条不动!
好东西,顶一个先~!
..先记录起来了...
好东西!
向大家学习!
由于网络问题,原来的地址http://k.thec.cn/liuping2006/music_jump_line/music_jump_line.swf有时打不开。
现传上播放文件,供大家下载到本地播放,可以将mousic_lib文件夹里的歌曲换为自己喜欢的歌曲,命名规则是1.swf、2.swf、3.swf、....、n.swf、

下载完后请发表评论

[ 本帖最后由 sxl001 于 2006-9-17 12:19 编辑 ]

music_jump_cell.rar (77.98 KB)

收藏一下.
www.shch8.com
收下了 谢谢 不知道反复跳动的百分数是指的什么
原帖由 ttbbtt 于 2006-9-17 09:10 PM 发表
收下了 谢谢 不知道反复跳动的百分数是指的什么
楼上所说的是不是指那个数据显示,它是显示当前音乐播放进度
试验成功~!
My Blog:http://www.heavenfoliage.cn
返回列表