1、zinemaker 杂志封面模板制作教程摘自网络,向原作者表示感谢!Zinemaker 的内页模板制作技术已基本普及,相信大多数朋友都已经能够用 Flash 制作出中意的杂志内页,但是,关于 Zinemaker 主模板(封面模板)的制作与修改技术,网络上几乎没有什么实质的教程,论坛上关于这方面的问题也开始多了起来。授人以鱼,不如授人以渔,相信在下就算做再多的模板,恐怕也满足不了大家的需要,更何况每人都有自己的偏好,可能这个模板你觉得眼前一亮,他就觉得奇形怪状,各有的观点,所以,只有我们真正掌握了自己做模板,修改模板的功夫,才能真正的打造适合自己,真正适合用户阅读的电子杂志。从今天开始,我会在工
2、作之余写一些 Zinemaker2007 的主模板的制作图文教程,弥补一下这方面的空白,这些都是我本人的实际经验,如果有“官方人员”发现某些错误,欢迎指正,与大家一同进步。如果发现某些言语看着别扭,还请见谅,没办法,谁叫咱文科不好,写文章不是强项本教程适合于有一定 FLASH 基础的朋友,不需要很高深,懂得大部分设计操作,懂得一小部分常用的 AS 就可以。本教程采用连载制,不定期更新,每写一些就发出来一些。原创教程 基础篇:第一节模板,SWF,FLA之间的关系与转换Zinemaker 主模板,又称封面模板,杂志模板等,扩展名是 TMF。是整个杂志的框架,基本由 3 部分组成:1index 部分
3、:index.swf(元素存储)包含了杂志播放时需要展现的界面元素(如封面封底,书脊阴影图像,页码,载入动画等等),需要输出到外部的全局变量定义等(例如创建一个可供其他用户修改的网址变量),修改封面模板绝大部分是在 index.swf 中完成的,也是本教程的主角。2pageflip 部分:pageflip.swf(动作播放)纯代码翻页控件,控制着杂志翻页的动作形态,基本的功能定义(如播放声音,时间计算等),除非你有高超的 AS 基础,否则不建议去研究它,他不在本教程的讨论范围之内。3Buttons 部分:buttons.swf(界面交互)按钮文件,是主要的交互部分,按钮决定了整个杂志的风格。4
4、附件部分:frontinfo.swf,backinfo.swf,email.swf,其他需要 index或 Button 调用的自定义文件等其中前三项是必须存在的,否则杂志无法正常初始化。 主模板 DIY 的流程:【获取原始模板的 SWF】-【SWF 输出为 FLA】-【对 FLA 进行定制编辑】-【模板制作器进行打包】模板转 SWF俗语说得好,一切从零开始,我们的下手对象就是:XPLUS 标准杂志模板也就是软件自带的 从模板中获取 SWF 文件,主流方法大致分为三种:1在线发布到服务器。 2使用含有 BUG 的 ZINEMAKER 版本,如 070511,060822 等在使用这些版本生成杂
5、志之后,temp 文件夹下产生的临时文件并不会删除,利用这个“优点”可以直接获取需要的模板 SWF 文件。【操作方法】找到 Zinemaker 安装目录,打开 temp 目录,删除里面的所有文件,然后启动 Zinemaker 070501,060822 等 BUG 版本,新建杂志,选择自带的默认模板,不用修改任何设置,直接进行预览。生成完毕之后,关闭杂志和Zinemaker,进入到刚才的 temp 目录,会发现里面多了一些文件,这就是以后要 DIY 模板的必需品。将这些文件保存好,以备日后之用。3使用专门的模板破解工具模板破解工具曾经红极一时,先打开破解工具,选择软件安装的目录,ZineMak
6、er 会自动执行。必须用破解工具来打开 ZineMaker,否则无法得到破解文件。正常使用 Zinemaker 生成一遍之后,SWF文件就会出现在你指定的目录了。(默认“D:ZineMaker2007”)。【操作方法】打开破解工具,选择软件安装的目录,ZineMaker 会自动执行。必须用破解工具来打开 ZineMaker,否则无法得到破解文件。正常使用Zinemaker 生成一遍之后,SWF 文件就会出现在你指定的目录了。(默认“D:ZineMaker2007”)。SWF 转 FLA由 SWF 还原至 FLA 源文件,最为常用的有以下两种: 1Sothink SWF Decompiler(闪
7、客精灵)对于普通的 SWF 文件,使用闪客精灵能够直接导出为 FLA 文件。省时省力,方便快捷,但是遇到被加密过的 SWF 就无能为力了。推荐使用最新的 5.0 版,安装之后会集成到系统的右键菜单里,这样,不用启动软件就能直接在将 SWF 转换为 FLA 文件了。【操作方法】启动闪客精灵,打开要反编译的 SWF 文件,执行“文件”-“导出FLA”(或者直接按 F4)选择输出的格式之后即可导出为 FLA 文件。推荐使用最新的 5.0 版,安装之后会集成到系统的右键菜单里,这样,不用启动软件就能直接在将 SWF 转换为 FLA 文件了。2Action Script Viewer(ASV)除了能提取
8、普通的 SWF 文件外,它甚至可以提取被打包(把一个或多个 SWF 文件转换成的 EXE 文件)过的 SWF 文件提取出来。最令人心动的是它可以导出供FLASH 生成 FLA 源文件使用的 JSFL 文件。没有经过高级加密的 SWF 文件,在ASV 面前跟一个源文件没太大区别。【操作方法】确定 Flash 没有启动的状态下,启动 ASV,打开(F3)要反编译的 SWF 文件,解析一段时间之后,执行“文件(File)”-“导出重建数据(Export Rebuild Data)”或者按 F4,选择保存的文件夹即可。导出完毕之后。找到导出来的扩展名为 JSFL 的文件,直接双击,Flash 会自动启
9、动,并重建 FLA 文 件。成功导出 FLA 文件之后,就可以开展接下来的工作了。原创教程 基础篇:第二节index 的初级处理一般来说,直接破解出来的 index.swf 会有各种各样的问题,通常需要做一些前期准备工作。1,首先确认已经安装好对应的像素字体Zinemaker 默认的 index 用到了像素字体“04B_08”,如果你的系统中没有安装这种字体,直接用 FLash 进行编辑之后,会自动显示为 FLash 的默认字体“_serif”,这样一来诸如页码等需要显示数字的地方会变得特别难看。 04B_08 字体下载:04B_08.ttf (18.52 KB) 下载次数: 74 2,取消硬
10、件注册导致无法直接打开 index.swfZinemaker2007 破解的 index.swf 直接打开是不可以阅读杂志的(表现为只有背景图或者只有一个圆圈)。当然这个是在 zinemaker2007 软件制作下才有的表现。而我们大都不希望如此麻烦,所以我们需要对其进行一些修改。修改方法: 启动 FLash,打开破解好的 index.fla,选中第一帧,如图。搜索 1. onEnterFrame = function () 2. LB = getBytesLoaded();3. TB = getBytesTotal();4. PC = LB/TB*100;5. loaderbar.setba
11、r(PC);再搜索 1. else 2. delete onEnterFrame;3. getURL(“FSCommand:fullscreen“, fullscreen);4. gotoAndPlay(15);5. 6. / end else if7. 8. / end else if 9. ;记住这两个位置,选定他们之间的一大段代码,然后替换成下面的代码: 1. onEnterFrame = function () 2. LB = getBytesLoaded();3. TB = getBytesTotal();4. PC = LB/TB*100;5. loaderbar.setbar(P
12、C);6. if (TB4 8. getURL(“FSCommand:fullscreen“, fullscreen);9. gotoAndPlay(15);10. 11. / end if 12. ;如图:OK,修改完成,因为这么长的一大段 onEnterFrame 函数里面,就是只有上面这几行是有用的。其它都是用来检测硬件和在线广告以及提交数据所用的,正所谓“商务功能”,作为个人用户的我们,当然要 K 掉他了。去掉这些代码之后,就可以直接打开 index.swf 观看杂志了3,打开 index.swf 时,会有一瞬间白屏的问题这个问题多数出现在用 ASV 破解的 index.swf 中,解
13、决方法就是到 Flash 中把背景图像那一帧往前移动到第一帧就可以了。【如图】 4,杂志启动时总会有一个圆圈一闪而过,如何去掉它?这个圆圈的作用是显示杂志的读取进度,只有在线浏览的时候再会用到,如果你确实看他不顺眼,或者不是经常在线浏览,那就去掉它。选中代码层第一帧,在任意位置添加如下代码,此处为了方便记忆和归类,在靠前的位置添加: 1. loaderbar._visible = false;如图不过这样的修改方法比较死板,必须要使用 Flash 修改源文件,后面的教程会提到,通过变量控制在模板中实现在 Zinemaker 中自由选择是否显示加载动画。原创教程 基础篇:第三节模板编辑器的基本操
14、作将“模板编辑器的基本操作”提前到第三节来讲,是为了便于随时的进行模板制作练习。常用的命令:新建模板新建一个模板,会让你打开一个 index.swf,这就是你所修改好的主模板核心文件打开模板打开已经编译好的模板,可以对其中的元素变量等进行读写开关等设置保存模板直接保存模板文件另存为另存为一个新模板文件,源文件不会被覆盖“模板信息”标签页模板名称将会显示在 zinemaker 新建杂志是选择模板的窗口中,注意:模板名称并不是文件名模板类型可以选择是杂志主模板,还是杂志内页模板。注意,如果选择内页模板,将不会出现下面的窗口大小,与页面大小设置项。页面大小就是所谓的杂志大小,需要与相应的内页进行匹配
15、。如常见的750x550,950x650 等,Zinemaker 编译杂志时自动截图第一帧的尺寸也与这里设置的相同。窗口大小杂志在窗口状态下的尺寸,根据实际界面进行设置,常规的窗口尺寸大小是,宽为“页面宽度+50”高为“液面高度+90”,例如页面大小是950x650,则标准的窗口大小就是(950+50)x(650+90)=1000x740。这个值不一定必须要和 index 的场景大小相同,如果你的界面元素(如按钮)元件做的比较大,那么这个值就应该相应的加大,这样才会得到最佳效果。“图片”标签页正常打开相应的主模板文件 index.swf,这里就会出现所有可供选择的图像文件列表,被勾选的图片表示
16、允许在 Zinemaker 中自由替换。选中一项,右侧窗口就会出现其预览图,然后可以写哎哟下方填写说明文字,方便其他人识别。例如“封面图片”“背景图片1280x1024”等等,当然,偶尔也会出现意外,自己明明在 Flash 中导入了图片,在这里却没有出现,对于这种现象,请参阅后面的无法识别场景文件中的图片的解决方法 “文字”标签页与图片类似,这里将会列出 SWF 文件中所有能够识别替换的文本信息,被勾选的文字表示允许在 Zinemaker 中自由替换。在 Flash 中需要将文本设置为“动态文本”才会出现在这里供选择。制作主模板时,这里并不会有什么内容,“文字”标签页多用于制作内页模板。“变量
17、”标签页这里将会列出 SWF 文件中所有能够识别替换的变量信息,被勾选的变量条目表示允许在 Zinemaker 中自由替换。例如可以再按钮上面加一些动态文本,作为按钮的标签,这个标签关联着一个在 index 中声明的变量,在模板中修改这个变量值,则按钮上的文本也会相应变化。变量在模版制作中有广泛的应用,以后会逐渐讲到。“附加文件”标签页附加文件就是模版制作过程中需要调用的文件(比如被内页模板加载的视频,音乐,或者任何其他的 SWF 文件)。例如,在按钮中制作一个退出确认提示框效果,就可以单独制作一个提示框 SWF 文件,然后通过按钮控制播放与停止,达到显示或隐藏的效果,这个确认框就需要以附加文
18、件的形式包含在模板内。单击“添加”按钮就可以添加一个或多个附加文件,并可以添加对应的缩略图。选定前面的对勾可使其在模板中能够被替换。注意:以下两个附加文件是必须存在的:pageflip.swf 和 buttons.swf,缺少这两个文件杂志会无法初始化,原因参见第二节教程。在 FLash 中导入好的图片,为什么在模板编辑器中看不到?明明已经导入好图片,输出 SWF 文件之后,用模板编辑器打开,却没有出现在“图片”选项卡中,导致无法替换。也许你会遇到这种情况,解决办法:在 Flash 中的库面板中,右键单击有问题的位图(或者双击位图前面的图标),去掉“使用导入的 JPEG 数据”前面的对勾,然后
19、在下面的“品质”里填入一个你认为合适的值,一般为 80-95。再一次导出 SWF 文件,看看是否能解决前面的问题。原创教程 进阶篇:第一节修改主模板尺寸第一步:修改基本参数启动 Flash,打开准备好的 index.fla,选中代码层的第一帧(如图)。搜索: 1. main_width = 750;2. main_height = 550;这两行代码分别表示杂志页面的宽度和高度,默认是宽 750,高 550。把它改成你希望的尺寸,例如 950x650,那就将上面的代码改为如下: 1. main_width = 950;2. main_height = 650;第二步:修改场景大小执行菜单栏“修
20、改”-“文档”(或者按 Ctrl+J),打开“文档属性”对话框。修改“尺寸”一项的大小,宽为内页目标宽度+50 像素,高为内页目标高度+90像素。例如新的尺寸是 950x650,那么新的场景大小就是宽 1000,高 740。第三步:图片元素的更换简单来说就是更新 index 库中的 9 幅图片,因为模板尺寸的变更,为了尽可能的保持更好的效果,所以建议重新到 photoshop 中制作。实在太懒,怎么办?那就强制性的拉伸图片到目标大小呗,效果肯定不完美了,不过由于都是细节元素,差距也不是很明显,适合于那些爱“将就”的人。封面与封底(2 张)封面封底的高度就是内页的高度,但是 Zinemaker
21、默认的封面与封底是包括书页侧边的,所以宽度并不是内页宽度的一半,需要再增加 13 像素。例如950x650,封面封底大小就是 475+13=488 像素,这个 13 像素并不固定,是根据你实际修改的程度来调整的。当然,也可以将书侧边去掉(就像多数无书脊样式设计类杂志那样),这样封面的宽度就等于内页宽度的一半了。封面与封底的投影(2 张)这两张图就是封面封底大小一致的白色区域,外面加上一层投影效果,被封面和封底的图片覆盖在下方,只露出投影部分,作用是给杂志添加一些立体感。背景图(1 张)相对来说背景图的更换就要简单一些,默认的 1280x1024 的背景图在大分辨率显示器上效果不佳,会裸露出难看
22、的底色,替换新的背景图只需要在库中替换相应的图片文件即可,不用考虑会不会对齐的问题,因为 index 会自动将背景图对齐到杂志中心。书脊阴影(2 张)书脊阴影分为封面封底两个,通常为黑色不透明黑色透明的横向渐变,存储格式为 PNG。由于考虑到修改尺寸带来的影响,默认的书脊阴影采用了一个较小的尺寸(750 像素高),这样在纵向拉伸的时候也不会影响效果。如果要使用更复杂的书脊图(例如相册风格带有铜环的书脊),那就不能再使用纵向拉伸了,模板是什么尺寸,就相应的做什么尺寸。制作封面与封底书脊阴影是,要考虑到模拟光照效果,不要做出来之后发现一点立体感都没有,而且封面与封底的阴影外观是不同的。书页侧边(2
23、 张)就是杂志内页两侧的厚度侧边图,分为左右两张,分别对应左页与右页,它的修改就要麻烦一些了,最好当然就是重新制作一张对应尺寸的书页侧边,但如果你的 photoshop 功底浅薄,那就和封面与封底的投影的方法类似,用最为传统的方法:直接拉伸原图。修改书页侧边时要注意,它的高度并不是杂志内页的高度,因为他要包括外侧的投影。注意 1:替换图片时不要直接在库中使用“更新”功能,因为破解的 index 中的图片都是成打散状态,应该直接定位到相应的元件内,把原来的图片删掉,放入新的修改过的图片。注意 2:导入新图片注意与原图片的坐标保持一致,坐标基准点并不是图片的左上角(因为一些图片包含了半透明的阴影部
24、分)修改模板尺寸是一个粗做粗用,细做细用的过程,现在你应该测试一下影片,看看是否达到你需要的效果了。补充:如何找到自己要修改的元件?只要稍微熟悉 index,一般都能够快速的找到所需要的元件在哪里(就是不停的双击双击逐层进入),如果实在找不到,那就通过 Flash 的查找元件功能。执行“编辑”“查找与替换”(Ctrl+F),打开“查找与替换”面板,勾选“实时编辑”,在类型下拉列表中选择“元件”,在“名称”下拉列表中选择对应的元件编号,即可直接跳转到相应的元件进行编辑了。元件编号是破解 swf 过程中自动生成的,不同的反编译工具导出的元件前缀略有不同(例如闪客精灵通常是 shape001,spr
25、ite001;ASV 通常是 Symbol001)但是每个元件的编号是唯一的,需要接触到的元件编号如下(以 ASV 为例): 书页侧边(右):Symbol 50(闪客精灵则为 shape 50 或 sprite 50,下同)书页侧边(左):Symbol 47背景图:Symbol 41封底(含封底阴影):Symbol 26封底书脊:Symbol 35封底和封底书脊:Symbol 36封面:Symbol 19封面书脊:Symbol 22封面和封面书脊:Symbol 23原创教程 进阶篇:第二节修改杂志的显示坐标本例以把杂志的显示位置向左移动 40 个像素,同时向上移动 20 像素, “杂志偏移基本
26、值”即为“X=-40,Y=-20” 。准备工作:了解 Zinemaker 的坐标定位依据(如图)示例图中的“X=-50,Y=-50”即为“杂志偏移基本值” (下图可点击放大)本帖隐藏的内容需要回复才可以浏览第一步:修改杂志页面(pages 组件)坐标位置。首先,启动 Flash,打开 index.fla。1选择代码层第五针【如图】2搜索 1. pages._x = (main_width + 50) / 2 ;2. pages._y = (main_height + 90) / 2 ;修改为 1. pages._x = (main_width + 50) / 2-40 ;2. pages._y
27、 = (main_height + 90) / 2 -20;第二步:修改封面封底背景修正层元件的坐标位置。使用 FLash 的查找功能搜索编号为 43 和 44 的元件,这两个分别是封面和封底相反方向的背景修正元件【如图】分别选择 page_start 和 page_end 元件,双击进入该元件编辑区内,修改第一帧的代码内容,如下;找到 1. bg_mc._x = (_root.main_width-bg_mc._width)/2)-_root.pw;2. bg_mc._y = (_root.main_height-bg_mc._height)/2;修改为 1. bg_mc._x = (_ro
28、ot.main_width-bg_mc._width)/2)-_root.pw+40;2. bg_mc._y = (_root.main_height-bg_mc._height)/2+20;【注意】:由于 Index 元件结构的对称性,位于这里的两个新坐标是和“杂志偏移基本值”相反的,例如“杂志偏移基本值“是正数,则这里的新坐标是负数第三步: 修改内页书侧边元件坐标位置。找到编号为 48 的元件(page_prevs)中的代码 1. onClipEvent (load) 2. this._x = (_root.main_width+50)/2)-this._width;3. this._y
29、= (_root.main_height+90)-_root.ph)/2;4. 修改为 1. onClipEvent (load) 2. this._x = (_root.main_width+50)/2)-this._width-40;3. this._y = (_root.main_height+90)-_root.ph)/2-20;4. 将编号为 51 的元件(page_backs)中的代码 1. onClipEvent (load) 2. this._x = (_root.main_width+50)/2;3. this._y = (_root.main_height+90)-_roo
30、t.ph)/2;4. 修改为 1. onClipEvent (load) 2. this._x = (_root.main_width+50)/2-40;3. this._y = (_root.main_height+90)-_root.ph)/2-20;4. 第四步:修改按钮坐标位置,这一步骤非必须,建议直接在buttons.fla 中重新安排各个元件的位置。选择代码层第一帧(就是代码最多的那帧) ,在任意位置添加 1. buttons._x=-40;2. buttons._y=-20;添加的位置没有强制要求,以方便记忆和管理为主。第五步:预览影片,观察是否达到自己的预期效果。原创教程 进阶
31、篇:第三节使用变量【变量的作用和写法】 变量的作用是存储程序(也就是杂志)运行中需要使用的值,比如:要决定杂志启动时是不是全屏模式,就需要声明一个变量,然后添加它的值“true(是) ”还是“false(否) ”,这样,当杂志启动时就会通过判断代码读取这个变量值,来决定是否是全屏模式。这个变量只是可以在 Zinemaker 中修改的。正式由于“变量”的存在,使得 Zinemaker 的可扩展性大幅提高,只要学习几句很简单的代码,就可以自由添加各种杂志功能开关,内容显示等模块。要声明变量,必须将 var 语句和变量名结合使用。声明变量的基本写法是:var+空格+变量名+等于号+变量值,与 zin
32、emaker 模板之间的对应关系如下图本帖隐藏的内容需要回复才可以浏览注意:1,如果变量值是字符串,需要在前后各加一个英文引号。2,如果变量值是数字,不需要使用引号。3,如果变量值是布尔值“true(是) ” 或“ false(否) ”,不需要使用引号。例如:默认模板按钮中的“杂志标题按钮” ,上面需要显示一些字符“Zine Vol.1“,写法就是这样的: 1. var zine_title = “Zine Vol.1“也可以在一条语句中声明多个变量,不同声明之间用英文逗号分隔: 1. var zine_title1 = “Zine Vol.1“,zine_title2 = “Zine Vol.2“,zine_title3 =