沈映珊

摘要：為增強一般民眾的網(wǎng)絡安全意識，該文提出利用FLASH技術和ACTIONSCRIPT3.0腳本語言，基于案例的網(wǎng)絡安全知識宣傳電子書的構想。以宣傳網(wǎng)絡安全知識為主題，對網(wǎng)絡安全案例以動畫的形式進行設計與實現(xiàn)的探究，將動畫嵌入到電子書中，使民眾在閱讀電子書的同時，能夠與電子書進行交互，通過生動有趣的動畫將枯燥的網(wǎng)絡安全知識展現(xiàn)出來，具備閱讀性和娛樂性。為網(wǎng)絡安全宣傳電子書的制作研究和科普應用打下基礎，具有一定的理論和應用價值。

關鍵詞：網(wǎng)絡安全；案例；宣傳；電子書；動畫

中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2018）18-0202-05

Design and Development of E-book for Network Security Knowledge with Dynamic Effect

SHEN Ying-shan

（School of Computer， South China Normal University， Guangzhou 510631， China）

Abstract： In order to enhance the public's awareness of network security， this paper proposes a concept of case based network security knowledge publicity e-book by using Flash and ACTIONSCRIPT3.0. In order to publicize the network security knowledge as the theme， the design and implementation of the network security cases in the form of animation are designed and realized， and the animation is embedded into the e-book to enable the people to interact with the electronic books while reading the e-books， to show the boring network security knowledge through vivid and interesting animations， which with readable and entertaining. It lays a solid foundation for the network security publicity of e-book production and popular science application， and has certain theoretical and applied value.

Key words： network scurity； case； propaganda； e-book； animation

1 研究背景與意義

1.1 研究背景

隨著我國互聯(lián)網(wǎng)的高速發(fā)展，網(wǎng)絡和信息技術已經(jīng)滲透到了社會的各個領域中。據(jù)《我國公眾網(wǎng)絡安全意識調查報告（2015）》顯示，青少年網(wǎng)絡安全基礎技能、網(wǎng)絡應用安全等意識亟待加強，老年人安全事件處理能力和法律法規(guī)了解程度急需提升。因此，急需加大力度普及推廣網(wǎng)絡安全意識教育，普及網(wǎng)絡安全知識和技能，提升全民網(wǎng)絡安全意識[1]。截至2017年12月，中國網(wǎng)民規(guī)模已達7.72億，互聯(lián)網(wǎng)普及率達55.8%[2]，互聯(lián)網(wǎng)已經(jīng)成為很多人工作生活中必不可分的部分。在如今的網(wǎng)絡信息時代，人們在享受互聯(lián)網(wǎng)各種便利的同時，信息安全問題卻頻繁發(fā)生，給個人和國家?guī)砹撕艽蟮慕?jīng)濟損失和安全威脅。

國際資深網(wǎng)絡安全專家詹姆斯·劉易斯在2014中國互聯(lián)網(wǎng)安全大會上說過“90%的成功網(wǎng)絡攻擊僅需要基本的技能，95%的攻擊通過簡單的修補就可以預防”。換而言之，市民可通過提高網(wǎng)絡信息安全意識，掌握防范技能是可以有效地防治絕大部分網(wǎng)絡入侵。

近年來，各種新式的病毒和信息詐騙手段層出不窮，安全防范難度增大，不過縱觀各種信息安全事件可知，很多人使用網(wǎng)絡和信息載體設備時缺乏基本必要的安全防范意識，才讓不法分子有機可乘，從而導致信息秘密泄露、經(jīng)濟財產(chǎn)損失等事件發(fā)生。營造一個安全良好的網(wǎng)絡環(huán)境刻不容緩，而提升廣大市民的網(wǎng)絡信息安全防范意識是預防各類信息安全事件的首要途徑，其重要性不言而喻。

