巧用 Flash8 制作动态按钮

邢素萍

巧用 Flash8 制作动态按钮

邢素萍

利用 Flash 8.0 的按钮实例制作一个带有一系列动态矩形按钮的动画，实现了按钮移动动画。使用了按钮实例的移动、编辑文字变形动画、利用按钮产生动画。所用的主要知识点有：钮对鼠标事件的响应控制，包括鼠标的滑过、滑离、按下等。通过动作控制语句实现对按钮动画过程的调用。

按钮实例；按钮移动；脚本程序；电影剪辑元件

0 引言

本实例先创建一个能够缠身文字变形动画的按钮实例，然后复制多个该实例，创建按钮移动的动画，最后利用脚本程序控制这个动画。本实例的扩展应用为利用按钮对鼠标的响应来使按钮变化的动画。

效果如图1所示：

图1 动画效果图

1 按钮制作

步骤 1 执行【文件】/【新建】命令新建一个 Flash 文件。再执行【修改】/【文档】命令，在弹出的对话框中修改舞台工作区的大小为 600 px×400px。

步骤 2 执行【插入】/【新建元件】命令，建立一个新的元件。在【创建新元件】窗口中输入元件名称“button”，同时选择【按钮】选项，如图1所示。最后单击【确定】按钮进入元件编辑窗口。

步骤 3 在时间轴窗口选择“点击”帧，按 F6 键增加关键帧，在绘图工具箱中选择矩形工具，在场景中绘制一个矩形，填充色任意。

步骤 4 选中整个矩形，执行菜单命令【窗口】/【开发面板】/【信息】，打开【信息】面板，在【信息】面板中修改参数设置：将 X 值设置为-30，Y 值设置为-8，宽度 W 设置为 60，高度 H 设置为 16，这样就完成了按钮的制作，如图2图3所示：

图2 在【创建新元件】窗口中选中【按钮】选项

图3 按钮及其信息面板

2 按钮动画制作

步骤 1 执行【插入】/【新建元件】命令，建立一个新的电影剪辑元件。在新建元件对话框中输入元件名称“move”，同时选择【影片剪辑】选项，然后单击【确定】按钮。

步骤2 选择工具栏中矩形工具，在工具栏下方将填充色设为无色，边框颜色为蓝色，在第 1 帧中绘制一个矩形框。

步骤3 选中整个矩形，在【信息】面板中修改参数设置：宽度设置为 60，高度设置为 16，X 值设置为-30，Y 值设置为-8，如图3 所示：

步骤4 选择时间轴中的第2帧，单击鼠标右键，从弹出菜单中选择【插入关键帧】选项，加入一个关键帧，第1帧的内容自动复制过来。

步骤5 选择绘图工具箱中的颜料桶工具，改变填充颜色为黄色，将第2帧中的矩形框的内部填充为黄色。

步骤 6 选中第 3 帧，按 F6 键插入关键帧，选择绘图工具箱中的矩形工具，在第 3帧再另外绘制一个蓝色矩形框，在【信息】面板中设置宽度为 30，高度为 16，X 值为60，Y 值为-8，则第 3 帧的视图中共有两个矩形，如图4、图5所示：

图4 矩形及其信息面板

图5 画一个小矩形

步骤 7 复制新建的黑色矩形框对象，在第 4帧到第 7帧中分别加入关键帧，每一帧中都复制出一个矩形框，并设置新复制出的矩形框的 X 坐标位置依次为 120、180、240、300，Y 坐标不变，这样在第 7 帧处就有 5 个矩形框了，如图6所示：

图6 复制得到5个小矩形

步骤 8 在时间轴窗口中选择第 11 帧，单击鼠标右键加入关键帧，在场景中删除右侧的5个小矩形，选择绘图工具栏中的文字工具，在视图中单击鼠标左键，输入下列文字“MOVIE”。

步骤 9 选择所有文字，按 Ctrl+F3 键，调出文字属性对话框，在对话框中修改文字属性，如图7所示：

图7 文字属性窗口

步骤 10 选择文字对象，连续执行两次【修改】/【分离】命令，将文字对象打碎。分别选择每一个字母，通过【信息】面板把字母分别定位到原来5个矩形框所在的位置上，并适当调整字母的大小，结果如图8所示：

图8 调整后的字母

步骤 11 在时间轴窗口单击第 7 帧，然后在对应的【属性】设置面板中打开【补间】下拉列表框，从列表框中选择【形状】选项，建立两个关键帧之间的补间动画，完成由矩形对象到文字对象的变换，变化过程中的第9帧如图9所示：

图9 第 9帧的图像

步骤 12 在第 13 帧按 F6 键插入一个关键帧，然后全选所有的文字，在工具栏填充色参数设置栏中选择黄色作为填充色，同时单击选中第 1 个矩形内部的填充色，按 Delete键将其删除，如图10所示：

图10 第 13 帧的图像

步骤 13 鼠标左击第 1 帧，在菜单中选择【窗口】/【开发面板】/【动作】命令，调出【动作】面板，在面板中为这帧添加一句脚本：

stop();

步骤 14 同样为第 11 帧和第 13 帧添加与第 1 帧相同的帧脚本。

步骤 15 鼠标单击时间轴上的第 2 帧，然后在对应的【属性】设置面板中为这一帧添加帧标签“move”，如图11所示：

图11 添加帧标签“move”

步骤 16 鼠标单击时间轴上的第 12 帧，先按 F7 键插入一个空白关键帧，然后在对应的【属性】设置面板中为这一帧添加帧标签“down”，此时的时间轴如图12 所示：

