基于ZMaker和Flash的服裝美學(xué)交互型電子雜志設(shè)計

曲大為，張曉君，丁雪梅，李東哲

(1.吉林大學(xué)教育技術(shù)中心，吉林長春130012；2.吉林大學(xué)動物科學(xué)學(xué)院，吉林長春130061)

1 制作背景

隨著生活水平的不斷提高，人們對衣著的要求越來越高，希望服裝不僅能蔽體御寒，更要賞心悅目，服裝美學(xué)這一學(xué)科應(yīng)運(yùn)而生。服裝美學(xué)是一門交叉型課程，直接關(guān)系到服裝的材料運(yùn)用、色調(diào)搭配和造型等[1]。對服裝元素和色彩的運(yùn)用、對形式美的把握等是廣大服裝設(shè)計者的必備知識；對服裝及配飾美的詮釋、對美感與心理的理解等不僅對設(shè)計者至關(guān)重要，對著裝者也同等重要。

在日常學(xué)習(xí)過程中，學(xué)生常通過書本或雜志學(xué)習(xí)相關(guān)知識。書本無法充分對服裝中的美進(jìn)行表達(dá)，而雜志又存在知識不系統(tǒng)、交互性不強(qiáng)的問題。基于上述原因，制作知識內(nèi)容全面并且交互性能良好的電子雜志是解決學(xué)生學(xué)習(xí)資料不足問題的有效手段。

2 軟件選擇

一般來說，專業(yè)設(shè)計人員多采用Flash進(jìn)行設(shè)計制作。Flash具有完善的動畫及交互設(shè)計功能，能夠保證制作出來的電子雜志吸引學(xué)生的眼球。然而，完全采用這種軟件，制作過程相對會較復(fù)雜?？梢赃x擇以全民制作雜志為目的的電子雜志制作軟件作為電子雜志的主體制作工具，以簡化制作步驟。ZMaker是一款較專業(yè)的電子雜志編輯軟件，有現(xiàn)成的模板可供選用[2]，菜單工具簡單，能夠發(fā)布在線版和單機(jī)版兩種類型電子雜志[3]，功能較全面。

為使生成的電子雜志交互性更強(qiáng)，可以用Flash軟件制作必要的內(nèi)容頁面。動畫的完美呈現(xiàn)和代碼的精準(zhǔn)控制會使雜志更具人性化。Flash制作的swf文件體積較小，下載速度快，適于網(wǎng)絡(luò)傳播[4]，其內(nèi)置的Action語言也能夠被Zmaker解析。所以，將Zmaker與Flash相配合使用，是制作服裝美學(xué)交互型電子雜志首選的設(shè)計方式。

3 電子雜志的功能設(shè)計

服裝美學(xué)是美學(xué)的一個分支。在制作交互型電子雜志過程中既要將美的元素蘊(yùn)含在軟件界面中，通過適當(dāng)?shù)慕换ピO(shè)計及多媒體表達(dá)等方式使知識更易于理解；又要設(shè)計利于學(xué)習(xí)者學(xué)習(xí)的相關(guān)輔助功能，如載入界面、目錄等提示、導(dǎo)航功能。圖1為電子雜志的功能設(shè)計圖，每個功能都為學(xué)習(xí)者的學(xué)習(xí)提供了必要的支持。

圖1電子雜志功能設(shè)計圖

4 電子雜志的技術(shù)實現(xiàn)

4.1 內(nèi)容呈現(xiàn)功能的實現(xiàn)

內(nèi)容呈現(xiàn)設(shè)計是電子雜志設(shè)計的重要部分，主要包含界面美化設(shè)計、內(nèi)容交互設(shè)計和音視頻嵌入設(shè)計三個部分。

4.1.1 界面美化設(shè)計

