STEAM 理念下Flash 动画公选课自主学习系统研究设计

肖建芳

（汕头职业技术学院计算机系，汕头515041）

0 引言

动画是一种综合艺术，它是集合了绘画、电影、工程、数字媒体、科学、音乐、文学、技术等众多门类于一身的艺术表现形式。从制作技术和手段看，动画可分为以手工绘制为主的传统动画和以计算机设计为主的电脑动画。计算机设计的动画又分为二维动画和三维动画，Flash 就是一款非常优秀的二维动画设计软件，目前在MV、短剧、多媒体教学软件、高级互动Action、Flash 式选单及表单制作等领域占据重要地位。

汕头职业技术学院院级公共选修课《Flash 动画设计》课程是一门全院性公共选修课，该课程在一个学期内完成，共计36 课时。课时非常少，如果按传统授课方式，选课学生无法通过选修课习得必要的动画设计知识和技能。课时少而学习内容多的矛盾，必然促使教师进行教学改革，采用翻转课堂形式，将移动学习和碎片化学习理念加入进来。笔者结合本校实际，设计了基于STEAM 的Flash 公选课自主学习系统，为教师开展翻转课堂、学生进行碎片化学习和移动学习提供了极大的便利。

1 系统设计理念

动画设计工作是在故事板的基础上，确定前景、背景及道具的形式和形状，完成场景环境和背景图的设计、制作。由此可见动画设计工作对设计者的综合能力和素质要求很高，动画设计者需要同时具备科学、技术、工程、艺术和数学等多学科知识和技能，才会更具有创造性和创新性。

Flash 是一款非常优秀的二维动画设计软件，学习门槛低、入门快、趣味性高，是学校比较受欢迎的课程之一。STEAM 教育是集科学（Science）、技术（Technology）、工程（Engineering）、艺术（Arts）和数学（Mathematics）多学科融合的综合教育。该理念最早是美国政府提出的，强调教育的互动性、创造性和开阔性，注重培养学生的综合素养，从而提升其全球竞争力。

优秀的动画作品对动画设计师们的综合能力素质要求很高，如果能将STEAM 的理念引入课程学习，对学生综合素质的提高、学生创新创造能力的培养具有重要意义。

2 系统模块结构设计

本系统以《Flash 动画设计》公共选修课划分的课程体系模块为依据，将系统分为以下子模块：动画基础、基本绘图、逐帧动画、补间形状、元件与实例、传统补间、补间动画、遮罩动画、引导层动画、时间轴控制、综合案例、综合测试。考虑到选修课的学生都是零基础，本系统编程部分选用Action Script2.0 版本，且只学习简单的时间轴控制函数及相关简单事件。系统具体模块结构如图1 所示。

图1 系统模块结构图

除“动画基础”、“综合案例”和“综合测试”三个子模块，其他每个模块内容都包括“概念原理”和“实用案例”两个部分。“概念原理”主要是经过精心设计的知识点的概念、原理、使用方法等，比如动画形成的原理介绍，时间轴、场景、图层和帧的概念，元件和实例的区别和联系等。“实用案例”部分展示精心挑选的案例，注意在选用案例时不但要求案例从简单到复杂，还要考虑知识点和操作技能的螺旋递进，并融入STEAM 理念，在案例中体现科学、技术、工程、艺术和数学等多学科的融合，这是本自主学习系统的重点部分。结合笔者多年的教学实践和经验，设计各模块基于STEAM 的学习案例如下：

（1）“基本绘图”模块。该模块设计了三个案例：绘制海鱼、绘制夜晚高楼、绘制圣诞老人。三个案例从简单到复杂，兼顾了各绘图工具和其他工具的使用，并融入了数学几何、艺术色彩搭配、工程布局等STEAM元素。

（2）“逐帧动画”模块。该模块设计了三个案例：QQ 龇牙表情设计、高考倒计时牌设计和生日贺卡设计。其中QQ 龇牙表情需要参考QQ 软件的龇牙表情，然后绘制出效果，最后使用逐帧动画实现龇牙笑动画。生日贺卡设计的是打字效果，随着光标的移动，生日祝语一字一字地好像是即时敲打上去的。案例承前启后，从简单到复杂，生动诠释了动画原理和视觉暂留原理，学生在案例学习中理解帧、关键帧和帧频等概念，并运用到艺术、数学、科学、技术和工程多学科的知识。

（3）“补间形状”模块。该模块设计了三个案例：ABC 字母变换、爱心变换、几何图形变形。案例包含了文字变化成其他文字、文字变化成图形、图形之间相互转换效果，融合了STEAM 理念，巩固了Flash 绘图基础和逐帧动画。同时，可以使用洋葱皮工具观察形状补间动画在形状、颜色、位置等方面的具体变化细节。

（4）“传统补间”。该模块设计了三个案例：小球滚动、作用力与反作用力、弹簧振子简谐运动。案例可以很好地诠释传统补间的原理以及元件的使用，融入了科学、数学、工程、艺术、技术多学科知识。

（5）“补间动画”模块。该模块设计了四个案例：蝴蝶花间舞、单摆运动、重走丝绸之路、幻灯片放映效果。四个实用案例融合了STEAM 理念，使用简单的运动轨迹原理、生物特征、物理知识、历史知识、数学知识、艺术素养和工程思想就可以设计出来。

