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

　　今天，笔者要教大家做一个很炫而且很实用的视觉效果。在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所示。

　　

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有