图12 “move”电影剪辑元件的时间轴

知识详解

以上完成了按钮动画的制作。其中，主要用到了绘图和填充工具，并且制作了有关按钮的元件，以便后面制作过程中调用。

首先，制作了按钮元件，这个对象只有“点击”一帧，主要用于设定按钮作用范围。然后，还制作了 move电影剪辑元件，对应鼠标移动到按钮上方以及按钮被点击时的动画效果。当鼠标移动到按钮上方时，按钮中间将会出现黄色填充色，从按钮中还会弹出几个矩形，然后矩形对象再变成文字对象，可供点击。当按下鼠标时，按钮中的填充色将会消失，文字对象也由黑色变成黄色。

3 完成动画制作

步骤 1 选择【编辑】/【编辑文档】命令，或单击元件编辑窗口左上角的场景名称，返回到场景编辑舞台。

步骤 2 单击选择“图层 1”，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“图层1”的上方添加一个“图层 2”。在“图层 2”的上方添加“图层 3”。选择 3个图层的第 10 帧，按 F5 键，插入帧。

步骤 3 在“图层 1”中选择第 1 帧，从【库】面板中将“move”元件拖曳到场景中，通过【信息】面板将其定位于（50,100）。用鼠标选中该对象，选择【窗口】/【属性】命令，在【实例名称】栏中输入名称“move1”。

步骤 4 再从【库】面板中将“button”元件拖曳到场景中，通过【信息】面板也将其定位于（50,100）。

步骤 5 单击选中“button”按钮元件，按 F9 键打开【动作】面板，在面板中添加如下脚本语句：

on (rollOver){

tellTarget ("move1"){

gotoAndPlay("move");

}

}

on (press){

tellTarget ("move1"){

gotoAndPlay("down");

}

}

on (rollOut){

tellTarget ("move1"){

gotoAndStop(1);

}

}

本实例使用的脚本程序中，主要有以下几个重要的代码。ellTarget：后面的参数为所要操作的电影剪辑，然后加入对此电影剪辑进行的操作程序。gotoAndStop：表示当前影片剪辑跳到所给参数的帧上去，然后停止播放

步骤 6 单击选中“图层 1”的第 1 帧，右击鼠标在快捷菜单中选择“拷贝帧”命令，然后在“图层 2”的第1帧上右击鼠标，在快捷菜单中选择“粘贴帧”命令。

步骤 7 在“图层 2”的第 5 帧插入关键帧，选中第 5帧上的图像，选择【窗口】/【属性】命令，修改其高度为200，如图13 所示：

图13 向下移动图像

步骤 8 单击第 5 帧上的“move” 电影剪辑元件实例，在对应【属性】设置面板中将这个实例命名为“move2”。

步骤9 单击第1帧，在对应的【属性】设置面板中打开【补间】下拉列表框，从列表框中选择【动作】选项，建立两个关键帧之间的补间动画。

步骤 10 在第 5 帧上，单击选中这帧的按钮元件，打开【动作】面板，在【动作】面板中已有为“图层1”上的按钮编写的脚本，在这里只需要将其中的“move1”替换为“move2”即可。

步骤 11 类似的方法，在“图层 3”上创建第 6 帧到第10 帧的过渡动画，同时将第 10 帧上的“move”电影剪辑元件实例命名为“move”，同时将其对应脚本语句中的“move1”替换为“move3”。

步骤 12 在时间轴窗口中用鼠标左键单击“图层 3”中的第 10 帧，从菜单中选择【窗口】/【开发面板】/【动作】选项，在【动作】面板中加入控制语句“stop()”。按钮动画的时间轴窗口如图14所示：

图14 按钮动画的时间轴窗口

步骤 13 单击选择“图层 2”，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“图层2”上方添加一个“图层 3”，改名为“背景”，并将其移动到时间轴窗口的最底层。

步骤 14 在“背景”图层中绘制场景布局，导入了一幅图画，这个动画就完成了。最终效果如图15所示：

图15 最终效果图

4 总结

本文实现了按钮实例的移动动画，脚本程序制作了一个带有一系列动态按钮的动画，所用的主要知识点有：钮对鼠标事件的响应控制，包括鼠标的滑过、滑离、按下等。

通过动作控制语句实现对按钮动画过程的调用。使用的脚本命令有：Tell Target，gotoAndStop。通过本文的介绍，读者可以尝试制作波动的文字按钮动画。

[1]《Flash 8 中文版实用教程》李敏，[M]机械工业出版社 2011 年 2 月。

[2]《Flash 8 动画与交互动画制作教程》潘明寒，[M]北京航空航天大学出版社，2008 年 1 月。

[3]《Flash8.0 中文版动画制作》林华，姜灵敏，[M]华南理工大学出版社，2008 年 8 月。

Using Flash8 to Make Dynamic Button

Xing Suping
(School of Computer and Software, Nanjing Institute of Industry Technology, Nanjing 210046, China)

In this paper, by using Flash 8 button makes an example of a series of dynamic rectangle button animation. It realizes the animation button. Using the mobile of button instance and editing text deformation animation produce animation. The main knowledge points is the control response button on the mouse events, including the mouse slipping, sliding off and pressing. The button animation procedure calls through the action of control statements.

Button; Button Moves; Examples of Script; Film Editing Component

TP311

A

1007-757X(2014)02-0051-03

2014.11.20)

邢素萍(1957-)，南京工业职业技术学院，教授，研究方向：软件开发，计算机辅助设计，南京，210046