分享
 
 
 

Flash实用技巧之音乐时间显示篇

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

效果简介:

今天,笔者要教大家做一个很炫而且很实用的视觉效果。在winamp主面板的左侧,可以看到有音乐播放时间的显示,还有跳动的光谱分析器,如图1所示。本文就是讲解如何在Flash中实现这些视觉效果。本例的设计效果如图2所示。

图1,图2

同样的,这个效果中有很多技术可以应用到您的作品中。下面我们可就开始制作了。

制作步骤:

打开FlashMX。按快捷键Ctrl+F3打开“属性”,设置场景为200px×100px,黑色,帧速率12fps。

制作元件

一、制作“按钮”元件。

1.按快捷键Ctrl+F8打开“创建新元件”面板新建一个名为“按钮”的影片剪辑元件。该按钮的作用是播放音乐、停止音乐和停止光谱分析器地运行。

2.点选“窗口”菜单下“公共库”中的“按钮”选项。然后在打开的“按钮”库中找到的“Playback”文件夹,并把其中的“gel Right”拖拽到“按钮”元件第1帧的场景的中心位置上。如图3所示。点选场景中的按钮,按快捷键Ctrl+F3打开“属性”面板,给按钮起个实例名“bn1”。如图4所示。

图3 , 图4, 图5

3.点选中“按钮”元件第2帧,按F7键插入一个空白关键帧。接着把按钮公共库的“Playback”文件夹中的“gel Stop”按钮拖拽到第2帧场景的中心位置上。也选中该按钮,在“属性”面板中起实例名“bn2”。到这里“按钮”元件就设计好了。

二、制作“光谱分析器”

“光谱分析器”是模拟winamp的。要实现开关的效果必须使用两个按钮元件,并用代码进行跳转控制。分析器中的光谱柱元件由“光柱一”和“光柱二”两个元件组成的。其具体的制作步骤如下。

制作“光柱一”元件

1.按快捷键Ctrl+F8,新建一个名为“光柱一”的影片剪辑元件。选中“工具”面板中的“矩形”工具

(禁用边线
)。接着用鼠标左键在“光柱一”元件的场景中绘制一个矩形。选中刚绘制出的矩形,如图5所示设置其大小以及在场景中的位置。图5中,可以看到“光柱一”的Y值为-15px。这是为了“光柱一”的底线穿过场景的中心点,使下面的设计能够正常地使用其_yscale属性。这点很重要。如图6所示。设计“光柱二”的时候也注意这个问题。

2.按快捷键Shift+F9打开“混色器”面板。在“混色器”面板的下来菜单中先选择“线性渐变”选项。“混色器”面板中两个小滑块的颜色分别是“#01B401”和“#022E01”。如图7所示。接着设置场景为“全部显示”模式(如图标

)。然后选中“工具”面板中的“颜料桶”工具
,然后用鼠标左键点击场景中的矩形条(上色)。见图8所示。

3.选中“工具”面板中的“填充变形”工具

,然后点击场景中的矩形条。接着拖动白色空心小圆圈(旋转渐变控制点)旋转到水平位置,如图8所示。再拖动白色空心小方块(移动渐变控制点)进行范围调节,如图9所示。这样设置可以使光谱柱更加逼真。

图6, 图7

图8, 图9

制作“光柱二”元件

制作“光柱二”元件的方法和“光柱一”元件基本一样,只是其宽、高为3px和1px,如图10所示。

制作“光谱”元件

1. 按快捷键Ctrl+F8,新建一个名为“光谱”的影片剪辑元件。

2. 按快捷键Ctrl+L,打开库,把库中的“光柱一”和“光柱二”元件拖拽到场景中,如图11所示。移动元件前,可以先把场景的显示设置为400%

,这样方便移动元件。

图10, 图11

3. 这一步,要先右键点击场景中的两个元件,然后打开“动作”面板,键入代码后再做。但是,本例中的代码都最后添加和讲解。但这一步有必要交代以下。现在,选中场景的两个元件,按快捷键Ctrl+C进行复制,然后再用快捷键Ctrl+V粘贴,再复制,再粘贴。最后效果如图11所示。

注意,实际上这时候每个元件中都是有代码的。在移动中,可以按快捷键Ctrl+K打开“对齐”面板帮助对齐。也可以通过缩放场景的显示比例来加速元件的移动。

制作“播放”按钮元件

1.按快捷键Ctrl+F8,新建一个名为“平台线”的影片剪辑元件。

2.由于这不是关键的制作,笔者就简要地讲以下它的制作要点。选择“矩形”工具(禁用边线),在该元件的场景中拉出一个矩形长条,然后用黑白“线性渐变”色上色。最后在矩形条上挖去一些宽为1px的间隙。最后设置如图12所示。

图12

图13

图14

