2011信息技术活动课教案2 (2)

1、信息技术活动课教案、活动时间：2011.3.11二、活动地点：微机教室三、教师：臧晓，张天羽四、活动内容：flash动画技术五、教学目标：1: 了解时间轴和关键帧2： 了解图层和图层遮罩3： 了解符号和组件flash动画技术v二言显示和隐藏时间轴既然flash是一套动画制作软件，因此要学习flash的第一步就必须从时 间轴面板入手。时间轴面板在菜单栏的下方，使用来管理图层和处理帧。时间轴面板可以在“查看”菜单中显示和隐藏'时间线”命令，这样可以腾出许 多空间来显示工作区。时间轴面板分为三部分，左上角是场景名称，一般是“场景t按钮，按钮下 面是图层管理区，图层区旁边是时间轴。图层我们在后

2、面讲到，这里只介绍 时间轴。时间轴由许多的小格组成，每一格代表一个帧，一帧就是一幅图片，许多 图片连续播放，就是一个动画影片。下面讲一下时间轴下面的五个按钮，第一个“帧居中”可以让选中的这个图 层显示在时间轴面板的中间位置，在多个图层时很有用。第二个是“绘图纸外观”可以显示出两个影子来，分别是动画过程的几个动 作，也就是所谓的洋葱皮效果。这时在帧的上方有一个大括号一样的效果范 围，两头可以拖动范围。第三个是“绘图纸边框”只显示出图形的边框来，因而速度要快一些。 第四个是“编辑多帧”可以同时编辑两个以上的关键帧，可以同时选中，也 可以单独修改。第五个是“修改标记”可以设置显示影子的数量和显示帧的

3、标记，默认2个 绘图纸。下面我们来进行练习我们将制作出一个类似附图的效果来。这一幅图由三个关键帧组成，选择椭圆工具，填充色用渐变色，在工作区 上绘一个圆，按“v”键可以快速选中箭头工具，选择圆的外边框（当鼠标接近 边框时会拖出一条尾巴，单击就可以选中边框），按delete键删除外边框， 按ctrl+g键群组为一个对象。选中第60帧插入关键帧，把其中的圆稍微拖动到旁边，再选中第90帧插 入关键帧，再往旁边拖动一点里面的圆，三个帧的三个圆错开排列，此时时 间轴上有了 90帧。以“时间轴”为文件名，保存文件到自己的文件夹在第一帧上单击鼠标右键，选择“创建动画动作”，同样在第60帧上单击右 键创建动作

4、动画。保存一下文件，按ctrl+回车键测试一下影片，只有一个 小球的移动，看不出什么特别的。回到场景中（ctrl+w）,单击第一帧选中它，在单击第二个按钮“绘图纸 外观”，在看一下效果，是不是变了？在单击的五个按钮“修改标记”，选择“绘 图全部”再看一下效果，怎么样？再点一下按钮取消特效，用箭头工具修改一下这三个帧的位置呈“v”字型排 列、中间大两头小的形状。再选择各个按钮，你就可以产生出不同的效果来。 保存一下文件单击其他按钮看看有什么变化。本节主要介绍了时间轴面板和洋葱按钮效果。（九）改变时间轴的大小时间轴的大小是可以任意编辑的，可以按工作的需要自由的更改其大小。 将鼠标移动到时间轴与工作

5、区窗口分界线，鼠标变成上下双箭头，上下拖动 可加长或缩短时间轴。将鼠标移动时间轴与图层区交界线，鼠标变成左右箭 头，左右拖动可改变时间轴的宽度。在时间轴下边的状态栏有三个数字显示窗。左边第一个窗口显示播放光标 所在的位置的帧编号；中间窗口显示影片的播放速度；右边窗口显示了该影 片到播放指针位置所经过时间。下面练习一下拉高时间轴，再还原回去。把时间轴向左边拖一些，让图层 面板变窄，再还原回去。看一下时间轴下方的几个数字跟帧的关系。本节介绍了如何改变时间轴的大小，可以使你在工作更方便。编辑帧依功能，帧可以分为三种类型。帧、关键帧和空白关键帧。关键帧是指在 动画中起关键性作用或动作的帧；空白关键帧指