界面美化設(shè)計可以提高學(xué)習(xí)者的學(xué)習(xí)興趣，使學(xué)習(xí)者有進(jìn)一步學(xué)習(xí)的欲望。Zmaker是一款靈活性很強(qiáng)的軟件，既為廣大非專業(yè)設(shè)計人員提供了豐富多彩的模板，又允許專業(yè)設(shè)計者自主利用Flash進(jìn)行美工設(shè)計。

Zmaker主頁里提供了許多適用于各種情況的模板，如一圖模板、二圖模板、三圖模板以及文章類模板、目錄模板、封面封底模板。用戶可以根據(jù)需呈現(xiàn)內(nèi)容的具體情況選擇合適的模板，減少后期美工設(shè)計的工作量。

Flash的邊緣掃光效果、局部模糊效果等也是有效的美化設(shè)計方式。服裝美學(xué)的電子雜志所涉及的圖片案例較多，適當(dāng)使用特效會使學(xué)習(xí)者更加明確文字所指，提高學(xué)習(xí)效率。

4.1.2 內(nèi)容交互設(shè)計

服裝美學(xué)的知識點(diǎn)往往需要若干張圖片來表達(dá)。為了讓學(xué)習(xí)者能夠自由地切換圖片，電子雜志的頁內(nèi)要進(jìn)行必要的交互式設(shè)計，以滿足學(xué)習(xí)者反復(fù)溫習(xí)的需求。

頁內(nèi)交互需要在Flash中實現(xiàn)?？梢詫⒅R點(diǎn)制作成單獨(dú)的Flash，學(xué)習(xí)者點(diǎn)擊按鈕，進(jìn)行前后切換，以ActionScript語句的prevFrame和nextFrame進(jìn)行交互控制。如圖2，“外造型線”知識點(diǎn)需要用多張圖片進(jìn)行詮釋，可以將這些圖片做到同一個Flash文件中，以“上一幅”“下一幅”指引學(xué)習(xí)者進(jìn)行學(xué)習(xí)。

圖2 內(nèi)容交互設(shè)計

圖3 音視頻嵌入添加代碼

4.1.3 音視頻嵌入設(shè)計

在一些國際服裝走秀視頻中，也有諸多可供學(xué)習(xí)者學(xué)習(xí)的元素。這些元素引領(lǐng)了國際時尚，同時也給學(xué)習(xí)者帶來了新的設(shè)計靈感。將這些視頻嵌入電子雜志中是非常有必要的。

音視頻的嵌入可以使用Zmaker軟件的“添加視頻”功能進(jìn)行添加，但是Zmaker的視頻嵌入功能尚不完善，無法解決視頻被放大或變形的問題。因此，可以借助Flash的導(dǎo)入視頻功能，另外附加ActionScript語句對視頻的播放、暫停及停止功能進(jìn)行控制?？梢越⒁粋€影片剪輯，將視頻嵌入影片剪輯中，命名為film，并加入控制按鈕。影片剪輯第一幀及各按鈕所加代碼如圖3所示。

4.2 輔助功能設(shè)計

電子雜志還需設(shè)計必要的輔助功能，如載入界面和目錄。載入界面可以提示學(xué)習(xí)者加載尚未完成，并標(biāo)示出學(xué)科名稱及版權(quán)歸屬，目錄可以為學(xué)習(xí)者提供進(jìn)入某一知識點(diǎn)的快捷通道。另外，還可以根據(jù)使用方式的不同選擇恰當(dāng)?shù)纳砂l(fā)布方式。

4.2.1 載入界面設(shè)計

Zmaker軟件默認(rèn)的載入界面名為default_load.swf?？梢栽凇霸O(shè)置/高級設(shè)置”里的“加載動畫”選項來設(shè)置“顯示”或“隱藏”載入界面。教學(xué)用的電子雜志文件較大，加載時間會較長，所以不建議隱藏初始的加載動畫。此外，可以制作包含學(xué)校及學(xué)科logo的動畫替換此文件(圖4)，并在Flash中進(jìn)行必要的動畫制作及代碼添加工作。需要注意的是，圖4下方的進(jìn)度條需要另復(fù)制一份，并在復(fù)制層上做一個遮罩層。為方便語句識別，遮罩層中的影片剪輯可命名為mask_mc。在第一幀上需添加的語句如圖5所示。制作出的swf格式文件，可以通過修改“設(shè)置/高級設(shè)置”里的“加載動畫”選項嵌入電子雜志中。