利用FLASH技術和ACTIONSCRIPT3.0腳本語言制作網(wǎng)絡安全知識電子書，通過在電子書中嵌入動畫、案例相結合的形式進行網(wǎng)絡安全知識宣傳，克服了書籍、宣傳冊、海報等傳統(tǒng)物料宣傳單向輸送信息、傳播范圍有限等缺點，人們可以利用電腦、智能移動終端閱讀電子書的同時同，電子書進行交互，通過生動有趣的動畫將枯燥的網(wǎng)絡安全知識展現(xiàn)出來。這種方式，在快速生活節(jié)奏下能降低人們學習網(wǎng)絡安全知識的時間成本，同時也為電子書的傳播提供了廣大的平臺，傳閱速度快，有利于進行全民網(wǎng)絡安全教育。能夠讓民眾了解網(wǎng)絡安全存在的問題，掌握基本的網(wǎng)絡安全防護技能，增強網(wǎng)絡案例意識，從而共同構建網(wǎng)絡安全社會。

1.2 電子書設計的意義

電子書是一種比較新的傳播媒介，它具備傳播媒介的大部分優(yōu)點，制作成本較低，利用軟件繪制和腳本程序實現(xiàn)，不需要印刷，減少了樹木砍伐，保護環(huán)境。電子書內(nèi)容豐富，可以結合圖片、文字、視頻、音頻、網(wǎng)頁鏈接等，具有一定的交互性和趣味性。電子書傳播方式簡單、便捷，通過網(wǎng)絡，利用電腦或智能移動終端展示，可以實現(xiàn)指數(shù)級數(shù)量的傳播。但電子書也存在自己的缺點，目前可交互的電子書相對較少，大部分電子書仍然是純文字，缺少一點的趣味性。該文通過在電子書中嵌入動畫的形式，使不同年齡的民眾可以自主選擇是否播放動畫還是直接閱讀文字。在保持傳統(tǒng)閱讀習慣之外，能在書中通過動態(tài)效果，獲得虛擬現(xiàn)實的效果，從而給人們帶來不一樣的閱讀體驗。

2 電子書設計與制作

2.1 案例選擇

根據(jù)當前網(wǎng)絡生活中出現(xiàn)頻率較高的網(wǎng)絡安全問題，收集并整理了“信息安全”、“上網(wǎng)安全”“手機安全”“法律知識”等方面的四個案例作為電子書的主要內(nèi)容，每個案例都由動畫視頻案例、文字、圖片等內(nèi)容組成，如圖1所示。

2.2 設計原則

動畫的設計風格種類眾多，總的來說可以歸納為三類，夸張與變形類、寫實類與半寫實類、抽象與寫意類。如表1所示，每一種動畫設計都有其自身的特點，目前網(wǎng)絡上比較流行的是扁平化的風格，不管是在用戶界面設計還是動畫設計，都具有扁平化發(fā)展的趨勢。扁平化的核心概念是放棄一切裝飾效果，3D效果元素諸如漸變，紋理，透視等等都不采用。當扁平化以動畫形式表現(xiàn)出來時，將帶給人以更有趣味性的感受。

2.3 版式設計

版式設計是對信息元素進行有機的排列組合，對信息傳播的載體進行整合和加工，能將理性思維個性化表達出來，具有很高的美學價值和經(jīng)濟實用功能。版式設計滿足了信息傳播的需要，在傳播信息的同時帶給人們視覺上的美感和精神上的享受。

在電子宣傳書中，版式設計即確定書本的尺寸，日常生活中常接觸到的書本一般是豎版的，相比于橫版，豎版更便于攜帶和握持。而電子書里面嵌入了動畫，為了讓讀者能夠清晰地看到動畫，使動畫視頻在頁面里占據(jù)的面積盡可能大。本次設計將Flash舞臺的尺寸設置為1366*768像素，書本尺寸為600*500像素，翻開時的尺寸為1200*500像素，從而實現(xiàn)高達57%的屏占比。

2.4 色彩定位

整本書的色彩基調為藍色，藍色給人輕松愉悅的感覺，適合作為網(wǎng)絡安全知識手冊的主色調。因為宣傳網(wǎng)絡知識，需要具備科技感與安全性，書頁中輔助以綠色。使藍色和綠色相鄰，搭配在一起給人和諧、活潑的感覺，如圖2所示。書中所使用的顏色不多，目的是為了突出文字內(nèi)容和動畫內(nèi)容，避免對讀者閱讀過程中造成干擾。

2.5 人物制作