6、空白的帧，不含有任何图形。你可以在时间轴的任何位置增加帧，从而使影片加长，默认的新文件只有 一个图层1和一个帧，因此我们制作动画就是添加帧和图层。下面我们制作一个动画，先选取“椭圆”工具，在工作区当中绘制一个椭圆, 然后在的20帧处插入空白帧（注意是“插入空白帧”，而不是“插入关键帧”）， 看一下时间轴上的变化，我们发现第一帧上有个黑点，这表明它是关键帧， 第19帧上有个小方框，这是关键帧的结束位置，第20帧是白色的左边有一 条黑色的实线，这就是空白帧的标志，其他帧都是由flash自动生成的过渡 帧，一般是灰色的，里面有没有图形呢？试着移动红色时间指针，发现跟第 一帧差不多，因为是过渡上下文的

7、承上启下的帧。以“帧”为文件名，保存文件到自己的文件夹此时如果再新增一个图层，这个图层有多少帧呢？是默认的一帧，还是跟 图层1 一样的20帧？我们来试一下，单击“插入图层”按钮，加入一个图层2, 你可以发现，flash会自动向图层1看齐，保证动画的步调一致。但是仔细 看一下，这20帧都是虚的白色的，说明什么？它们既不是关键帧也不是空白 关键帧，只是一些小格子，是普通帧。下面来看一下，如何选择帧，对于普通的帧、关键帧和空白关键帧，只要 用鼠标左键单击即可选中，选中多个时可以用shift组合键，选择全部的帧也 可以单击图层的名称，对于过渡帧选择稍微有点儿麻烦，因为过渡帧跟前后 都是连在一起的，单击

8、任何一个过渡帧都会选中所有的有联系的帧，如果要 选择某一个过渡帧，就得想想办法，我们采用鼠标右键的精确定位功能来选 择一个过渡帧。先单击鼠标右键，此时会选择上这一个帧，不用管弹出的菜 单，此时拖动鼠标左键就可以选择多个过渡帧。注意要观察鼠标指针的形状, 是箭头时可以选择，如果是一个小手，这就是抓住拖动而不是选择了。插入帧的方法是先选择插入位置，再选择插入的帧数，一般默认只插入一 帧，若选择了多个帧表示要插入多个帧，再选择插入的帧的类型，此时就完 成了插入操作。选中图层1的第5帧，先插入一个普通帧，再删除它，再选 中第5到第10帧，执行“插入帧”命令，看一下，再删除它。保存一下文件删除的操作跟插

9、入刚好相反，选中后按“delete”键或者选择“移除帧”命令， 注意“delete”键一般要删除两次才能完全删除一个帧，而”移除帧”一次就可以 了，此时影片自动缩短一帧。下面来进行练习，先将图层扩充到40帧，单击时间轴状态栏的向右按钮找 到第40帧，在第40帧处单击鼠标右键，选择“插入帧”命令，将图层1和图 层2分别加长到40帧。在图层1的40帧处单击右键，选择“插入关键帧”命令。看一看变化，我们 发现，影片并没有加长，而是普通帧变成了空白帧，把19帧的小方框拖到 40帧，看一下变化。再在图层1的第20帧处“插入空白关键帧”，看一下变化。 我们又发现20帧以后都变成了普通帧，空白关键帧可以用来

10、分割影片。保存 一下文件在第5帧处插入关键帧，选择油漆桶工具，选择红色填充色，给椭圆填上 红色，按回车键播放影片，看一下效果。保存一下文件本节主要介绍了帧的类型，选择、插入、删除等等。图层操作在时间轴面板的左边是图层编辑区，每一个图层占一行，单击图层区可以 选中所有的帧，各个图层的帧相互重叠显示在工作区，因此常常分不清场景 中的对象属于哪一层，此时只要选中对象后，观察一下图层区就可以看到变 黑的就是这一层了。下面我们来学习一下图层操作首先看一下如何新增图层，看一下图层工作 区的左下角，有一个加号按钮，单击它就会在当前图层上方（注意是上方） 新增一个图层，并给一个默认的名字，一般要改为有意义的名

