具有動(dòng)態(tài)效果的網(wǎng)絡(luò)安全知識(shí)宣傳電子書(shū)的設(shè)計(jì)與制作

沈映珊

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

關(guān)鍵詞：網(wǎng)絡(luò)安全；案例；宣傳；電子書(shū)；動(dòng)畫(huà)

中圖分類(lèi)號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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 研究背景

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

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

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

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

1.2 電子書(shū)設(shè)計(jì)的意義

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

2 電子書(shū)設(shè)計(jì)與制作

2.1 案例選擇

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

2.2 設(shè)計(jì)原則

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

2.3 版式設(shè)計(jì)

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

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

2.4 色彩定位

整本書(shū)的色彩基調(diào)為藍(lán)色，藍(lán)色給人輕松愉悅的感覺(jué)，適合作為網(wǎng)絡(luò)安全知識(shí)手冊(cè)的主色調(diào)。因?yàn)樾麄骶W(wǎng)絡(luò)知識(shí)，需要具備科技感與安全性，書(shū)頁(yè)中輔助以綠色。使藍(lán)色和綠色相鄰，搭配在一起給人和諧、活潑的感覺(jué)，如圖2所示。書(shū)中所使用的顏色不多，目的是為了突出文字內(nèi)容和動(dòng)畫(huà)內(nèi)容，避免對(duì)讀者閱讀過(guò)程中造成干擾。

2.5 人物制作

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

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

2.6 動(dòng)畫(huà)設(shè)計(jì)

2.6.1 翻頁(yè)效果實(shí)現(xiàn)

為符合讀者的心理模型的需要，大部分的電子書(shū)都盡力保留現(xiàn)實(shí)生活中閱讀翻書(shū)的效果。心理模型是指一個(gè)人對(duì)某種事物概念的理解[3]，可描述和闡明一個(gè)心理過(guò)程或事件。可由實(shí)物構(gòu)成或由數(shù)學(xué)方程、圖表構(gòu)成。在該設(shè)計(jì)中，為使電子書(shū)在使用過(guò)程中達(dá)到傳統(tǒng)書(shū)本的特點(diǎn)，需要設(shè)計(jì)逼真的翻頁(yè)效果。為克服電子翻頁(yè)效果存在的翻頁(yè)過(guò)程不順暢、鼠標(biāo)拖曳翻頁(yè)、翻頁(yè)效果不夠逼真等問(wèn)題，該設(shè)計(jì)在使用一般電子書(shū)的翻頁(yè)效果的基礎(chǔ)上，進(jìn)行了技術(shù)上的改進(jìn)。

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

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

已知C點(diǎn)為鼠標(biāo)的坐標(biāo)，H、G、F、E為頁(yè)腳坐標(biāo)，接下來(lái)是確定A、B、C、D點(diǎn)的坐標(biāo)。如圖8所示，直線BD為點(diǎn)C和點(diǎn)H的中垂線，根據(jù)點(diǎn)C和點(diǎn)H坐標(biāo)可以求出直線BD的函數(shù)表達(dá)式，再求出直線BD與直線FG的交點(diǎn)B的坐標(biāo)、與直線EH的交點(diǎn)D的坐標(biāo)。最后求出點(diǎn)G關(guān)于直線BD對(duì)稱(chēng)點(diǎn)A的坐標(biāo)，點(diǎn)H關(guān)于直線BD對(duì)稱(chēng)點(diǎn)C的坐標(biāo)，至此求得點(diǎn)A、B、C、D的坐標(biāo)。

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

2.6.2 視頻播放效果設(shè)計(jì)

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

this.stop（）； //一開(kāi)始時(shí)動(dòng)畫(huà)為暫停狀態(tài)

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

nbt.addEventListener（MouseEvent.CLICK， fl_MouseClickHandler）； //為btn元件添加鼠標(biāo)單擊偵聽(tīng)器

function fl_MouseClickHandler（event：MouseEvent）：void

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

{

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

this.bfbl=bfbl*（-1）；

nbt.alpha=1； //顯示btn圖標(biāo)

}

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

{

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

this.bfbl=bfbl*（-1）；

nbt.alpha=0； //隱藏btn圖標(biāo)

}

3 電子書(shū)效果實(shí)現(xiàn)與總結(jié)

3.1 效果測(cè)試

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

<

3.2設(shè)計(jì)總結(jié)

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

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

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

參考文獻(xiàn)：

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

[2] 中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）. 第41次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[EB/OL]. http：//www.cac.gov.cn/2018-01/31/c_1122346138.htm.

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