基于ZMaker和Flash的服装美学交互型电子杂志设计

曲大为，张晓君，丁雪梅，李东哲

(1.吉林大学教育技术中心，吉林长春130012；2.吉林大学动物科学学院，吉林长春130061)

1 制作背景

随着生活水平的不断提高，人们对衣着的要求越来越高，希望服装不仅能蔽体御寒，更要赏心悦目，服装美学这一学科应运而生。服装美学是一门交叉型课程，直接关系到服装的材料运用、色调搭配和造型等[1]。对服装元素和色彩的运用、对形式美的把握等是广大服装设计者的必备知识；对服装及配饰美的诠释、对美感与心理的理解等不仅对设计者至关重要，对着装者也同等重要。

在日常学习过程中，学生常通过书本或杂志学习相关知识。书本无法充分对服装中的美进行表达，而杂志又存在知识不系统、交互性不强的问题。基于上述原因，制作知识内容全面并且交互性能良好的电子杂志是解决学生学习资料不足问题的有效手段。

2 软件选择

一般来说，专业设计人员多采用Flash进行设计制作。Flash具有完善的动画及交互设计功能，能够保证制作出来的电子杂志吸引学生的眼球。然而，完全采用这种软件，制作过程相对会较复杂。可以选择以全民制作杂志为目的的电子杂志制作软件作为电子杂志的主体制作工具，以简化制作步骤。ZMaker是一款较专业的电子杂志编辑软件，有现成的模板可供选用[2]，菜单工具简单，能够发布在线版和单机版两种类型电子杂志[3]，功能较全面。

为使生成的电子杂志交互性更强，可以用Flash软件制作必要的内容页面。动画的完美呈现和代码的精准控制会使杂志更具人性化。Flash制作的swf文件体积较小，下载速度快，适于网络传播[4]，其内置的Action语言也能够被Zmaker解析。所以，将Zmaker与Flash相配合使用，是制作服装美学交互型电子杂志首选的设计方式。

3 电子杂志的功能设计

服装美学是美学的一个分支。在制作交互型电子杂志过程中既要将美的元素蕴含在软件界面中，通过适当的交互设计及多媒体表达等方式使知识更易于理解；又要设计利于学习者学习的相关辅助功能，如载入界面、目录等提示、导航功能。图1为电子杂志的功能设计图，每个功能都为学习者的学习提供了必要的支持。

图1电子杂志功能设计图

4 电子杂志的技术实现

4.1 内容呈现功能的实现

内容呈现设计是电子杂志设计的重要部分，主要包含界面美化设计、内容交互设计和音视频嵌入设计三个部分。

4.1.1 界面美化设计

界面美化设计可以提高学习者的学习兴趣，使学习者有进一步学习的欲望。Zmaker是一款灵活性很强的软件，既为广大非专业设计人员提供了丰富多彩的模板，又允许专业设计者自主利用Flash进行美工设计。

Zmaker主页里提供了许多适用于各种情况的模板，如一图模板、二图模板、三图模板以及文章类模板、目录模板、封面封底模板。用户可以根据需呈现内容的具体情况选择合适的模板，减少后期美工设计的工作量。

Flash的边缘扫光效果、局部模糊效果等也是有效的美化设计方式。服装美学的电子杂志所涉及的图片案例较多，适当使用特效会使学习者更加明确文字所指，提高学习效率。

4.1.2 内容交互设计

服装美学的知识点往往需要若干张图片来表达。为了让学习者能够自由地切换图片，电子杂志的页内要进行必要的交互式设计，以满足学习者反复温习的需求。

页内交互需要在Flash中实现。可以将知识点制作成单独的Flash，学习者点击按钮，进行前后切换，以ActionScript语句的prevFrame和nextFrame进行交互控制。如图2，“外造型线”知识点需要用多张图片进行诠释，可以将这些图片做到同一个Flash文件中，以“上一幅”“下一幅”指引学习者进行学习。

图2 内容交互设计

图3 音视频嵌入添加代码

4.1.3 音视频嵌入设计

在一些国际服装走秀视频中，也有诸多可供学习者学习的元素。这些元素引领了国际时尚，同时也给学习者带来了新的设计灵感。将这些视频嵌入电子杂志中是非常有必要的。

