浅谈gif动画设计教学

浅谈gif动画设计教学
永安三中张雄英
提起做动画，人们就会想到flash。

但是很多年前，我们机房的硬件配置还不能运行flash 软件，就算是现在的无盘系统，运行flash也有一定难度，更不要说条件比较差的地区了。

在这种情况下就不能进行动画制作教学吗？那样的话岂不是剥夺了孩子们对动画世界的渴望！俗话说“世上无难事，只怕有心人”，我在那条件艰苦的几年里就找到了一个教学生制作动画的方法，并且编制了一套教程，总结了一些经验，现把它写出来，与大家一起交流，如果碰到gif动画制作大师，请原谅我班门弄斧，并请不吝赐教。

在很多年前，我有学生问我：老师，我也想学做动画，你看那网页上的动来动去的动画超可爱，要是我也能做就好了。

我反复思考，难道不能运行flash软件就不能做动画了吗？网页上的动画在多年前少数是flash大动画，绝大多数是GIF动态图片呀！就连那可爱的QQ 表情，也是GIF动画居多呢！想到就做，我马上去网上找能做GIF动画的软件来，一找，制作gif动画的软件还真多，像能兼做GIF动画的大软件咱就不考虑了，总之咱那样的无盘系统20MB以上的软件都最好不考虑，找来找去，终于找到一个14.7MB的又可以免安装免注册的，叫UleadGIFAnimator ，而且还是中文版（注：Ulead公司研发的一款gif动画制作软件，1992年发布Ulead Gif Animator 1.0以来，Ulead Gif Animator一直是制作gif动画的工具中功能强大、操作使用最简单的动画制作软件之一，现在至少到5.05版本了），一拷到服务器上，学生就能打开使用，所有学生同时启动这个软件并制作动画都畅通无阻，真是太好了！
接下来，我就开始苦学gif动画制作，买书学，上网学。

从网上到处寻找gif动画制作的实例，熟悉Ulead Gif Animator软件的界面菜单和各命令的用法，研究gif动画制作原理，熟练制作gif动画实例，领悟它的制作方法和原理，就这样我就开始教学生制作动画了。

在这里要说明一点，我可不是要宣传Ulead Gif Animator这个软件，我只是想借助Ulead Gif Animator这个软件在硬件不允许的条件下教学生做点小动画，明白一点动画的原理，就好像后来有了较好的硬件条件和闽教版专门的flash动画制作教科书一样。

与flash制作动画的繁复不同，Ulead Gif Animator制作GIF动画比较容易入门。

下面就举一个最简单的例子，让学生明白动画的原理：如果把现实生活中的一个运动状态连拍几张照片，在电脑里把这些静止的照片快速播放，看起来就成了动画了，因为人的眼睛有“视觉暂留”效应，当连续、快速地显示这些静止图片时就会产生它在运动的错觉。

如下图中，在Ulead Gif Animator软件中的帧面板中每帧中放入一张青蛙动画的图片，当运行这个动画时，谁看它都是非常逼真的青蛙在跳呢！
当然，我们不可能什么动画都事先用照相机去照这些照片，但是我们可以画、可以稍加改变、可以创作，再加上Ulead Gif Animator软件本身具有的动画辅助制作工具、命令，就能制作出比较好看的动画了。

我把它归纳为如下几种gif动画制作方法：
一、逐帧动画
像刚才上面的青蛙跳，就是逐帧动画，每一帧一个场景或图片，特别适合做网页上的滚屏新闻动画。

也可以自己画，下面就举一个自己画的：
这就是一个简单的自己创作的“火柴人”手上下挥舞的动画，学生做完这个动画时，不知多兴奋呢，我不断鼓励学生多创作一些类似动画，学生比我们想像的聪明，特别是初中学生，比高中学生更有想象力，创作出例如“武打动作”，“花之生长”，“旭日东升”“化茧为蝶”等动画来，真是很不错。

二、利用已有素材加工制作动画
比如：在第一帧中导入一个大眼睛卡通图，在第2帧中用吸管工具吸取眼睛周围的肤色，用画笔工具把眼睛涂抹掉只剩睫毛，这样两幅图片以适当速度播放，就像一个人在眨眼睛。

又如：模仿人用笔写字的过程制作的动画，素材是一支笔的图片，加以巧妙的橡皮擦工具的使用，关键是巧妙的动画构思，最后以每帧0.4秒的速度播放，就像一个人在写“十”字：
三、利用Ulead Gif Animator软件本身提供的“视频F/X”特效工具制作动画：
如：对前一张图片加以“视频F/X”里的“星状擦除”特效，软件自动会帮你制作出中间过程，慢慢过渡到下一帧，我们要做的就是点两下鼠标，一个特效动画就做好了！这种特别适合做简单的广告，放在网页里，也能增色不少。

