免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享

第二十六课:声音的使用(Part3)

本文来自:★flash之路-flash技术交流★ 转帖请注明出处! 作者:网雨霏霏 您是第4434个浏览者

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
flashroad友情提示:
“点评”不是“回帖”!
本节接着上一节的内容来。上一节我们已经制作好了控制音乐播放与停止的按钮。本节我们的目的是将swf动画制作的更人性化一些。

一、制作随音乐起舞的“频谱”
【友情提示】由于AS2无法实现实时频谱,所以
该频谱是“死的”,不会随着音乐的节奏给出实时反馈。但如果是AS3却可以实现!!!因此,如果可以,大家最好是学习AS3吧,功能超级强劲。
接上一课的内容继续充实东东
1、按Ctrl+F8插入影片剪辑元件
2、使用矩形工具(边框为无色、填充为蓝色)制作一个小长条【就是播放器播放音乐时的频谱分析,由多个小条组成,长短伸缩不定的效果】。选中它,然后按住Alt键的同时向旁边拖动就会复制出来一个,不要松开Alt键,接着拖出五个来(这样一共有六个大小一样的蓝色长条)
注意:
a、拖动之前先选择对象,否则会将对象变形
b、拖完后,使用鼠标配合键盘的方向键调节他们的距离
c、按Ctrl+k键 打开对齐面板 如图操作:


一定不能选择“与舞台对齐”!操作后,就可以将它们等距离的并排在一起

3、在保证“选择工具”状态下,用鼠标框选(就是拖出一个大号的长方形)右边五个长条,单击菜单栏中的修改--时间轴--分散到图层就会将这个六个长条分离到六个图层中(便于下面的操作互不干扰)

4、现在我们要在时间轴的第30帧处插入关键帧。如果一个层一个层分别操作太麻烦,所以我们有简易办法。大家注意看:
方法有两种:
a、鼠标移至时间轴的最顶端的图层处的第30帧(注意,只是移动到这个位置,千万不要单击哦),从上往下竖直拖动鼠标到最下一层
b、鼠标单击时间轴的最顶端的图层处的第30帧,松开鼠标(这个操作就是选择该帧);按住Shift键不放单击最下面一个图层的第30帧

这样就同时选中了六个图层的30帧,松开鼠标;按F6键(这样六个图层的第30帧分别都加入了关键帧)
5、现在我们要将各层同时制作“形状补间”:
在第五帧上按照步骤4的方法同时选中6个图层的第五帧,然后右键单击选择“创建补间形状”


6、由于音乐刚开始播放时,频谱是在最下面,所以我们的第一帧中的长条应该是最短的:


【因为频谱本身就很小,所以,可以适当放大一下屏幕的百分比(图示是放大到2倍)】
现在,就无法按照上面的技巧进行批量操作了。我们需要在每一个图层上多增加一到两个关键帧(单击帧后,按F6键即可),关键帧的位置不要重复,弄的错落有致一些
7、分别在每一层的新加入的关键帧上,使用任意变形工具,将长条进行放大或者缩小(只进行纵向缩放)。
为了让频谱动画能连贯起来,我们在35帧处再将第一帧复制过来:


8、制作完毕后,单击时间轴左边的“场景一”进入主场景,然后打开库面板,将刚才制作好的频谱动画拖放到舞台上

这样一来,测试影片时发现:不用管播放还是停止,频谱都在动。所以还需要加代码。
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

友情提示:单击下列任意一个表情,即可瞬间自动回复本帖!

好贴......
郁闷......
开心......
擦汗......
鄙视......
狂怒
谢谢
爱你呦
拜托了
嗯嗯
OMG
求关注
伤心......
无奈.....
无奈.....
无奈.....
无奈.....
无奈.....
哈哈哈
NO
OK
what
我来了

最近访问本帖者列表:

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by 爱秀代码,分享从这里开始,精彩与您同在

点评
B Color Smilies

您还可以输入:个字符
X

X

二、在按钮上加AS代码,在控制音乐的播放与否的同时,控制频谱的动画是否播放。
1、要控制影片剪辑,首先必须给它一个名字。因此在舞台上单击这个影片剪辑,在属性面板中给他一个容易记的名字(我的是pinpu)



2、现在开始编辑代码:
a、播放按钮,增加代码:
pinpu.play()

b、停止按钮,增加代码:
pinpu.stop()

测试时发现,影片刚开始时,声音文件还没有播放呢,这个频谱就跳动起来了。还有,单击停止按钮后,声音没有了,频谱应该缩到最小,但实际上,频谱没有缩到最小。
所以,上面的代码应该更改一下。更改成下面的样子就OK啦:
3、代码更改:

a、播放按钮,修改后的代码为:
本帖隐藏的内容需要回复才可以浏览

