flash教案7-8.docVIP

第十八、十九节　　　按钮制作实例教程 ???教学目标 学完本课后，学生能了解按钮制作 二、??教学内容 1、理解按钮组件并掌握按钮组件的创建方法。 2、掌握按钮的动作控制的实现方法。 ??教学课时 2课时?教学过程 一、简单按钮按钮是组件（符号）的一种，它可以根据按钮可能出现的每一种状态显示不同的图像，并且会响应鼠标动作，执行指定的行为（action）。下面就是一个按钮实例。制作步骤： 1、新建一电影文件，设置影片属性。 2、创建按钮组件： (1)执行“插入/新建组件”命令。在弹出的组件属性对话框中，为新按钮输一个名字，比如“anniu1”，选择类型为“按钮”，最后按“确定”按钮。 (2)这时的时间轴转变为由四帧组成的按钮编辑模式，如图1所示。我们将要在这里编辑新按钮。 　 图1 按钮的编辑模式 　 ▲按钮编辑环境 按钮有特殊的编辑环境，通过在四桢时间轴上创建关键桢，可以指定不同的按钮状态。 Up(向上)帧：表示鼠标指针不在按钮上时的状态。 Over(经过)帧：表示鼠标指针在按钮上时的状态。 Down(向下)帧：表示鼠标单击按钮时的状态 Hit(执行)帧：定义对鼠标做出反应的区域，这个反应区域在电影中是看不到的。 (3)创建Up(向上)状态的按钮图像。 用椭圆工具先画一个黑色无边框的圆，然后用钢笔工具绘制出白色的箭头。把它们叠放在一起。如图2。 ▲提示：用钢笔工具绘制白色箭头时，可打开网格线(查看/网格/显示网格）。这样可以更容易绘制。 　 ? ? ? ?????????????????? 向上??????????? 经过??????????? 向下???????????? 执行 　 图2? 按钮四桢的效果 　 (4)创建Over(经过)状态的按钮图像。 单击经过帧，按F6插入一个关键帧，第一帧的图像就出现在舞台上，分别更改图形的填充色。如图2。 (5)创建Down(向下)状态的按钮图像。 单击向下帧，按F6插入一个关键帧，分别更改图形的填充色。如图2。 (6)创建Hit(执行)区域。 单击经过帧，按F7插入一个空白关键帧，然后用绘图工具制作鼠标响应区域。如图2。 ▲提示：运行动画时，Hit(执行)帧在舞台上是看不到的，但是它可定义对鼠标单击所能够做出反应的按钮区域，也可以不定义执行帧，这时Up(向下)状态下的对象就会被作为鼠标的响应区。 (7)按钮制作完成，这时可发现按钮已出现在库中，切换到场景1，就可以直接从库中调用按钮了。 3、测试和保存。二、立体按钮制作步骤： 1、新建一电影文件，设置影片属性。 2、创建按钮组件： (1)执行“插入/新建组件”命令。在弹出的组件属性对话框中，为新按钮输一个名字，比如“anniu2”，选择类型为“按钮”，最后按“确定”按钮。 (2)创建按钮四帧的效果。 具体步骤和前面的类似（略）。 ▲向上和经过帧效果如图3；向下和执行帧效果如图4。 　 ?????? ?????????????????? 图3 向上和经过帧效果?????????????? 图4 向下和执行桢效果 　 ▲提示：这个按钮图形的制作有点巧妙，我们从绘制一个填充了渐变色的球开始，利用一系列的分割和变形，最终得到了具有金属感觉的立体按钮。下面是分割和变形的步骤参考： 　 ? ? ? ? 　 ??? 上面的制作过程中关键是最后两步：先画一个大半径圆角矩形框，选中圆角矩形框内的色块旋转180度，然后删除圆角矩形框，就得到了具有下凹效果的最后一图。 三、变幻按钮制作步骤： 1、新建一电影文件，设置影片属性：200*200，淡蓝色背景。 2、执行“插入/新建组件”命令。在弹出的组件属性对话框中，名称“hua 3、导入一朵花的图片，按Ctrl+B组合键打散图片，用套索工具去掉花周围区域。 4、执行“插入/新建组件”命令。在弹出的组件属性对话框中，为新按钮输一个名字，比如“anniu”，选择类型为“按钮”，最后按“确定”按钮。进入按钮编辑区，并从库面板中将花元件拖入“UP”帧中。 5、新建一个影片剪辑，从库面板中将花元件拖放到编辑区中并在第20帧处插入帧。 6、新建图层2，从库面板中将花拖入到编辑区中与图层1中的元件重合。在图层次2的第20帧处插入关键帧。 7、将图层2中第20帧中的花缩小，然后将它放置于右下角，点元件在属性面板中将Alpha值设置为“0” 8、在图层2的第1和第20关键帧间创建动作。 9、重复6、7、8步的操作，完成右上角、左上角、左下角渐变运动、颜色渐变、大小渐变的动画。 10、双击库面板中的按钮图标进入按钮编辑区，在鼠标经过帧中插入白色关键帧，从库面板中将影片剪辑元件3拖入场景中，将UP帧中的内容分别复制到Down帧和反应区帧中。 11、切换到场景中，将库面板中的按钮元件拖入到场景中。 12、测试和保存。