3.在库中双击“平台线”影片剪辑元件,如图13所示。然后在“平台线”元件的场景中按快捷键Ctrl+A全选,接着按F8键打开“转换为元件”面板,并创建成名为“播放”的按钮元件。加入代码后,单击“播放”按钮,“光谱分析器”将会开始运行。这个功能玩过Winamp的朋友都知道。

4.在库中双击打开“播放”按钮元件,进入编辑场景。点选中“点击”帧按F6键插入关键帧。然后用“矩形”工具拉出一个矩形来覆盖原来的原来的内容。这个矩形就是该按钮的触发区域。在图14中读者可以发现“编辑多个帧”

功能被启用,这将有利于察看多个帧中元件的情况,便于编辑。

制作“返回”按钮元件

1.在库中双击“光谱”影片剪辑元件。然后在该元件的场景中按Ctrl+A全选,接着按F8键将其转换成按钮元件,名字为“返回”。加入代码后,单击“返回”按钮,“光谱分析器”将会停止。图13中是该实例的全部元件。有些元件放在文件夹里是为了方便管理和使用。

2.在库中把“平台线”的影片剪辑元件拖拽到“弹起”帧的场景中,并放置在“光谱”元件下。

3.双击打开“返回”按钮元件,进入编辑场景。同样点选中“点击”帧按F6键插入关键帧。OK。

制作“主元件”

1.按快捷键Ctrl+F8,新建一个名为“主元件”的影片剪辑元件。在库中把“播放”按钮元件拖拽到“主元件”的场景中。接着右键单击第1帧,在弹出的菜单中选择“动作”命令,然后在弹出的“动作”面板中键入代码“stop();”。其作用是该影片剪辑停止播放。

图15, 图16

图17

2.点选“播放”按钮,起实例名为“music1”。如图15所示。

3.点选中第2帧,按F7键插入空白关键帧。在库中把“返回”按钮元件拖拽到第帧的场景中。并同样在帧中键入代码“stop();”。第1和第2帧中元件的位置应该保持一致。

4.点选“返回”按钮,起实例名为“music2”。

三、导入音乐

1.按快捷键Ctrl+R打开“导入”面板,导入一首MP3歌曲。建议大家先选择文件小一点的歌,越小越好,否则经常在测试的时候等待,浪费时间。

2.打开库,双击库中前面是个小喇叭图标的声音文件打开“声音属性”面板,然后如图16所示设置。这样会使导出的文件变得很小。

3.右键单击库中的声音文件,在弹出的菜单中选择“链接...”命令,打开“链接属性”面板,并如图17进行设置。为声音创建标识符为“music”,以便用程序将其导出使用。

设计主场景

设计主场景之前,先看看主场景中都有哪些东西,有什么作用。如图18所示。中间两个虚线矩形框就是两个动态文本。中间是一个输入冒号的静态文本。有一个装饰用的小三角。最下面的是“主元件”和“按钮”元件,这两个元件的功能前面已经讲过了。这两个动态文本的作用是显示音乐当前的播放时间。他们的制作方法如下。

1.点选“工具”面板中的文本工具

,如图19所示设置“属性”面板。实例中的字体笔者已经压缩在源文件中了,读者可自行下载。关键是一定要给该动态文本起个实例名称“text1”。接着使用“矩形”工具在主场景中拉出一个动态文本,即图18左侧的虚线部分。

图18

图19

2.再制作一个动态文本“text2”,即图18右侧的虚线部分。方法同上。

3.在两个动态文本之间再设计一个静态文本,并输入一个冒号。

4.在库中把“主元件”和“按钮”这两个影片剪辑元件拖拽到如图18所示的相应位置即可。并给“主元件”起个实例名称“mc”。这很重要,是为了使“按钮”元件能够控制它。

设计代码

这部分是本文的重点,也是精华,希望大家花点心思研究一下。

1.右键单击主场景的第1帧,在弹出菜单中选择“动作”命令,然后在打开的“动作”面板中键入如下代码。这段代码主要是创建一个声音对象和两个全局函数。

// 创建新的Sound对象

mysound = new Sound();

// 把在库中建立链接的声音附加到mySound对象中

mysound.attachSound("music");

// 隐藏动态文本“text1”,使得声音没有播放时“光谱分析器”的条件不满足而不能工作_root.text1._visible = 0;

// 使用_global对象来创建全局函数stsrt_fun

// stsrt_fun函数的作用是播放声音、显示时间

_global.start_fun = function() {

// 播放声音

mysound.start();

// 初始化两个动态文本的内容为“00”

_root.text1.text = _root.text2.text = "00";

// 定义fun函数,用来显示时间

function fun() {

// Math对象的floor方法返回小于等于指定参数的整数

// Sound对象中的position属性返回声音已播放的毫秒数

// 变量x纪录了声音已经播放的时间

x = Math.floor(mysound.position/1000);

// 根据分秒的关系,显示文本的内容

// TextField对象的text属性可以设定文本内容

if (x<10) {

_root.text1.text = "00";

_root.text2.text = "0" + x;

} else if (x>=10 && x<6

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有