b、停止按钮,修改后的代码为:
本帖隐藏的内容需要回复才可以浏览


c、AS层第一帧(也是唯一的一帧),修改后的代码为:

本帖隐藏的内容需要回复才可以浏览

代码解释:
1、由于是在按钮上加代码,因此必须使用on命令。
on后紧跟着括号,括号里的称为参数。press参数的意思是:当你单击鼠标时。
接下来是大括号{} 大括号里圈着的命令就是整个的on命令所实现的效果。因此,这个形式:
on(press){

}
就是说,当单击鼠标时,执行大括号里的命令。
2、pintu是我们影片剪辑的名字;mymusic是我们自定义的声音变量
3、gotoAndStop(1)它的含义是跳转到时间轴的第一帧并停止播放。如果括号里是2就是跳转到第二帧。使用时注意其大小写。


至此,我们需要的效果已经达到。接下来我们讲解一下如何使用变量来控制声音音量的大小。(接着上面的步骤操作即可)
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

三、控制音乐的音量
我们想实现的效果是,在舞台上给出一个输入区,让观众自行输入数值,然后通过点击一个按钮,将该值反馈给flash,从而实现音量大小的控制。步骤如下:
1、新建一个图层,使用“文本工具”在舞台上拖出两个文本框。一个属性设置为静态文本,另一个为输入文本
静态文本里输入提示文字,动态文本里不写字,但是需要在属性面板内设置一下各项参数:


注意:
①为了输入的数字美观一些,我们最好选择消除锯齿,此时就必须嵌入字体(看上图的1234)
②为了获取输入文本内的数据,必须给这个输入文本一个变量名。AS2中经常使用上图中的6内的7操作。
③必须将“自动调整字距”前面的对号去掉!否则会出问题!


2、从公用库内拖出一个按钮放入到舞台上。按F9键加AS代码如下:
on (press) {
mymusic.setVolume(yinliang)
}

代码解释:setVolume函数就是用来设置声音音量的。后面的括号中是音量的大小(是个数字哦),我们在这里把这个数字用变量yinliang代替的。这个yinliang是我们自定义的变量(上图中的输入文本内“变量”内设定的!)
这样一来,只要单击按钮,mymusic这个音乐的音量就会变成观众自设的大小啦。就这么简单。


3、另外,音量的数值尽量不要超过300,否则声音会撕裂,很难听。
所以,我们有必要在这个代码中加上一个判断语句:当输入的值大于300或者小于0的时候,提示观众重新输入。
因此需要使用if判断。还要在舞台上给一个动态文本,用来反馈输入的数字是否满足条件。【因为在输入文本的嵌入里,我们只嵌入了数字,所以,即使观众输入的不是数字,也输入不了。无需判断观众是否输入的是数字】。那么,操作步骤如下:
①在舞台上新添加一个动态文本。用来显示反馈的。在这里可以和上面的输入文本一样,利用“变量”。不过,其实还有另外一种方法,就是在属性面板最上面,输入一个实例名。利用该实例名也可以实现和“变量”一样的效果,在这里,我们将动态文本使用实例名的手段来实现:


②将设置音量的按钮上的代码修改为如下:
本帖隐藏的内容需要回复才可以浏览

③大功告成,测试影片看看效果吧


代码说明:
<1>如果观众木有输入数字就单击按钮,此时yinliang木有数据,也就是undefined,给出反馈"你还木有输入数字"
<2>如果输入的yinliang值大于300,给出反馈"请输入小于300的数字"
<3>如果上述两条都不满足,观众设定的数字就是正确的,给出反馈"当前音量是原声音的"+yinliang/100+"倍"
三种情况的反馈,出现的所有的文字,都在上面截图的6内输入。【重复的文字,6内只出现一次】

声音的使用,Part2到Part3两节课从头做到尾,得到的fla文件下载地址如下【使用flashCS5.5打开】:
本帖隐藏的内容需要回复才可以浏览
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

获得 土地神卡 一张

卡片说明:网雨霏霏照顾了失踪的小狗,主人付出了5金钱以作感谢

卡片效果:+5

点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

四、后记

1、一般而言,调节音量的操作都是给出一个滑块,观众通过拖动滑块实现调节。本教程为了降低难度,没有使用这种方法。等读者理解了本文出现的所有代码后,请继续阅读接下来的Part4,偶会详细讲解滑块的制作和代码的驱动。
另外,除了这里提到的滑块问题之外,本作品还是不够完美:
由于声音文件设置了只播放一遍,一旦观众听完第一遍的时候,已经木有声音了,但是那个频谱仍在不知疲倦的跳动


