基于数字化故事叙述的 防欺凌教育软件设计
梁勇杰 顾汉杰 胡峰俊
摘要：校园欺凌成为社会关注的热点，如何有效开展防欺凌主题教育成为当下校园安全的重要工作。本项目基于上述背景，设计开发了一款防欺凌教育软件，作者从前期规划、模块设计、程序开发等方面阐述了软件开发流程，并重点描述了如何应用数字化故事叙述技巧表述案例与融入知识，以及如何应用开发工具Animate CC制作软件模块。
关键词：数字化故事叙述;防欺凌;Animate CC
中图分类号：G434? 文献标识码：A? 论文编号：1674-2117（2020）05/06-0148-03
● 引言
校园欺凌是一个备受关注的社会现象。中小学生由于心智尚未成熟，控制力较弱，在面对欺凌时往往无所适从且不懂表达，教师与家长对该问题的忽视，也极易造成对孩子的二次伤害。当前市场上针对中小学生的防欺凌主题教育产品较少，已有的产品也较为严肃难以激发使用者的学习兴趣，基于上述背景，本研究计划采用Animate设计了一款适用于中小学生的防欺凌教育软件。
● 前期规划
1.开发工具选择
由于Flash插件带来了各种安全问题以及其不稳定性，Flash逐渐被淘汰，2016年Adobe公司将旗下动画制作软件Flash Professional升级为Animate CC。Animate CC可以兼容输出Android、iOS、Windows、HTML5等平台版本，在原有动画优势基础上更好地实现各种动画特效和人机交互功能，较为适合中小型多媒体软件的设计开发。[1]因此，笔者将Animate CC作为本项目的开发工具。
2.用户分析
考虑到中小学生好新、好动、好学等心理特征，在软件的开发中需要考量如何满足用户的个性需求。在界面设计方面，应考量增加画面色彩的鲜艳度、音乐的刺激频度等，提升其专注力;在交互操作方面，考量增加游戏操作环节，满足其活泼好动、喜爱游乐的特性;在教学设计方面，考量增加反馈信息，提升其学习自信，鼓励其提升学习参与度。
3.模块设计
（1）软件结构
软件的教学内容来源参考江西高校出版社的“大声说不—防霸凌系列图书”，以语言暴力、身体暴力、社交欺凌为设计依据，将整个软件划分为言语篇、肢体篇、社交篇等三个案例模块以及回顾篇、练习篇等两个辅助模块。
言语篇主要定位语言暴力，肢体篇主要定位语言暴力，社交篇主要定位社交欺凌，其教学内容为校园欺凌的主要事件类型，在这三个模块中均设计针对性的案例。[2]
（2）案例模块设计
本项目在言语篇、肢体篇、社交篇三个案例模块中应用数字化故事叙述的技巧进行设计。这样设计一方面方便引入数字化媒体，提升知识的传播效果，有助于激发学习兴趣;另一方面可使案例表述更为轻松，有助于缓减欺凌题材所带来的心理压抑感，保持学习动力。
在本项目中，所有案例模块统一设计了拟人化的虚拟角色小兔子作为故事的讲述者，以第三者的角度进行表述，学生可通过小兔子的视角体验各个不同的故事案例，学习防欺凌的知识内容。
在“言语篇”，设计有“另一个名字”和“吃不到的蛋糕”两个故事，分别叙述如何正确对待转校生熊浣浣的称呼，以及如何正确对待转校生熊浣浣被高年级学习者恐吓威胁的剧情，上述故事均融入了关于语言暴力的知识内容。
在“肢体篇”，设计有“被抢的玩具熊”和“好心的路人”两个故事，分别叙述如何正确对待小猴的玩具被鳄鱼同学抢走，以及如何正确对待转校生熊浣浣在校外被威胁抢劫的剧情，融入了关于肢体暴力的知识内容。
在“社交篇”，设计有“消失的花瓶”和“动物运动会”两个故事，分别叙述如何避免主观臆测、胡乱冤枉小象，以及关心被孤立同学小企鹅的剧情，融入了关于社交欺凌的知识内容。上述三个案例模块、六个故事的设计，对学习主题的导入起到了较好的推动作用，以拟人化的角色故事、明喻的表达手段帮助学生构建如何认知欺凌问题。
以“消失的花瓶”为例，故事为通过图书馆里的花瓶被打碎为楔子，载入找出“凶手”的悬疑剧情，小象因为淘气被怀疑，用户以小侦探的视角与心理定位观察场景内的细节和实时反馈提示逐步找到“肇事者”，成功“破案”，还小象以清白。
（3）辅助模块设计
为巩固学习效果，本项目设计了针对性的辅助模块，分别为“回顾篇”与“练习篇”。回顾篇主要采用回放关键情节缩影的形式，帮助学生厘清对待不同情形的欺凌现象的思路与方法。练习篇主要设计了与欺凌相关的练习题，通过填空、选择、判断等常规答題操作检验学习效果，给予学习者及时反馈。
● 程序开发
1.素材制作
本项目采用Photoshop CC进行位图的调色与绘制，采用Illustrator CC进行矢量图形的绘制与输出。例如，对一些特殊的文字或者图片处理时，就需要使用Photoshop进行绘制和调整。在处理小兔子、小浣熊、鳄鱼等角色图片时，则需要对图片进行抠图或调色等处理，以使得素材更加适合本软件。其中，使用率较高的抠图操作采用魔棒或套索工具实现，通过改变图片色调、饱和度等设置完成对颜色的恰当调整。
音频的设计使用Audition处理音频文件，对音轨进行剪辑以及混音、音量的调整，涉及的主要类型为背景音乐以及配音。其中，配音的来源采用铁三角专业话筒进行录制，输出为128K码率的MP3格式文件导入资源库。
2.动画制作
在Animate CC平台中，动画是其最强大的功能，诸如补间动画、遮罩动画、骨骼动画等。在使用数字化故事叙述技巧营造故事氛围时，配套的动画必不可少，有助于提升多媒体的立体效果。在动画制作技巧方面，角色平移等位移动画使用补间动画完成，在本项目中诸如云朵、太阳、对话框等物体的位移均通过补间动画实现。对于一些需要沿着特殊轨迹运动的动画，如小鸟飞翔的动画，则需要为其添加一层“引导层”，按设计意图制作出不规则的曲线层。场景之间的过渡效果和文字的逐渐显示效果由遮罩动画设计完成，以此实现多图层特定对象显示的复杂效果。对小兔子等故事角色，其跳跃、奔跑等多关节运动使用骨骼动画来制作，应用到了物理引擎的反向运动学，采用骨骼工具绑定骨骼与角色元件，通过加载姿势帧形成复杂的运动动画。
3.UI设计
开始界面遵循美观大方原则，内容友好，吸引眼球。主界面色调以淡蓝色为底色，呈现一种清爽的视觉感受。界面切换按钮以淡红色为底色，图标为白色。其余如提示框、对话框、模块图标均遵循扁平化和简洁的原则。UI的色彩搭配是设计构建的基础之一，色彩对人的视觉感受起着至关重要的作用，因此本软件的整体配色面向用户对象的认知特征，设计鲜艳的色彩以更好地吸引其注意力，可更有效地保持其学习兴趣。[3]
4.脚本编写
在软件中实现交互功能必须进行程序脚本的编写，本项目应用了Animate CC中ActionScript3.0脚本语言，其可以兼容AIR组件输出PC、移动平台的版本，通用性较强。本软件中通过脚本实现的功能主要有通过点击按键跳转页面、背景音乐和小动物语音的播放、图片或提示框的现实与隐藏、小游戏的实现逻辑等功能。在编程实现方面，使用率较高的对象有gotoAndPlay（）函数、Sound类、SharedObject类等。gotoAndPlay（）主要负责处理各个页面模块之间的跳转，涉及各动画的串联、场景的运行。Sound类负责处理各场景的背景音乐，以及角色配音的调用，涉及各个故事的数字化叙述。SharedObject类作为本地共享对象，负责处理学习数据的记录，涉及知识的练习与巩固。
● 测试发布
测试是软件开发过程中必不可少的一道工序，需要对软件进行全方位的评估。依据Animate CC平台特点，重点测试页面跳转、音效播放、物体拖拽错误等容易出现的BUG。对于页面跳转等问题，通过修正代码解决相应的BUG;对于信息提示不够明显的问题，通过在点击区域增加箭头以及虚线边框的特效，提升视角焦点方式解决;关于音量的问题，根据实际的效果重新编辑音频文件的音量大小，重新导入解决。
软件PC端的发布，通过在发布选项中勾选“Win放映文件”即可。软件Android端的发布，需要事先设置应用程序路径、比例显示方向、渲染模式、处理器类型、应用权限、图标尺寸路径，以及创建签名证书等步骤，再选择AIR For Android进行打包发布。
● 结语
当今社会，及时对年龄较低的学生进行防欺凌教育显得至关重要。而将“欺凌”这一社会现象通过多媒体软件的形式展现给学生无疑是一种合理的教学方式。基于数字化故事叙述的设计理念，既可以较好地应用Animate CC平台的工具优势，又可以提升学生的学习效率，加深其认知印象，对同类多媒体应用也起到一定的设计示范作用。
参考文献：
[1]ussell，Chun. Adobe Animate CC 2017中文版經典教程[M].北京：人民邮电出版社，2017：202-231，236-245.
[2]张冬梅.大声说不[M].南昌：江西高校出版社，2018：2-10.
[3]Alan cooper. About Face 4：交互设计精髓[M].北京：电子工业出版社，2015：60-72.
作者简介：梁勇杰（1996—），男，浙江树人大学信息科技学院在读本科生;顾汉杰（1981—），男，讲师，硕士，主要研究方向为数字媒体应用;胡峰俊（1980—），男，教授，博士，主要研究方向为人工智能。
基金项目：浙江省高等教育“十三五”第一批教学改革研究项目“基于新工科理念的数媒专业双创型人才培养模式研究（jg20180268）”;浙江树人大学2018年度校立优秀应用型课程“数字媒体设计案例”。
