基于微课学习的Flash动画作品展示平台的设计与实现

李向群，张鹏程，刘伯龙

（1.中国矿业大学计算机科学与技术学院，徐州221116；2.中国矿业大学化工学院，徐州221116）

基于微课学习的Flash动画作品展示平台的设计与实现

李向群1，张鹏程2，刘伯龙1

（1.中国矿业大学计算机科学与技术学院，徐州221116；2.中国矿业大学化工学院，徐州221116）

《大学计算机基础》是非计算机专业学生的一门必修课，Flash动画制作是其中的重要内容，其内容的实践性与综合性较强，单纯依靠传统的课堂教学已经无法满足学生们对知识的需求。分析并探讨Flash动画作品展示平台的设计思路，采用WebStorm作为开发工具实现学习平台的设计。实践证明，建立一个基于微课学习的Flash动画作品展示平台，可以提高学生自主学习的积极性并有效促进课程教学方法的改进和教学活动的创新。

微课；Flash动画；作品展示平台；WebStorm

0 引言

《大学计算机基础》是我校为非计算机专业开设的计算机基础教育必修课，学时32学时理论课+40学时上机实践课。《大学计算机基础》早在1998年以前就已经在我校的各个学院开设，2005年开始在全校实施分级教学，艺术体育类是其中一个教学层次。针对艺术生和体育生的专业特长和就业前景，教学大纲中安排了Flash动画制作这部分内容，学时分配占整个课程的1/4之多。Flash动画制作是一门灵活性、实践性、综合设计性很强的课程，给学生创新能力的培养提供了非常好的拓展空间。因此，单纯依靠传统的课堂教学已经无法满足学生们对设计内容学习的需求。

2011 年，“微课”的概念在国内首次被提出[1]。微课的显著特点如时间短、容量小、主题突出、内容精细、学习不受时间和空间的限制、更利于主动学习等备受当代学生们的青睐[2]。2012年、2013年微课也逐渐成为以胡铁生、焦建利教授等为代表的教育学者们关注的焦点，焦建利教授认为：“微课是为教学和学习模式创新而生的，教学模式创新是根本。在线教学、混合学习和翻转课堂之类创新的教学模式，才能真正推进以‘学习者为中心’的教学理念发展，才能稳步提升教学质量。”。因此，开发以微课学习为基础的网络学习平台既是计算机基础教育教学改革的一种趋势，又是以“学生”为主体的教学模式与“微时代”特色相结合的教学改革的必然。

目前，我校大学计算机基础系列课程中还没有一个完善的关于Flash动画制作课程的微课学习平台。而学生要想学好Flash动画，既要学习基本知识，又要学会鼠绘，还要学习脚本语言，在有限的学时内，要想让学生掌握Flash动画制作技能并做出自己的Flash动画作品，对于学生来讲是有难度的。建立一个基于微课学习的Flash动画作品展示与学生自学平台是我校学生自主学习的切身需求。

1 动画作品展示平台的设计思路

学习平台的设计内容主要分为以下六个功能模块：微课学习、作品欣赏、作业互评、作品上传、资源下载和教师后台管理模块。

（1）微课学习模块。微课是以阐释某一知识点为目标，以短小精悍的在线视频为表现形式，以学习或教学应用为目的的在线视频教学[3]。该模块中包含大量的Flash小动画的教学视频，时间大多控制在5-10分钟，将经典的动画制作技巧融合在不同的动画作品中，主题突出，内容精细。微课的录制采用了录屏软件，除了演示在Flash环境下的操作过程，还有教师的步骤讲解。微课学习的操作画面和声音同步，让学习者利用网络平台可以收获实时课堂的学习效果。在学习微课的同时，平台中有当前动画制作的详细文档，学习者可以按照其中的步骤逐一实践。

（2）作品欣赏模块。该模块又分为三部分内容，分别是获奖作品欣赏、历年学生优秀作业作品欣赏和分类作品欣赏。获奖作品指的是在我校每年举办的计算机文化节-动漫作品大赛中获奖的作品，作品的来源已不再局限于艺术学院和体育学院的学生，而是来自全校学生的共同参与，作品的主题广泛如环境保护、我的祖国、爱与奉献等。历年学生作业作品是指教师每年给上课的学生布置不同主题的Flash作业，如翻译小助手、旋转的文字变幻、诗朗诵、探照灯、一分钟Flash MV、睡前小故事等，教师筛选其中优秀的作品上传到学习平台中供大家欣赏。分类作品指的是将学生的作品按照Flash动画制作的技巧分成四类，分别是逐帧动画、传统补间、补间动画和补间形状，这四大类涵盖了Flash动画制作的基本技巧，也是学生们在学习过程中必须要熟练掌握的内容。