由此,大家也发现了,代码的编写是一个非常重复的过程,不可能一蹴而就,后期需要不断的调试修复bug。因此,良好的编程习惯尤为重要。而本教材也尝试着将这个思考的过程展现出来,因此篇幅很长。实际编程的时候就是如此的,功能都是逐步加入完善的,没有谁能一上来将所有情况考虑周全。
2、到此,声音的基础应用已经介绍完毕。虽然过程很曲折,但是做出的效果仍然很简陋酱紫
如果要做成一个MP3播放器,本作品显然不合格。所以,还需要继续添加功能
所以,本教材会有Part4  Part5出现,敬请期待

PS:虽然AS2过时了,但是学习如何制作播放器的思路却是共用的,大家不妨一观。欢迎读者将自己的心得或者疑惑以回复本帖的方式告知我。
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

声音的使用(Part3)续---频谱动画的另类做法

今天在研究flashMP3播放器的时候,发现一个作品的频谱做的超赞,比起我做的好了不止一筹(汗)
于是反编译了一下,研究发现,原来使用的是编程技术实现的。令人眼前一亮。现将完整步骤发布出来共享给大家。
1、元件绘制
该频谱动画的元件部分超级简单,只制作一个静态的形状即可。具体步骤如下:
(1)将舞台缩放比调整到800%
(2)使用矩形工具,去掉边框色,绘制一个填充色为蓝色的矩形
(3)用选择工具单击该矩形,在属性面板内,断开宽高比的锁定,将宽度设置为4  高度设置为1.5



(4)按住Alt键的同时,拖动舞台上的矩形,会自动复制出来一个新的,拖完之后再松开Alt键。
我们拖出6个,加上之前的共7个矩形
(5)单击舞台空白处,取消对矩形的选择状态。然后框选这7个矩形。打开对齐面板(Ctrl+k)
在保证“与舞台对齐”不被勾选的前提之下,依次单击“左对齐”和“垂直居中分布”按钮



(6)按F8键,将这7个矩形整体转换成影片剪辑


特别注意,一定要将注册点设置为左下角。默认的是在左上角,那样的话,做出来的动画就是倒着的,很难看
2、代码编写
(1)在保证这个影片剪辑元件被选中的前提下,打开属性面板,指定一个实例名,方便我们编程。假设实例名为mline
(2) 我们将舞台缩放到100%  然后将影片剪辑移动到舞台外侧(让观众看不到它)



(3)新建一个图层,打开动作面板,输入代码如下:

本帖隐藏的内容需要回复才可以浏览

3、测试影片,效果就出来了。神马?跳动的速度太快了?呵呵,这个速度是由flash文档的帧频(FPS)决定的
CS5.5建立的文件,默认的FPS是24(用选择工具单击舞台空白处,在属性面板内可以看到该值):



特别注意的是,该值直接影响了整部作品的播放速度!如果你在此之前已经做了大量的动画,一旦调低FPS,所有动画的播放速度就会整体变慢,逐一去调节的话,会累死人的。因此,我们可以将代码优化一下,就不用调节FPS,即可实现变慢的效果。优化后的完整代码如下:

本帖隐藏的内容需要回复才可以浏览

4、现在安逸了吧,吼吼。
(1)神马?不知道上述代码神马意思?额,看看本教程前面的相关内容你就晓得了。唯有一点前面没有讲过,就是
this["mline"+i]._y=200
这个样式的代码。this["mline"+i]就是影片剪辑的实例名,因为有多个影片剪辑,一个一个的写会累死人。所以当这些实例名非常有规律的时候,就可以使用这个格式来实现

(2)至于优化后的代码,无非是引入了一个名为kz的变量,用来控制播放速度。
为了解释清楚,容我再啰嗦一堆吧,囧:
FPS是英文Frames per second的简写,直译为“帧每秒”。也就是一秒的时间播放多少帧
24FPS就是 在一秒的时间内播放24帧,则播放一帧所花的时间就是1/24秒


onEnterFrame函数是每当进入关键帧的时候触发命令。对于24FPS的文档,就是每隔1/24秒的时间触发一次,所以,代码在没有优化之前,频谱的动画才那么快。
看这个kz变量,初始值是0。每隔1/24秒的时间让它加一变大,如果它的值等于3(就是触发了三次),就让频谱的纵向缩放比进行改变,从而实现动画;同时让kz的值变为初始值0  如此一来,相当于变相的将FPS降低为3倍,由于该操作只用来捣鼓频谱的,所以只有频谱的动画慢下来了,并不影响别的地方的动画,一举两得。

AS代码用得好,可以实现非常赞的效果,大家多研究研究吧。

5、源码下载

本帖隐藏的内容需要回复才可以浏览


使用flashCS5.5方可打开fla文件
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

 

B Color Image Link Quote Code Smilies
高级模式 | 发新话题

您需要登录后才可以回帖 登录|立即注册

快速
返回顶部
返回首页