11、字，方法是在 图层上单击鼠标右键，选择“属性”命令，此时即可在对话框中输入新名字，也 可以直接双击改名。有时图层的顺序排错了，此时可以用上下拖动的方法来改变原来的顺序。为了防止图层之间的相互干扰和误操作，我们常常把不用的图层隐藏起来或 者锁定不让修改，操作方法是，在图层区有上边有三个按钮，从左到右分别 是一个眼睛，一把小锁和一个小方框，那么你一定能够猜出，哪一个是隐藏, 哪一个是加锁，单击眼睛按钮，那么这一列将全部打叉，所有的图层都被隐 藏，工作区上什么也都看不到了，当然再点一下全部又都会显示出来的，如 果只想隐藏一两个图层该怎么办呢？方法是在这一个图层对着眼睛的位置上 的小黑点上点一下打个叉

12、，就可以只隐藏这一层了。锁定的方法也是一样的, 但这时候就只能看而不能修改了，不管是隐藏还是锁定以后，这一层上都会!1!出现一个打红斜杠的铅笔，表示这一层上的帧不能编辑了。第三个方框按钮 表示图层中所有的对象都只显示外边框（线框模式），这样可以节省出大量 的系统资源，因为显示图像会占许多的内存，从而可以加快操作的速度，缺 点是图象看着有点儿别扭。我们应该养成习惯，完工的图层立刻锁住防止误操作。删除图层的方法是在图层上单击右键，选择“删除图层”命令，也可以把图 层拖到图层区右下角的垃圾桶按钮上，删除是一个危险的操作要特别小心。本节主要介绍了如何新增、重命名、删除、隐藏和锁定图层，下面来做一 个练

13、习。首先先认识一下图层区的各个图层和按钮找到新增、删除、隐藏、锁定、 线框按钮，把图层1的名称改为“背景层”，再新增一个图层，把名称改为“图 像层”，在背景层的第一帧里画上一些背景图，在图像层的第一帧里画上一个 红色的圆和一行绿色文字。然后练习一下锁定和隐藏。图层遮罩图层遮罩一个很好的效果遮罩效果用在探照灯和水面浮出等效果中，只在某个特定遮罩的位置显 示出图像来，而其他部位不显示，起遮罩作用的图层被称为遮罩层。遮罩层跟其他层一样可以在每个帧里绘图，凡是有图形的位置就有遮罩效 果，没有图像的部位会被遮挡住不透光，但遮罩层本是并不显示的。创建遮罩层的方法是先新增一个普通图层，然后用鼠标右键单击这一

14、图 层，再弹出的菜单中选择“遮蔽”命令遮罩层和被遮罩层之间有一条拐弯的箭头 线，图层的标志也相应改变，遮罩层将遮蔽它下面的一个图层。下面做一个练习，效果是一面飘动的红旗首先新增一个图层，将图层1重命名为“红旗”，图层2重命名为“遮罩”并把 它设定为遮罩层（注意拐弯的线）。保存一下文件选中“红旗”层的第一帧，在工作区中绘制一个长方形，打开信息面板，设 定高度120 （字母h），宽70（字母w）的红色长方形，用箭头工具把上下两条 边稍微向上拖一点成弧形，然后选中四条边都删除掉，留下内部红色部分作 为旗帜。接下来加宽旗帜并产生飘动效果选中红色旗帜，按住ctrl键拖动红旗，复 制到旁边，飘动的效果是波

15、浪型的，所以新复制出来的红旗要掉个头，选择“修 改”菜单中的“转换”项中的“垂直翻转”命令，让红旗翻过来，然后仔细地把这两 个红旗拼起来，再选中整个红旗，按ctrl键再复制出一个来，把这两个红旗 拼起来，这样就完成了红旗的制作。用小锁把红旗层锁定，保存一下文件接下来制作遮罩层，选中遮罩层的第一帧，在工作区中绘制一个黑色的长 方形宽度（w）为红旗的一半，也就是140,高度能够挡住红旗，去掉外边框。 黑块将会作为遮罩块，用于显示下层的内容。拖动黑色块使它恰好挡住右半个红旗，这样两层都制作好了，下面制作动 画。保存一下文件动画效果是红旗的飘动，先锁定遮罩层，解锁红旗层，选中红旗层的第20 帧插入关键

16、帧，在20帧中把红旗向右水平拖动（按住shift键），刚好让黑 块挡住左半部分，选中第一帧，创建动作动画，保存一下文件按ctrl +回车键测试一下影片，为什么没有效果呢？遮罩层只有一帧，只能控制红旗的第一帧，后面的就不行了，因此要加长遮 罩层，锁定红旗，解锁遮罩，在第20帧处单击右键，选择“插入帧”命令，将 遮罩层也加长到20帧。保存一下文件按ctrl+回车键测试影片，看一下飘动的效果，关于文字部分，接下来自 己加进去，注意文字播放的次序。最终效果应该与下图相似。接下来自己制作一个手电筒的效果，要求在一个黑暗的环境中有一个缓缓 移动的手电筒光圈，光圈所到之处将会显示出图像来，而其他位置处于黑暗

