《巧用Flash8制作动态按钮.pdf》由会员分享，可在线阅读，更多相关《巧用Flash8制作动态按钮.pdf（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、巧用 Flash8 制作动态按钮 邢素萍【摘 要】利用 Flash 8.0 的按钮实例制作一个带有一系列动态矩形按钮的动画,实现了按钮移动动画.使用了按钮实例的移动、编辑文字变形动画、利用按钮产生动画.所用的主要知识点有:钮对鼠标事件的响应控制,包括鼠标的滑过、滑离、按下等.通过动作控制语句实现对按钮动画过程的调用.【期刊名称】微型电脑应用【年(卷),期】2014(030)003【总页数】3 页(P51-53)【关键词】按钮实例;按钮移动;脚本程序;电影剪辑元件【作 者】邢素萍【作者单位】南京工业职业技术学院,南京,210046【正文语种】中 文【中图分类】TP311 本实例先创建一个能够缠身
2、文字变形动画的按钮实例，然后复制多个该实例，创建按钮移动的动画，最后利用脚本程序控制这个动画。本实例的扩展应用为利用按钮对鼠标的响应来使按钮变化的动画。效果如图 1 所示：步骤 1 执行【文件】/【新建】命令新建一个 Flash 文件。再执行【修改】/【文档】命令，在弹出的对话框中修改舞台工作区的大小为 600 px400px。步骤 2 执行【插入】/【新建元件】命令，建立一个新的元件。在【创建新元件】窗口中输入元件名称“button”，同时选择【按钮】选项，如图1 所示。最后单击【确定】按钮进入元件编辑窗口。步骤 3 在时间轴窗口选择“点击”帧，按 F6 键增加关键帧，在绘图工具箱中选择矩形
3、工具，在场景中绘制一个矩形，填充色任意。步骤 4 选中整个矩形，执行菜单命令【窗口】/【开发面板】/【信息】，打开【信息】面板，在【信息】面板中修改参数设置：将 X 值设置为-30，Y 值设置为-8，宽度 W 设置为 60，高度 H 设置为 16，这样就完成了按钮的制作，如图 2图 3 所示：步骤 1 执行【插入】/【新建元件】命令，建立一个新的电影剪辑元件。在新建元件对话框中输入元件名称“move”，同时选择【影片剪辑】选项，然后单击【确定】按钮。步骤 2 选择工具栏中矩形工具，在工具栏下方将填充色设为无色，边框颜色为蓝色，在第 1 帧中绘制一个矩形框。步骤 3 选中整个矩形，在【信息】面板
4、中修改参数设置：宽度设置为 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 所示：步骤 7 复制
5、新建的黑色矩形框对象，在第 4 帧到第 7 帧中分别加入关键帧，每一帧中都复制出一个矩形框，并设置新复制出的矩形框的 X 坐标位置依次为 120、180、240、300，Y 坐标不变，这样在第 7 帧处就有 5 个矩形框了，如图 6 所示：步骤 8 在时间轴窗口中选择第 11 帧，单击鼠标右键加入关键帧，在场景中删除右侧的 5 个小矩形，选择绘图工具栏中的文字工具，在视图中单击鼠标左键，输入下列文字“MOVIE”。步骤 9 选择所有文字，按 Ctrl+F3 键，调出文字属性对话框，在对话框中修改文字属性，如图 7 所示：步骤 10 选择文字对象，连续执行两次【修改】/【分离】命令，将文字对象打
6、碎。分别选择每一个字母，通过【信息】面板把字母分别定位到原来5 个矩形框所在的位置上，并适当调整字母的大小，结果如图8 所示：步骤 11 在时间轴窗口单击第 7 帧，然后在对应的【属性】设置面板中打开【补间】下拉列表框，从列表框中选择【形状】选项，建立两个关键帧之间的补间动画，完成由矩形对象到文字对象的变换，变化过程中的第9 帧如图 9 所示：步骤 12 在第 13 帧按 F6 键插入一个关键帧，然后全选所有的文字，在工具栏填充色参数设置栏中选择黄色作为填充色，同时单击选中第 1 个矩形内部的填充色，按 Delete 键将其删除，如图 10 所示：步骤 13 鼠标左击第 1 帧，在菜单中选择【
7、窗口】/【开发面板】/【动作】命令，调出【动作】面板，在面板中为这帧添加一句脚本：stop();步骤 14 同样为第 11 帧和第 13 帧添加与第 1 帧相同的帧脚本。步骤 15 鼠标单击时间轴上的第 2 帧，然后在对应的【属性】设置面板中为这一帧添加帧标签“move”，如图 11 所示：步骤 16 鼠标单击时间轴上的第 12 帧，先按 F7 键插入一个空白关键帧，然后在对应的【属性】设置面板中为这一帧添加帧标签“down”，此时的时间轴如图12 所示：知识详解 以上完成了按钮动画的制作。其中，主要用到了绘图和填充工具，并且制作了有关按钮的元件，以便后面制作过程中调用。首先，制作了按钮元件，
8、这个对象只有“点击”一帧，主要用于设定按钮作用范围。然后，还制作了 move 电影剪辑元件，对应鼠标移动到按钮上方以及按钮被点击时的动画效果。当鼠标移动到按钮上方时，按钮中间将会出现黄色填充色，从按钮中还会弹出几个矩形，然后矩形对象再变成文字对象，可供点击。当按下鼠标时，按钮中的填充色将会消失，文字对象也由黑色变成黄色。步骤 1 选择【编辑】/【编辑文档】命令，或单击元件编辑窗口左上角的场景名称，返回到场景编辑舞台。步骤 2 单击选择“图层 1”，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“图层 1”的上方添加一个“图层 2”。在“图层 2”的上方添加“图层 3”。选择 3 个图层
9、的第 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(
10、move1)gotoAndPlay(down);on(rollOut)tellTarget(move1)gotoAndStop(1);本实例使用的脚本程序中，主要有以下几个重要的代码。ellTarget：后面的参数为所要操作的电影剪辑，然后加入对此电影剪辑进行的操作程序。gotoAndStop：表示当前影片剪辑跳到所给参数的帧上去，然后停止播放 步骤 6 单击选中“图层 1”的第 1 帧，右击鼠标在快捷菜单中选择“拷贝帧”命令，然后在“图层 2”的第 1 帧上右击鼠标，在快捷菜单中选择“粘贴帧”命令。步骤 7 在“图层 2”的第 5 帧插入关键帧，选中第 5 帧上的图像，选择【窗口】/【属性】
11、命令，修改其高度为 200，如图 13 所示：步骤 8 单击第 5 帧上的“move”电影剪辑元件实例，在对应【属性】设置面板中将这个实例命名为“move2”。步骤 9 单击第 1 帧，在对应的【属性】设置面板中打开【补间】下拉列表框，从列表框中选择【动作】选项，建立两个关键帧之间的补间动画。步骤 10 在第 5 帧上，单击选中这帧的按钮元件，打开【动作】面板，在【动作】面板中已有为“图层 1”上的按钮编写的脚本，在这里只需要将其中的“move1”替换为“move2”即可。步骤 11 类似的方法，在“图层 3”上创建第 6 帧到第 10 帧的过渡动画，同时将第 10 帧上的“move”电影剪辑
12、元件实例命名为“move”，同时将其对应脚本语句中的“move1”替换为“move3”。步骤 12 在时间轴窗口中用鼠标左键单击“图层 3”中的第 10 帧，从菜单中选择【窗口】/【开发面板】/【动作】选项，在【动作】面板中加入控制语句“stop()”。按钮动画的时间轴窗口如图 14 所示：步骤 13 单击选择“图层 2”，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“图层 2”上方添加一个“图层 3”，改名为“背景”，并将其移动到时间轴窗口的最底层。步骤 14 在“背景”图层中绘制场景布局，导入了一幅图画，这个动画就完成了。最终效果如图 15 所示：本文实现了按钮实例的移动动画，脚本程序制作了一个带有一系列动态按钮的动画，所用的主要知识点有：钮对鼠标事件的响应控制，包括鼠标的滑过、滑离、按下等。通过动作控制语句实现对按钮动画过程的调用。使用的脚本命令有：Tell Target，gotoAndStop。通过本文的介绍，读者可以尝试制作波动的文字按钮动画。【相关文献】1Flash 8 中文版实用教程李敏，M机械工业出版社 2011 年 2 月。2Flash 8 动画与交互动画制作教程潘明寒，M北京航空航天大学出版社，2008 年 1 月。3Flash8.0 中文版动画制作林华，姜灵敏，M华南理工大学出版社，2008 年 8 月。