（6）“遮罩动画”模块。该模块设计了三个案例：探照灯文字、毛笔写字效果、自动绘制几何图形。这几个案例都是学生平时经常接触到的一些效果，结合数学、艺术、科学知识，使用遮罩动画设计技巧就能很快做出来，学生学习积极性大大提高。

（7）“引导层动画”模块。该模块设计了两个案例：物体自由落体运动、分子无规则运动。一个案例选自中学物理，一个案例选自中学化学，也是非常好理解的科学现象，很好地融入了STEAM 理念。学生通过学习能够把以前做过的实验真实地还原出来，兴趣大大提高，也在案例练习过程中更好地理解了生活中的科学。

（8）“时间轴控制”模块。该模块设计了一个案例：电子画册设计。精选精美画册图片，使用Photoshop 工具将图片处理成想要的效果，然后导入库中，并将图片置入不同的帧，最后通过按钮编程实现控制画册的播放。其中不但融入了科学、数学、工程和艺术理念，还可以对ActionScript2.0 中的事件和时间轴控制函数进行很好的练习和理解。

（9）“综合案例”模块。该模块精选综合案例：数学课件设计和MV 设计，综合运用Flash 绘图、逐帧动画、形状补间、传统补间、补间动画、引导层动画、遮罩动画等动画设计方法，导入外部多媒体素材：图片素材、声音素材和视频素材，并融入科学思维、数学知识、艺术审美及创作、技术运用和工程理念，结合镜头设计技巧：推镜头、拉镜头、摇镜头、移镜头，完成综合性的案例效果。最后设计恰当的按钮，并在按钮和相应关键帧上根据需要添加脚本代码，控制动画的播放、暂停、停止、快进和快退等效果。

3 系统实现

本系统采用Adobe Flash CS6 软件设计，脚本选择ActionScript 2.0，最终的成果是发布成.exe 的可执行单机文件、.swf 影片文件或.html 的网页文件形式。该系统对硬件和软件没有特别要求，常规学校机房条件都支持。Flash 采用矢量绘图的特点使系统非常小，方便携带以及共享给学生，或者放服务器让学生在线学习。

3.1 界面实现

系统主要内容都设计在主界面显示，最上方一栏是标题区域，显示该系统的标题，第二栏是一级导航区域，子模块的名称都显示在这里，单击一级导航区域的菜单项，二级导航区域出现在第三栏左侧边栏，通过二级导航获得具体学习内容，该内容显示在第三栏右侧的主体区域。简单布局如图2 所示。

图2 软件界面布局

将图1 中的子模块名称设置为一级导航的菜单项，单击一级导航菜单项，出现对应的二级导航菜单。比如单击一级导航菜单项“动画补间”，则显示二级导航菜单项：“概念原理”、“蝴蝶花间舞”、“单摆运动”、“重走丝绸之路”、“幻灯片放映效果”和“返回”五个子菜单项。单击“单摆运动”菜单项，则在系统主体区域显示该案例动画效果，单击主体区域的“设计思路”链接查看该案例的设计思路和相关的STEAM 原理，单击“操作步骤”链接弹出作品的操作步骤和注意事项。学生课前进行自主学习时，可以根据教师预先布置的学习任务，找到相应导航打开学习内容，先学习该模块相关概念原理，然后观看案例效果，边看效果边查看作品的设计思路和原理，最后根据“操作步骤”中的具体操作步骤进行实操训练。

3.2 导航实现

第二种方法是将一级导航和二级导航内容设计在不同场景中，通过切换场景来实现跳转，使用到的关键代码是：

Flash 软件中的导航设计原理与网页设计课程里的相似，但是操作起来却复杂很多，尤其是二级导航效果，需要通过一些技术手段实现。第一种方法是将一级导航和二级导航内容设计在同一场景中，然后通过跳转帧的方式实现导航。使用到的关键代码是：

3.3 综合测试模块的实现

为了实现成绩即时统计和试题解析，综合测试题目全部采用选择题的形式。使用Flash 软件中的RadioButton、Button 等组件可以很方便的设计出综合测试模块的界面，通过改变组件参数以及为组件添加AS2.0脚本代码可以控制测试进度以及给出测试结果和试题解析等。

4 结语

高校校级公共选修课具有课时少、内容多的特点，如果想要学生学到更多内容，最好使用翻转课堂的形式，并引入移动学习和碎片化学习。除了提供一些学习视频，设计一个基于STEAM 理念的课程自主学习系统是很好的选择。系统包括课程所有的内容体系和实践体系，还有几套简单的综合测试题，融入STEAM 理念，为学生提供了丰富的学习资料，同时构建了良好的学习情境，可以极大地调动学生自主学习的积极性，让学生在自主学习过程中掌握Flash 动画设计的原理、方法和技巧，培养学生的创新思想和创造能力。系统本身就是使用Flash CS6 软件设计出来的，基于真实项目，学生在使用过程中对于项目发开会有更好的体验。如果在系统中加入“动作脚本基础”、“动作脚本进阶”、“组件和模板”和“测试优化发布”等模块，就可以作为高校计算机系数字媒体等专业学生《Flash 动画设计》等相关Flash 专业课程的自主学习系统了。本系统提出的这种将STEAM 教学理念与高校工科课程相结合的方法，可以为同行进行该方面的教学改革和研究提供参考。