（3）作业互评模块。作业互评的前提是教师已经将学生提交的动画作品初步筛选并上传到平台上，要求学生们根据教师提供的评分标准对作品进行打分评价，得分在一定标准之上的标记为优秀作品并成为平台中的“作品欣赏”作品。

（4）作品上传模块。作品上传是教师专属权限，学生不能直接上传自己的作品，但学生可以向教师提出上传的申请，当教师审核通过了学生作品之后，学生可将作品的详细信息如作者、作品名称、作品意义以及作品等内容在页面提交，作品文件必须符合标准的提交格式，教师在后台管理模块再次审核作品提交信息后才能完成作品的上传。

（5）资源下载模块。可以下载的资源包括教学大纲、学时安排与上课进度、电子课件、Flash CS6的安装软件、音乐裁剪软件、视频和音频格式转换软件、动画元件素材、动画制作技巧文章等内容，学生可以在学习过程中下载这些重要的资源。

（6）教师后台管理模块。教师的后台管理可以实现的操作是：作品查询、作品的审核与上传、作品下架、学生管理与教师管理。作品查询可以实现多条件查询，如作品名称、作者、发布时间、点击量等。作品的审核与上传是学生按照规定的文档格式上传作品信息及作品之后，教师在后台审核信息的真实性和作品的品质，确定无误后点击上传，学生在前台页面就可以欣赏到最新的优秀作品。作品下架是指随着优秀作品的不断积累，将一些内容缺乏新意或者不属于当前教学大纲内容的作品从前台网页中取消浏览的链接，但下架并不是删除，学生在前台看不到下架的作品，但服务器上仍然保存了该作品。学生管理主要是实现将当前教学班的学生加入合法浏览用户名单，默认学生的学号为登录号，密码也与学号相同。同时，也可以添加、查询、删除学生。教师管理的对象分为普通任课教师和管理员两种，可以添加与删除教师，也可以将教师权限升级为管理员权限，以实现作品的上传和下架。

2 动画作品展示平台的实现

基于微课学习的Flash动画作品展示平台，依托于中国矿业大学服务器云，利用学校的云计算资源为教学服务。系统内嵌FTP服务器，管理员可以方便有效地上传分享文件，Flash素材、制作工具、优秀作品等都可以通过访问网站素材下载板块进行下载。系统采用B/S设计模式，这使得系统具有跨平台展示的能力，Linux，Windows，Mac OS等系统，借助浏览器均能获得统一的展示。同时平台拥有高效的扩展性，管理员仅仅需要在服务器上对系统进行升级，客户端便可以获得最新应用。系统设计工具采用的是WebStorm，WebStorm具有优秀的代码提示功能与代码跟踪功能[4]，与Google浏览器搭配方便开发人员进行调试。页面采用HTML5+ CSS3美化，借助HTML5的语义化标签，编写易于理解的代码如定义header、main和footer分别代表页眉，正文，页脚；借助CSS3可以编写出优美的过渡效果，文字阴影，悬浮特效。图片的加载全部采用AJAX异步获取，并进行事件回调处理，完美解决传统加载方式遇到图片获取失败时影响网页整体布局与美观度的问题，同时可以对图片显示效果进行处理如飞入与飞出、百叶窗、旋转放大等特效；对于CSS、JS等静态资源的加载采用CDN云加速技术，多站点响应，可靠性高，就近获取等优点，大大提高网站健康程度与用户体验。

该系统将教学资源分为可视化资源与非可视化资源，可视化资源如SWF格式的动画、微课视频、动画制作步骤文档等，借助HTML丰富的排版能力对其进行美化，使用后可以直接在浏览器中浏览。可视化资源主要用来辅助课堂教学，帮助学生课下的自主学习；对于非可视化资源如可下载的Flash安装软件、动画素材、电子课件等，借助FTP服务对用户开放下载。这些非可视化的资源主要用于课程的教学实践，学生在实验课环节将课堂内容结合多样化的素材，再根据教师的作业安排设计出具有创造力的动画作品。

