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

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

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

1 制作背景

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

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

2 軟件選擇

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

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

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

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

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

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

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

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

4.1.1 界面美化設(shè)計(jì)

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

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

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

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

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

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

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

圖3 音視頻嵌入添加代碼

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

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

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

4.2 輔助功能設(shè)計(jì)

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

4.2.1 載入界面設(shè)計(jì)

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

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

圖5 載入界面添加代碼

4.2.2 目錄功能設(shè)計(jì)

Zmaker中目錄頁(yè)面的制作也可以有兩種方式，一種是通過(guò)修改模板來(lái)制作，另一種是自制目錄頁(yè)面及鏈接。

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

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

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

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

5 結(jié)語(yǔ)

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