17、。（提示：导入一个图片作为背景层，遮罩层是椭圆当作手电筒光圈，遮罩 层设一个动作动画，产生光圈移动的效果）符号和组件制作网页上的动画时，一定要使文件的体积尽可能的小，这样下载的速度 将会缩短，动画中重复的图像要把它制成一个符号，便于重复利用，下面我 们来看一下符号的创建和使用。符号也叫组件或元件，意思都是一样的，我们这儿把它叫组件，它有三种 类型，分别是影片、按钮、和图形组件，自己创建的组件放在“窗口”菜单的“图 库”中，而系统自带的组件放在“共享图库”里。使用的时候，从里面拖到工作 区里就可以了，十分方便。创建组件的方法是选择“插入”菜单里的“新建组件”命令，此时将会弹出一个 对话框，输入组

18、件名称，选择组件类型，单击“确定”即可打开一个工作场景, 在里面进行组件的制作。那么三种组件有什么区别呢？图形组件将来是作为一个基本图形使用，一 般是静止的一幅画，像奔跑的动物就是有几个图形组件组合出来的。影片组 件是一小段动画，用在要一直运动的物体，比如夜空闪闪发光的小星星，一 个不停旋转的图标，都可以先制作成一个影片组件，使用的时候拖到工作区 就可以了。按钮组件比较特殊，原因在于按钮比较特殊，按钮可以跟鼠标进行对话， 当鼠标移向一个按钮时，按钮会有一些不同的变化，当鼠标单击按钮时，按 钮可以发布一个命令，从而控制动画的播放，因此我们制作出按钮组件可以 控制动画，比如停止(stop)、重复(

19、repeat)、继续播放(play)等等，所 有的控制都由按钮的命令来完成，我们将学习编程的知识，来对按钮进行程 序控制。我们先来练习一下图形组件和影片组件，我们将要制作一个飘动的心。启动flash系统自动新建一个影片文件，关闭其他面板，只打开“图库”将背 景色改为黑色，以“飘动的心”保存文件到自己的文件夹。首先创建一个图形组件，选择“插入”中的“新建组件”命令，创建一个以“红 心”为名称的图形组件，此时进入组件编辑状态选择“文件”中的“导入”命令，导入文件夹中的“心心相依”，这是一颗红心。 接下来去掉红心的背景白色，记住先打散图形，然后用橡皮小心擦去背景色，可以放大到800倍，擦完后再用油漆

20、桶选红色填充色喷一下，清除残留 的白色。保存一下文件这样我们己经有了一个基本图形组件，利用这个红心，我们将创建一系列 组件和动画。下面利用这个红心组件创建另一个能变色的红心组件单击“插入”中“新建组件”，以“变色的心”为名称，新建一个图形组件，单击“确 定”，进入组件编辑。选择“图库”中的红心组件，把它拖到工作区中，注意让两个十字架对准， 这样动画将在正中央，在信息面板中调节高和宽均为30o在第5帧处插入关键帧，打开“效果”面板，单击“没有”旁边的下拉按钮，选 择“高级”，看一下弹出的面板，在这里可以修改组件实例的颜色，颜色由三原 色构成，分别是红(red),绿(green)和蓝(blue),用左边的百分数乘 以右边的一个小于255的数来的到三原色的值。第5帧设为黄色，修改红色为255,绿色为255,绿色为0,百分数不变。在第10帧处插入关键帧，同样修改实例的颜色为紫色，修改红色为255, 绿色为0,蓝色为255,百分数不变。在第15帧处插入关键帧，同样修改实例的颜色为绿色，修改红色的百分 数为0,乘数为0,绿色为255,蓝色为0,百分数不变。在第20帧处插入关键帧，同样修改实例的颜色为桔红色，修改红色为12 百分数为100%,绿色为128,蓝色为128百分数不变。这样，第1帧是红色，5是黄色，10是紫色，15是绿色，20是桔色，下 面把大小再变化一下，打开信息面板和对齐面板，把