17交互动画1课件.docx

17交互动画1课件.docx

《17交互动画1课件.docx》由会员分享，可在线阅读，更多相关《17交互动画1课件.docx（10页珍藏版）》请在冰豆网上搜索。

17交互动画1课件

1.7交互动画

（1）

课题

§1.7交互动画

（1）

第1课时

教法

启发式、演示法、和任务驱动法

学法

模仿演练

教具

投影仪，多媒体计算机

教

学

目

标

知识与技能：

掌握创建按钮的基本方法,初步学会使用按钮的动作设置，实现对Flash动画的控制。

过程与方法：

1、能够运用类比的学习方法进行简单按钮的创建，实现知识迁移。

2、在进行按钮的动作设置的过程中，归纳出利用按钮控制Flash动画的方法。

情感态度与价值观：

通过学习使用按钮，体验Flash动画的交互性，培养学生的创造力、统筹安排能力。

重点

创建按钮

难点

创建按钮

板

书

设

计

§1.7交互动画

（1）

1、按钮元件

2、创建按钮

3、再说按钮

教后感

上完本节课后，我发现学生的潜力很大，积极性很高，大部分学生能完成探究任务，作品能体现学生的创造力和个性表现力。

但还有部分同学习惯于依赖老师与教材，本人在今后的教学中还应加强指导和引导。

教学过程

一、导入新课：

Flash的交互动画提供给你参与和控制动画播放内容的渠道，正是由于这一点，使多媒体产品与视频动画区分开来。

Flash的交互性可以为两种对象设置交互动作，即关键帧和按钮。

对于关键帧来说，可以使动画播放到该帧处，将响应预定的命令，例如跳转播放、暂停播放等。

当关键帧被设置了交互程序后，关键帧所在的时间轴影格上将标有“a”标志。

而对于按钮来说，就更熟悉了。

在微软视窗中，单击每个按钮都会产生一响应的事件，Flash也是一样。

二、出示目标：

三、讲解新课：

按钮元件是Flash的基本元件之一，是交互控制中常用的工具，是实现动画交互效果的关键对象。

，使用它可以控制各种动作。

如控制动画的播放顺序、开始、停止或退出等。

交互动画是通过动作设置来实现的。

所谓“动作”就是在特定事件发生时执行的若干条命令。

而能够触发“动作”事件发生的是一些特定的行为，如当动画播放到了某一帧、当单击了按钮、或者按下键盘上的某些键。

你可以创建一些“动作”告诉Flash在事件发生时执行什么样的命令。

按钮（button）只有四帧信息，代表按钮的四个不同状态（向上帧，表示正常状态下按钮的外观；经过帧，表示鼠标指针在按钮上时的状态；按下帧，表示鼠标单击按钮时的状态；执行帧，表示按钮对鼠标做出反应的区域。

从外观上，“按钮”可以是任何形式，比如，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。

先来看一看各种各样的按钮吧！

各种各样的按钮范例.swf

本实例是一个精美的按钮元件，下面是这个按钮的运行效果。

按钮效果.swf

A、新建按钮元件　　新建一个影片文档，执行【插入】|【新建元件】命令，弹出一个【新建元件】对话框，在【名称】中输入“圆形按钮”，选择【类型】为【按钮】类型，如图所示。

单击【确定】按钮，进入到按钮元件的编辑场景中，如图所示。

B、创建按钮　

（1）绘制按钮图形　步骤1创建【弹起】帧上的图形　将【图层1】重新命名为“圆形”，选择这个图层的第1帧（弹起帧），利用【椭圆工具】绘制出如图所示的按钮形状。

这个形状是由一个蓝色圆形和一些小椭圆形状组合而成的，另外为了表现球的立体感，在蓝色圆形下边还绘制了一个椭圆阴影。

你可以参考源文件进行绘制，另外你完全可以充分发挥自己的想象力，绘制出更漂亮的按钮图形。

　步骤2创建【指针经过】帧上的图形　　选择【指针经过】帧，按F6键插入一个关键帧，并把该帧上的图形重新填充为橄榄绿色，如图所示。

步骤3创建【按下】帧上的图形　【按下】帧上的图形和【弹起】帧上的图形相同，因此利用复制帧的方法即可得到。

先用鼠标右键单击【弹起】帧，在弹出的菜单中选择【复制帧】命令，然后用鼠标右键单击【按下】帧，在弹出的菜单中选择【粘贴帧】命令即可。

　步骤4创建【点击】帧上的图形　　选择【点击】帧，按F7键插入一个空白关键帧，这里要定义鼠标的响应区。

用【矩形工具】绘制一个矩形，如图所示。

注意一定要让这个矩形完全包容前面关键帧中的图形。

说明：

【点击】帧中的内容，在播放时是看不到的，但是它可以定义对鼠标单击所能够做出反应的按钮区域。