3 微课学习平台的实现

微课学习平台基于响应式布局框架，利用新一代浏览器媒体查询API对用户的设备尺寸进行查询，然后将显示系统分为大型（PC端，大于960px），中型（平板，大于760px），小型（手机，小于760px），这些数据来自于Twitter对用户数据进行分析得到的最佳实践。该框架的优势在于只需要编写一套显示系统，而其他显示系统将由程序自动生成。同时该平台利用客户端与服务器协同开发模式，打破了浏览器仅仅用来显示网页的传统观念。双端MVC的设计理念使得程序的设计向客户端倾斜，对于数据密集型的功能在考虑安全性的同时，由客户端承担数据的获取、数据的处理、模板的生成、视图的生成、视图的展示等，充分利用用户富裕的计算资源，分担服务器的计算压力，由于缩减了数据来回传递的次数，使得响应速度大大提高。

微课学习平台同时将优秀作品的制作步骤以文档的形式展示出来，为学生边学习边实践提供了有效的视频和文档指导。教师在每个主题的微课视频最后发布本次主题的设计任务，让学生提前预习，作品完成后提交至系统后台，由管理员统一审核与发布。学生可以在同类作品的对比中发现作品的优势与不足，取长补短，由此来提高学生的整体设计水平。

4 结语

基于微课学习的Flash动画作品展示平台结合当前网络资源丰富、手机智能化和普及化的时代特点，极大的激发了学生自主学习的积极性，促进了非计算机专业的《大学计算机基础》课程教学方法的改进和教学活动的创新，让学生在实践中验证理论的有效性，使抽象的理论内容内涵深化、外延扩展[5]。与此同时，我校每年都会组织大学生计算机文化节等计算机应用技能的比赛，其中，动画制作便是其中的一项。同时，江苏省以及全国也都会开展相应的动画作品大赛。因此，建立基于微课学习的动画作品展示平台，可以鼓励更多对动画制作有兴趣并且有特长的优秀学生上传自己的作品，这既是为参加校级、省级、全国动漫大赛进行的作品储备，又是学生们之间在数字网络平台互相交流和学习的途径。

[1]胡铁生.“微课”：区域教育信息资源发展的新趋势[J].中国电化教育,2011(10):61-65.

[2]胡铁生,周晓清.高校微课建设的现状分析与发展对策研究[J].现代教育技术,2014(2):5-13.

[3]焦建利.微课与翻转课堂中的学习活动设计[J].中国教育信息化,2014(24):4-6.

[4]百度百科

[5]王赋腾,孙晓荣,刘翠玲.示范课程网站与微课学习平台的设计与实现[J].教育教学论坛,2016(12):237-238.

[6]季益龙,张闪闪,赵俞凌.基于微课程的自主学习系统设计与实现[J].国教育信息化,2015(21):88-91.

Design and Im p lementation of Flash Anim ation Works Exhibition Platform Based on M icro-Course Learning

LIXiang-qun1，ZHANG Peng-cheng2，LIU Bai-long1

（1.Department of Computer Science,China University of Mining and Technology,Xuzhou 221116；2.School of Chem ical Engineering,China University of Mining and Technology,Xuzhou 221116）

University Computer Basis course is required for non-computer majors,Flash animation design is one of the important content full of practical and comprehensive,relies only on traditional classroom teaching has been unable tomeet the students'demand for knowledge. With the arrival of the era ofm icro,the micro-course become the mainstream channels of students'autonomous learning,analyzes the idea of design the Flash animation display platform,usesWebStorm as a tool to realize the design of E-learning platform.Practice has proved that the establishment of amicro-course learning based Flash animation display platform,can improve students'autonomous learning initiative and effective promotion of curriculum teachingmethods and innovation of teaching activities.

Micro-Course;Flash Animation;Works Exhibition Platform;WebStorm

1007-1423（2017）03-0022-04

10.3969/j.issn.1007-1423.2017.03.006

李向群（1973-），女，山东省济南人，博士，副教授，研究方向为计算机应用

2016-11-29

2017-01-15

中国矿业大学课程建设与教学改革项目（No.2015JC02）

张鹏程（1996-），男，江苏徐州人，在读本科，研究方向为Web应用

刘佰龙（1983-），男，江苏徐州人，博士，讲师，研究方向为智能机器人