圖4 服裝美學(xué)載入界面

圖5 載入界面添加代碼

4.2.2 目錄功能設(shè)計

Zmaker中目錄頁面的制作也可以有兩種方式，一種是通過修改模板來制作，另一種是自制目錄頁面及鏈接。

修改模板首先要將模板添加到工程文件中，點(diǎn)擊模板元件窗口中的“常量/修改”來改變原有文字或圖片。模板的最后一個“常量”通常是鏈接頁碼，需要對照雜志的具體章節(jié)內(nèi)容情況設(shè)置頁碼。文字、圖片、頁碼設(shè)置完畢后，需要在雜志頁面窗口中將“l(fā)ockroot”值改為false，否則無法實現(xiàn)頁面跳轉(zhuǎn)；并將這個頁面設(shè)置為目錄頁，完成各內(nèi)容頁面中“目錄”按鈕的鏈接設(shè)置。

修改模板的方式簡單易用，但是由于模板大體格式已經(jīng)設(shè)置好，靈活度較差，往往不能滿足設(shè)計者的需求，自制目錄可以彌補(bǔ)這個不足。自制目錄，可以將所設(shè)計的目錄動態(tài)效果用flash制作好，生成大小合適的swf格式文件，并添加到工程文件中。點(diǎn)擊右側(cè)的“編輯頁面”按鈕，會彈出一個“編輯特效頁面”窗口。單擊“添加按鈕”，調(diào)整其位置和大?。浑p擊此按鈕可以設(shè)置其顯示顏色和鏈接頁數(shù)。修改完成后須點(diǎn)擊“完成”按鈕，否則無法存儲上述修改操作。隨后，將此頁面設(shè)置為目錄頁，以完成各內(nèi)容頁面中“目錄”按鈕的鏈接設(shè)置。

4.2.3 生成發(fā)布設(shè)計

Zmaker軟件可以發(fā)布單機(jī)版和在線版兩種格式的電子雜志，設(shè)計者可以根據(jù)需求自由選擇。默認(rèn)生成格式是單機(jī)版格式，即生成文件為一個可獨(dú)立運(yùn)行的.exe文件。但如果在Zmaker軟件中注冊會員并登錄，就可享有生成在線版電子雜志的特權(quán)，即主程序菜單欄中的“生成/生成在線版”會由灰色變?yōu)榭蓤?zhí)行的黑色，點(diǎn)擊即可設(shè)置在線版生成文件的存儲位置及名稱。所生成文件夾中會含有多個文件，其中online.html文件即為在線版電子雜志的主頁面。

5 結(jié)語

數(shù)字閱讀已經(jīng)成為新時代重要的閱讀手段。電子雜志融圖像、文字、聲音、視頻、游戲等多種元素于一體，順應(yīng)了當(dāng)代學(xué)生碎片化學(xué)習(xí)的基本需求[5]，可以被引入教育中來。用Zmaker和Flash制作的服裝美學(xué)電子雜志能夠支持學(xué)生的碎片化學(xué)習(xí)及在線學(xué)習(xí)，便于知識的傳播；其美觀大方的頁面設(shè)計和良好的輔助導(dǎo)航功能能夠提高學(xué)生的學(xué)習(xí)興趣。經(jīng)測試，該電子雜志具有良好的穩(wěn)定性，受到了學(xué)生的好評，得到了教師的認(rèn)可?；赯Maker和Flash的電子雜志制作方式可以作為新型電子教材的一種制作方式加以推廣。