Ulead Gif Animator软件本身提供的“视频F/X”特效有百来种！可以制作出“发光贺卡”，“字变色”，各种特效渐变等动画效果，中间过程都是软件帮我们生成，非常方便！
特效前：
特效后：
四、利用Ulead Gif Animator软件提供的“进入场景”和“退出场景”效果，可以制作文字动画效果。

如下图，就是利用“进入场景”和“退出场景”设置让“条幅文本”“*****”号模拟雪花飘舞，是不是很像呢？“进入场景”和“退出场景”设置各有十几种，也可以制作出不少效果。

五、制作原创动画
如下图是著名的“闪图”娃娃动画实例，原理是对第一帧里的头发用魔术棒选择工具巧妙的把它经过三次换三种不同的星光底图，以0.1秒的快速播放，这个娃娃就因为头发不断变换闪烁的背景色而闪闪发光。

同样的原理，可以制作出闪字和千奇百怪的闪图来。

类似这样巧妙构思的原创动画，才是真正只引人的动画。

最后，说说我的教学方法吧，我在第一节课给学生介绍这个软件，因为Ulead Gif Animator 这个软件的工具界面不复杂，第一节课学生掌握界面后，从第二节课开始，我就每节课从简单到复杂选择一个实例，课前编写好它的教程，上课时把所要用到的素材和教程发给学生，让学生边看教程边做。

一学期下来，我的学生的自学能力得到了很大的提高，他们从刚开始的不适应（因为以前都是老师先教），到后来最复杂的动画效果都能自学完成。

当学完基本的动画制作方法后，我会安排一些综合创作，或动画制作比赛。

比如在讲制作“眨眼睛”动画时，我编写的教程如下（我把这个教程和要用到的素材课前准备好，上课时用广播软件发送到学生机桌面）：
――――――――――――――――――――――――――――――
《眨眼睛动画教程》
同学们，今天我们学习制作“眨眼睛动画”，素材为卡通图像若干，做完后用“文件”菜单下的――“另存为”――“gif文件”，把这个gif文件提交到教师机。

同学们可独立完成，也可互相请教或问老师。

方法如下：
400*300,透明背景的文件
工具添加文件夹里的“眼睛”图片（可以再用“编辑”菜单里的“修整画布”，可以让画布缩小为刚好容下图片）：
工具添加一个空白帧（如下左图），同样用工具添加同样的一幅“眼睛”图片（如下右图）：
点击第２帧，用选择工具点击一下工作区里的图片（以确保对象被选中）―――
再用工具箱中的颜色选取工具在图像的眼睛上眼皮点击一下（吸取上眼皮的肤色）
，在第２帧工作区里图像的眼睛处涂抹，只剩下下睫毛，最后成下左图样：
50, 双击第２帧，设置延迟为20,预览动画，预览动画，一个眨眼睛的动画就制作好了！
同学们利用这个原理还可以做出别的动画效果吗？试试吧？如果有创作出自己满意的动画，别忘了发给老师，让老师同学们一起欣赏你的奇思妙想吧！
――――――――――――――――――――――――――――――一学期下来，积累了一本自己编写的gif动画制作教程。

为什么要自己编写教程呢？虽然网上教程很多，但大部分都太简略，不详细，直接拷贝给学生做，学生经常做不出来；有的呢就是错误的，照它的方法根本做不出来；还有的呢没图片，光文字叙述，对初学者来说也是相当的困难。

在接下来的教学中，在讲到“网页制作”时，我就让同学们把自己制作的gif动画应用到网页中，学生看到自己做的动画也在网页中点缀，相当的高兴。

在讲到powerpoint软件制作幻灯片时，gif动画可直接插入到多媒体作品中。

再后来有了上网，就让学生把自己的作品添加为QQ表情图像，学生感觉到非常的有成就感，对学习制作动画更加的有兴趣，有的甚至自己开始在家里学习flash动画制作。

后来，我们机房硬件更新了，可以运行40MB 左右的flashMX软件了，就没有再上gif 动画制作了。

但是在讲初二的“平面素材的加工”时，因为当时系统里没有那个office的photoeditor工具，一时又下载不到，我又找了一个ACDSeePhotoEditor软件替代，功能包含office的photoeditor，而且还更多，软件又小，我也采用同样的方法，课前准备好素材，编制好教程，让学生去完成图像处理的一项项任务，并安排综合创作让学生学以致用。

因为编写得很辛苦，加上我编写的教程和准备的素材都有一定的创新，并且适合于上机操作，当同事和外校的同学朋友跟我要我的教学资源时，我毫无保留的贡献出来，并且感觉到一点点小小的成就感，虽然不是什么大作，但也是曾让学生受益过的。

2012-3-3。