flash之路-flash技术交流 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

标题: [AS2系列教程[图文]] 第二十七课：声音的使用（Part4） [打印本页]

作者: 网雨霏霏 时间: 2018-5-25 10:47 标题: 第二十七课：声音的使用（Part4）

音量滑块的实现

调节音量时，通常都是用鼠标直接拖拽，而不是输入数字。所以，前面的设计还是太简陋了。当然，饭要一口一口的吃，遵循这个原则，我也尽量使用循序渐进的办法完成本教程。现在进入主题：
一、外观设计
在这里牵扯到拖拽，只有影片剪辑才可以有。所以，必须将滑块制作成影片剪辑。另外，为了方便最终的功能整合，我们将滑块和凹槽整个都制作成影片剪辑。所以，步骤如下：
1、制作影片剪辑用来容纳整个滑块：
按Ctrl+F8键插入一个影片剪辑【“名称”里输入“滑块”（不是必须的，但是强烈推荐重新命名，方便后期的调试）】
2、制作凹槽：
使用矩形工具，去掉边框色，填充设置为黑色，绘制一个矩形。搞定后，用选择工具选中，在属性面板内设置宽度为104，高度为6，然后Ctrl+k，调整位置
[attach]931[/attach]
由于凹槽不参与任何的交互，因此，不用转换成元件。直接保持“形状”属性即可
3、制作滑块：
新建一个图层，用矩形工具绘制一个小小的矩形充当滑块，设置其宽度为4，高度为18
说明：凹槽的宽度104=100+4 这个4就是滑块的宽度。这样设计的目的是，当滑块拖到最右侧时，正好是100个像素的长度，和音量能对应起来，方便编程。
然后按F8键，转换成影片剪辑【名称里输入“方形滑块”，注册点设置为左侧中央，如下图所示】
[attach]932[/attach]
搞定后，在属性面板内更改一下该方形滑块的x坐标为60（这样就可以让声音的默认音量为60%）。并设置一个实例名，假设是fxhk

二、代码编写
用选择工具单击舞台上的方形滑块，打开动作面板，输入代码如下：

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

三、大功告成，测试影片。效果出来了吧。
该滑块文件独立下载------>

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

作者: 网雨霏霏 时间: 2018-5-25 10:47

四、现在，我们将这个“滑块”影片剪辑整合入前面制作的播放器内
1、在库面板内复制，然后打开前面制作的播放器，新建一个图层，然后舞台上直接粘贴，打开属性面板，设置实例名为hk
2、关闭制作的滑块fla文档，现在操作播放器fla文件了
3、在代码图层，加上如下一行：
mymusic.setVolume(hk.fxhk._x)
4、进入滑块影片剪辑内，单击方形滑块后，代码修改为如下：

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

5、测试影片，效果出来了

五、源码下载：该源码将频谱修改为Part3续里的样式。由于是用代码生成的，为了控制其是否动起来，专门制作了一个影片剪辑，方便用代码操控。

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

作者: flashroad 时间: 2018-5-31 18:19

他[她]看完这篇文章说：

(来自快速回帖模式)

作者: 测试 时间: 2018-6-3 06:22

他[她]看完这篇文章说：

(来自快速回帖模式)

欢迎光临 flash之路-flash技术交流 (http://flashroad.dhlog.com/)