本节接着上一节的内容来。上一节我们已经制作好了控制音乐播放与停止的按钮。本节我们的目的是将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、制作完毕后,单击时间轴左边的“场景一”进入主场景,然后打开库面板,将刚才制作好的频谱动画拖放到舞台上 这样一来,测试影片时发现:不用管播放还是停止,频谱都在动。所以还需要加代码。
最近访问本帖者列表: | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
二、在按钮上加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就是跳转到第二帧。使用时注意其大小写。 至此,我们需要的效果已经达到。接下来我们讲解一下如何使用变量来控制声音音量的大小。(接着上面的步骤操作即可) | |
三、控制音乐的音量
我们想实现的效果是,在舞台上给出一个输入区,让观众自行输入数值,然后通过点击一个按钮,将该值反馈给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打开】: 本帖隐藏的内容需要回复才可以浏览 | |
四、后记
1、一般而言,调节音量的操作都是给出一个滑块,观众通过拖动滑块实现调节。本教程为了降低难度,没有使用这种方法。等读者理解了本文出现的所有代码后,请继续阅读接下来的Part4,偶会详细讲解滑块的制作和代码的驱动。 另外,除了这里提到的滑块问题之外,本作品还是不够完美: 由于声音文件设置了只播放一遍,一旦观众听完第一遍的时候,已经木有声音了,但是那个频谱仍在不知疲倦的跳动 由此,大家也发现了,代码的编写是一个非常重复的过程,不可能一蹴而就,后期需要不断的调试修复bug。因此,良好的编程习惯尤为重要。而本教材也尝试着将这个思考的过程展现出来,因此篇幅很长。实际编程的时候就是如此的,功能都是逐步加入完善的,没有谁能一上来将所有情况考虑周全。 2、到此,声音的基础应用已经介绍完毕。虽然过程很曲折,但是做出的效果仍然很简陋酱紫 如果要做成一个MP3播放器,本作品显然不合格。所以,还需要继续添加功能 所以,本教材会有Part4 Part5出现,敬请期待 PS:虽然AS2过时了,但是学习如何制作播放器的思路却是共用的,大家不妨一观。欢迎读者将自己的心得或者疑惑以回复本帖的方式告知我。 | |
声音的使用(Part3)续---频谱动画的另类做法
今天在研究flashMP3播放器的时候,发现一个作品的频谱做的超赞,比起我做的好了不止一筹(汗) (4)按住Alt键的同时,拖动舞台上的矩形,会自动复制出来一个新的,拖完之后再松开Alt键。 特别注意,一定要将注册点设置为左下角。默认的是在左上角,那样的话,做出来的动画就是倒着的,很难看 本帖隐藏的内容需要回复才可以浏览 3、测试影片,效果就出来了。神马?跳动的速度太快了?呵呵,这个速度是由flash文档的帧频(FPS)决定的 CS5.5建立的文件,默认的FPS是24(用选择工具单击舞台空白处,在属性面板内可以看到该值): 本帖隐藏的内容需要回复才可以浏览 4、现在安逸了吧,吼吼。 (2)至于优化后的代码,无非是引入了一个名为kz的变量,用来控制播放速度。
AS代码用得好,可以实现非常赞的效果,大家多研究研究吧。 5、源码下载 本帖隐藏的内容需要回复才可以浏览 使用flashCS5.5方可打开fla文件 | |