音视频的嵌入可以使用Zmaker软件的“添加视频”功能进行添加，但是Zmaker的视频嵌入功能尚不完善，无法解决视频被放大或变形的问题。因此，可以借助Flash的导入视频功能，另外附加ActionScript语句对视频的播放、暂停及停止功能进行控制。可以建立一个影片剪辑，将视频嵌入影片剪辑中，命名为film，并加入控制按钮。影片剪辑第一帧及各按钮所加代码如图3所示。

4.2 辅助功能设计

电子杂志还需设计必要的辅助功能，如载入界面和目录。载入界面可以提示学习者加载尚未完成，并标示出学科名称及版权归属，目录可以为学习者提供进入某一知识点的快捷通道。另外，还可以根据使用方式的不同选择恰当的生成发布方式。

4.2.1 载入界面设计

Zmaker软件默认的载入界面名为default_load.swf。可以在“设置/高级设置”里的“加载动画”选项来设置“显示”或“隐藏”载入界面。教学用的电子杂志文件较大，加载时间会较长，所以不建议隐藏初始的加载动画。此外，可以制作包含学校及学科logo的动画替换此文件(图4)，并在Flash中进行必要的动画制作及代码添加工作。需要注意的是，图4下方的进度条需要另复制一份，并在复制层上做一个遮罩层。为方便语句识别，遮罩层中的影片剪辑可命名为mask_mc。在第一帧上需添加的语句如图5所示。制作出的swf格式文件，可以通过修改“设置/高级设置”里的“加载动画”选项嵌入电子杂志中。

图4 服装美学载入界面

图5 载入界面添加代码

4.2.2 目录功能设计

Zmaker中目录页面的制作也可以有两种方式，一种是通过修改模板来制作，另一种是自制目录页面及链接。

修改模板首先要将模板添加到工程文件中，点击模板元件窗口中的“常量/修改”来改变原有文字或图片。模板的最后一个“常量”通常是链接页码，需要对照杂志的具体章节内容情况设置页码。文字、图片、页码设置完毕后，需要在杂志页面窗口中将“lockroot”值改为false，否则无法实现页面跳转；并将这个页面设置为目录页，完成各内容页面中“目录”按钮的链接设置。

修改模板的方式简单易用，但是由于模板大体格式已经设置好，灵活度较差，往往不能满足设计者的需求，自制目录可以弥补这个不足。自制目录，可以将所设计的目录动态效果用flash制作好，生成大小合适的swf格式文件，并添加到工程文件中。点击右侧的“编辑页面”按钮，会弹出一个“编辑特效页面”窗口。单击“添加按钮”，调整其位置和大小；双击此按钮可以设置其显示颜色和链接页数。修改完成后须点击“完成”按钮，否则无法存储上述修改操作。随后，将此页面设置为目录页，以完成各内容页面中“目录”按钮的链接设置。

4.2.3 生成发布设计

Zmaker软件可以发布单机版和在线版两种格式的电子杂志，设计者可以根据需求自由选择。默认生成格式是单机版格式，即生成文件为一个可独立运行的.exe文件。但如果在Zmaker软件中注册会员并登录，就可享有生成在线版电子杂志的特权，即主程序菜单栏中的“生成/生成在线版”会由灰色变为可执行的黑色，点击即可设置在线版生成文件的存储位置及名称。所生成文件夹中会含有多个文件，其中online.html文件即为在线版电子杂志的主页面。

5 结语

数字阅读已经成为新时代重要的阅读手段。电子杂志融图像、文字、声音、视频、游戏等多种元素于一体，顺应了当代学生碎片化学习的基本需求[5]，可以被引入教育中来。用Zmaker和Flash制作的服装美学电子杂志能够支持学生的碎片化学习及在线学习，便于知识的传播；其美观大方的页面设计和良好的辅助导航功能能够提高学生的学习兴趣。经测试，该电子杂志具有良好的稳定性，受到了学生的好评，得到了教师的认可。基于ZMaker和Flash的电子杂志制作方式可以作为新型电子教材的一种制作方式加以推广。