在網(wǎng)絡安全知識宣傳電子書中的視頻動畫是以現(xiàn)實生活的案例呈現(xiàn)為主，人物成為其中的主角。人物角色的形象與動作是作為獨立元件制作出來的，使用獨立元件，可以將人物主角分割成不同的組成部分，將各個部分作為同一個元件放在單獨的圖層上來實現(xiàn)，按照上下疊層關系排序，形成分層繪制。使用分層，其優(yōu)點中在繪制人物的不同的部分或改變動作時，可以鎖定其他圖層，而只對特定圖層上的內(nèi)容進行修改、調整而不影響其他圖層的內(nèi)容，方便后期動畫制作中人物動作的實現(xiàn)。每個角色被分割成：頭部（臉、頭發(fā)、眉眼、鼻、脖子、嘴），上身（手臂、上衣），下身（腿、鞋和腳）三個部分，一共12個圖層，每個小部位都會轉換成單獨的元件。

其次是對人物元件進行線條勾勒，如圖4所示，線條勾勒就像給的物搭架子一樣，從封閉式的線條可以將人物的細節(jié)部分進行仔細的描繪。然后在框架的各個部分填上顏色就順理成章了。根據(jù)劇情需要，如在“網(wǎng)上購物”這一動畫中主要角色會有四種形象的變化，分別是生活中的正常形象，想象自己穿上網(wǎng)購的裙子時的形象，現(xiàn)實生活中穿上網(wǎng)購裙子的形象，以及走路時側面的形象，如圖5所示?；诠蠢湛蚣艿幕A上，對不同形象的人物進行局部著色和整體上色，可以使人物呈現(xiàn)更多的變化，包括表現(xiàn)細節(jié)的變化和著裝的變化 ，但卻不會從根本上改變?nèi)宋锏幕拘蜗蟆?/p>

2.6 動畫設計

2.6.1 翻頁效果實現(xiàn)

為符合讀者的心理模型的需要，大部分的電子書都盡力保留現(xiàn)實生活中閱讀翻書的效果。心理模型是指一個人對某種事物概念的理解[3]，可描述和闡明一個心理過程或事件?？捎蓪嵨飿嫵苫蛴蓴?shù)學方程、圖表構成。在該設計中，為使電子書在使用過程中達到傳統(tǒng)書本的特點，需要設計逼真的翻頁效果。為克服電子翻頁效果存在的翻頁過程不順暢、鼠標拖曳翻頁、翻頁效果不夠逼真等問題，該設計在使用一般電子書的翻頁效果的基礎上，進行了技術上的改進。

假設一本電子書有n頁，如圖6所示，每次翻頁需要用到3頁，即當前頁①（n頁），當前頁的卷邊②部分，翻頁后要顯示的下一頁③（第n+1頁）。那就可以將電子書的一頁定義為三個層，當前頁面層為第一層（圖形AFEC），即讀者正在閱讀的、顯示書本內(nèi)容的頁面，隨鼠標拖拽時卷起的頁角為第二層（圖形ABCD），第三層是當頁角卷起時，露出的下一頁（圖形BDHG），三個層疊按順序疊放。

當頁面沒有翻頁時，即讀者正在閱讀當前頁，可以認為是進行了層遮罩，①頁進行了全覆蓋。當頁邊卷起時，就是進行去除層遮罩的過程，第一層顯示四邊形EDBF區(qū)域，第二層顯示ABCD區(qū)域，第三層顯示DHGB區(qū)域；設置第二層內(nèi)的顯示區(qū)域根據(jù)鼠標運動而不停變換傾斜的角度，即產(chǎn)生了旋轉，此時，旋轉邊需要始終保持與CA邊斜度一致的角度。

已知C點為鼠標的坐標，H、G、F、E為頁腳坐標，接下來是確定A、B、C、D點的坐標。如圖8所示，直線BD為點C和點H的中垂線，根據(jù)點C和點H坐標可以求出直線BD的函數(shù)表達式，再求出直線BD與直線FG的交點B的坐標、與直線EH的交點D的坐標。最后求出點G關于直線BD對稱點A的坐標，點H關于直線BD對稱點C的坐標，至此求得點A、B、C、D的坐標。

為避免翻頁過程因為鼠標的移動而超出書本范圍導致翻頁出錯，需要進一步約束C點的范圍，即翻頁的可控范圍。當鼠標在圖 9深色區(qū)域內(nèi)時，點C的坐標就等于鼠標坐標，當鼠標離開灰色區(qū)域時，點C必須停留在區(qū)域內(nèi)?；MK是以點J為圓心，JK為半徑的圓，弧LNK是以點I為圓心，KI為半徑的圓。