也可以不定义【点击】帧，这时【弹起】状态下的对象就会被作为鼠标响应区。

（2）创建文字效果　　为了使按钮更实用并更具动感，下面我们在圆形按钮图形上再增加一些文字特效。

　步骤1创建【文字1】图层　　在【圆形】图层上新建一个图层，并重新命名为“文字1”。

在这个图层的第1帧，用【文本工具】输入“play”文字，字体颜色用黑色，如图所示。

步骤2创建【文字2】图层　　在【文字1】图层上新建一个图层，并重新命名为“文字2”。

先将【文字1】图层上的文字原样原位置复制到【文字2】图层的第1帧上。

方法是，单击选择【文字1】图层上的文字，执行【编辑】|【复制】命令，然后单击选择【文字2】图层的第1帧，执行【编辑】|【粘贴到当前位置】命令即可。

　　除了【文字2】图层，锁定其他图层，然后选择这个图层上的文字对象，按下向上方向键和向左方向键各两次，然后将文字的颜色更改为绿色。

这样就形成一个立体效果的文字，如图所示。

选择【文字2】图层的第2帧，按F6键插入一个关键帧，将这个关键帧上的文字颜色改为蓝色，如图4-4-11所示。

至此，这个按钮元件就制作好了，现在我们返回【场景1】，并从【库】面板中将“圆形按钮”元件拖放一个实例到舞台上，然后按下Ctrl＋Enter组合键测试一下，怎么样？

将你的鼠标指针移动到按钮上，够漂亮吧？

再说按钮　　按钮有特殊的编辑环境，通过在四个不同状态的帧时间轴上创建关键帧，可以指定不同的按钮状态，如图所示。

【弹起】帧：

表示鼠标指针不在按钮上时的状态。

　　【指针经过】帧：

表示鼠标指针在按钮上时的状态。

　　【按下】帧：

表示鼠标单击按钮时的状态。

　　【点击】帧：

定义对鼠标做出反应的区域，这个反应区域在影片播放时是看不到的。

　　【点击】帧比较特殊，这个关键帧中的图形将决定按钮有效范围。

它不应该与前3个帧的内容一样，但这个图形应该大到足够包容前3个帧的内容。

注意：

按钮“一闪闪的”，很难单击它！

是怎么回事？

这一般发生在文字类按钮，如果你没在“按钮有效区”关键帧设置一个适当图形，那么，这个按钮的有效区仅是第一帧的对象，文字的线条较细且分散，难怪很难找到“有效区”了！

　　“有效区”图形还可以充满整个屏幕，退出按钮编辑后，“有效区”图形是不可见的。

根据实际需要，你还可以把按钮做成如图所示的结构。

从图中可以看到，按钮的3个“状态关键帧”中，可以放置除按钮本身以外的任何Flash对象，其中：

【状态音效】图层设置了2种音效；【按钮动画】图层使鼠标不同操作出现不同动画效果，而【按钮底图】中可放置不同的图片。

　　你可以想象一下：

利用这个特点，我们可以把按钮做成何等有声有色、变化无限的效果！

四、课堂练习：

完成课本P25-26页按钮的制作。

五、课堂小结：

A、按钮的交互使用，在使用的过程中要注意以下三点：

1、按钮在动画中的准确定位。

2、动画中关键帧动作的准确设置。

3、按钮动作的准确设置。

B、评价标准：

1、是否能够恰当的使用按钮。

2、所用按钮与整个动画的色彩是否和谐优美。

3、按钮的控制是否准确。

4、是否使用自制按钮。

六、课堂作业：

1、下面一个范例是一个隐藏按钮的应用，你能制作出来吗？

隐藏按钮应用范例（导航界面）.swf

2、拓展任务

演示一些动态的按钮范例，考虑这些动态按钮如何创建，课后思考并完成动态按钮的创建。

提示：

在按钮的帧中添加影片剪辑组件。

七、结束语：

你一定为那些出色的动画游戏以及丰富多彩的网络交互动画所赞叹，按钮在其中起着举足轻重的作用，其实，通过自己不断的磨练，你完全能够做出让别人赞叹的作品！

学生分析

学生前面已经学习了图形的直线运动动画，变形动画和简单的文字动画的制作，对flash动画制作有了一定的基础，并具有较为浓厚的学习兴趣，但是对于flash动画的交互控制还一无所知，Flash中按钮交互的使用在flash动画制作中有着重要的作用，本课时通过一个缺失flash按钮交互功能的flash案例，引出按钮交互功能的重要性，激发学生的好奇心，驱使学生主动学习和探究，通过课堂上和学生实践、探究，使学生掌握Flash中按钮交互的使用，培养学生自主学习和探究学习的能力。

观察实例效果，激发学生学习兴趣

实例讲解过后再说按钮，学生会有更深的理解

通过问题讲解，吸引学生注意力