基于數字化故事敘述的 防欺凌教育軟件設計

梁勇杰 顧漢杰 胡峰俊

摘要：校園欺凌成為社會關注的熱點，如何有效開展防欺凌主題教育成為當下校園安全的重要工作。本項目基于上述背景，設計開發了一款防欺凌教育軟件，作者從前期規劃、模塊設計、程序開發等方面闡述了軟件開發流程，并重點描述了如何應用數字化故事敘述技巧表述案例與融入知識，以及如何應用開發工具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進行打包發布。

● 結語

當今社會，及時對年齡較低的學生進行防欺凌教育顯得至關重要。而將“欺凌”這一社會現象通過多媒體軟件的形式展現給學生無疑是一種合理的教學方式?；跀底只适聰⑹龅脑O計理念，既可以較好地應用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—），男，講師，碩士，主要研究方向為數字媒體應用;胡峰?。?980—），男，教授，博士，主要研究方向為人工智能。

基金項目：浙江省高等教育“十三五”第一批教學改革研究項目“基于新工科理念的數媒專業雙創型人才培養模式研究（jg20180268）”;浙江樹人大學2018年度校立優秀應用型課程“數字媒體設計案例”。