2.6.2 視頻播放效果設計

為了降低讀者的學習成本，按照讀者的日常使用播放器的習慣，電子書中的視頻播放方式使用主流播放器的控制方式：通過點擊視頻中間的播放按鈕與畫面來實現(xiàn)播放與暫停的效果，如圖10所示。視頻播放效果設計是利用動畫圖層的元件庫剪輯進行的。需要拷貝所有動畫圖層；然后新建一個飲片剪輯元件，命名為“video”；將拷貝的動畫圖層，復制進影片剪輯元件中，此時該元件就是一個視頻動畫，再將該元件復制到電子書的元件庫中。通過從元件庫中將“video”元件拖到舞臺電子書頁面合適的位置實現(xiàn)在電子書中某一頁面隨時播放相關內(nèi)容的動畫。這樣的動畫播放畫質清晰，并實現(xiàn)對動畫隨時控制。但缺是隨著動畫的增加，SWF文件的容量增大，需要另外設計播放控制組件。技術上可用ACTIONSCRIPT3.0語句實現(xiàn)：

this.stop（）； //一開始時動畫為暫停狀態(tài)

var bfbl：Number = -1； //設置參數(shù)記錄當前視頻的狀態(tài)

nbt.addEventListener（MouseEvent.CLICK， fl_MouseClickHandler）； //為btn元件添加鼠標單擊偵聽器

function fl_MouseClickHandler（event：MouseEvent）：void

{ if （this.bfbl == 1） //視頻當前狀態(tài)為播放

{

this.stop（）； //停止播放

this.bfbl=bfbl*（-1）；

nbt.alpha=1； //顯示btn圖標

}

Else //視頻當前狀態(tài)為暫停

{

this.play（）； //繼續(xù)播放

this.bfbl=bfbl*（-1）；

nbt.alpha=0； //隱藏btn圖標

}

3 電子書效果實現(xiàn)與總結

3.1 效果測試

經(jīng)過在不同的電腦上與智能移動終端上測試，電子書能正常運行，圖片文字清晰，動畫播放順暢，音效能正常播放，動畫播放控制功能正常，翻頁效果正常。

<

3.2設計總結

該文通過介紹扁平化動畫制作的技巧，利用遮罩動畫、引導動畫、位移動畫、人物動畫、鏡頭動畫等呈現(xiàn)網(wǎng)絡安全知識的案例動畫與故事設計。通過ACTIONSCRIPT3.0腳本語言將實現(xiàn)電子書。從整書的運行過程來看，動畫播放平滑、可按。內(nèi)容清晰，層次分明。具備閱讀性和娛樂性。

電子書中雖然增加了動畫視頻的播放，但本質仍然是以呈現(xiàn)文字為主。因此在電子書的設計上還可以進一步優(yōu)化，讓讀者獲得更好的閱讀體驗，比如可以增加讓讀者自動調整字體大小的功能，這樣用戶在觀看時可以根據(jù)需要調整字體的，獲得更清晰的效果，滿足個性化的需求。

通過網(wǎng)絡安全知識電子書的設計、實現(xiàn)和運行，廣大市民能夠學習到更多的網(wǎng)絡信息安全知識，樹立正確的安全防范意識，同時自發(fā)自覺地影響身邊的親朋好友，達到全民普及的目標；通過觀看與閱讀電子書，民眾將主動探究信息安全的相關知識，激發(fā)學習熱情，思考不同行為所帶來的后果，增強判斷能力，養(yǎng)成良好的信息使用習慣，進而能夠靈活應對各種信息安全狀況的發(fā)生；民眾將學習到的安全防范方法落實到實際的工作生活中，形成良好的安全防范社會風氣。

參考文獻：

[1] 中國互聯(lián)網(wǎng)絡信息中心（CNNIC）. 我國公眾網(wǎng)絡安全意識調查報告（2015）[EB/OL]. http：//www.cac.gov.cn/2015-06/01/c_1115476638.htm.

[2] 中國互聯(lián)網(wǎng)絡信息中心（CNNIC）. 第41次中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告[EB/OL]. http：//www.cac.gov.cn/2018-01/31/c_1122346138.htm.

[3] 林崇德. 心理學大辭典（下卷）[M]. 上海： 上海教育出版社， 2003.