搜索
第十八、十九节按钮制作实例教程一、教学目标学完本课后，学生能了解按钮制作、重点掌握工具的应用。二、教学内容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、执行“插入/新建组件”命令。在弹出的组件属性对话框中，名称“hua3、导入一朵花的图片，按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、测试和保存。教学后记：