杂志模板编辑教程.docx

ZineMaker自适应模板制作探讨兼谈变量的运用2009-12-08 12:09女孩的讲座将分为下面几个部分。（有关本文涉及到的模板程序，请你光临520du电子杂志论坛，在西部女孩作品区的同名文章里下载。）一、自适应模板的基本原理二、自适应模板的制作实践三、自适应模板的适应范围要求四、自适应模板制作的变量运用五、自适应模板的改制实践六、自适应模板制作和改制中的常见问题本文旨在探讨ZineMaker自动适应主模板规格内页模板（简称自适应模板）的制作原理以及制作和改制实践，进一步提高模板DIY的水平，同时提高对ZineMaker杂志变量的认识和运用水平。本文适合已经掌握了Flash基本知识和基本操作以及熟悉和掌握ZineMaker程序应用的网友阅读。如果你还不具备上述能力的话，那么希望你尽快掌握之后，然后再来阅读也不迟。对于高手而言，ZineMaker杂志程序和其他程序相比，更多的优势在于自主动手的能力上，其范围涉及主模板、目录模板和丰富多彩的内页模板，让使用者有更多的选择，让开发者有更多的制作乐趣，让Flash初学者有很多改制的实践机会，这就是ZineMaker经久不衰的内在源泉和动力，因为它不仅仅是一个杂志工具，更重要的是，它还是一个学习和掌握Flash的入门和实践工具。假如ZineMaker也变得大包大揽“五毒”俱全的话，我想它就失去了自身的价值而变得平淡无奇了。从某种意义上说ZineMaker很原始，正因为这种原始才使得我们从中开发出更多令其不凡的作品。这就好比PhotoShop一样，如果什么都大包大揽的话，那它仅仅是一个简单的图片处理器，也就失去了其程序的主要价值，至少不会出现“把图片PS一下”的这个说法了。众所周知，ZineMaker的主模板规格较为单一，这是一定的历史原因造成的，也许正因为这一历史的误会，给了网友很多的创作灵感和创作机会，以至于让网友们创作出包括可变规格主模板在内的花样繁多的主模板，一举解决了曾经困扰ZineMaker可持续发展的技术难关，诞生了多种规格、多种功能的系列模板。当前，随着显示器由方到长，加上各种笔记本、上网本的大量出现，电子杂志由长到方发展的趋势越来越明显了，原有的750x550或950x650等长型规格朝向960x540或1200x680等方型规格的发展也在所难免，甚至为了增加独创性和特殊性，很多网友自定义的很多种规格的主模板也在层出不穷，随之带来的的内页模板适应性的问题自然也就越来越突出了，与其倾心尽力地去制作制作单一规格的内页模板，不如多在规格自适应性这个环节上下功夫动脑筋。放眼现在流行的其他电子杂志程序，个人认为，ZMaker程序和ieBook程序基本做到了杂志规格的自由修改，但是其本身又受内页模板规格的限制，为了摆脱这个限制，这两个程序都无一例外地增加了Flash元件的自由添加和自由伸缩摆放的功能，试图通过这一方式来解决内页规格的限制，但是实践中不难发现，很多使用者始终摆脱不了内页模板的诱惑，仍然希望通过使用模板来增添杂志的个性，使得模板规格限制依旧显得很突出。PocoMaker程序（以下简称Poco）属于一种无内页模板的程序，它在处理兼容其他模板（仅限于模板转换为swf后使用）的适应性上另辟蹊径，在可自由添加Flash元素和自由伸缩摆放的的基础上，采取Flash元素或其他元素拉伸或填充的办法解决了各种内页模板对它自身的自适应问题，这样使得使用者可以将其他程序好的内页模板经过制作完成后输出为swf供Poco直接使用，这一点我个人认为Poco还是相当成功的，至少让开发者和使用者都很方便，但是Poco也留下了主模板规格不能自由修改的遗憾。从这些方面来看，ZineMaker显然存在一些不足，尽管有网友通过模板变量突破了主模板不能自由变更规格的技术瓶颈，但是因为程序本身不能通过自由添加Flash元件来改善内页模板的规格限制，有些网友甚至把脑筋动在了其特效添加的上面，试图通过ZineMaker的特效添加方式，将Flash元素加进内页模板中，用以改善非主模板规格内页的空隙，但是实践中你会发现这一做法虽然有一定的效果，但是非常麻烦，因此开发者和使用者都很少。正因为如此，使得很多初级使用者认为ZineMaker很不方便，但是又摆脱不了其众多内页模板的吸引，以至于纷纷要求提供自己希望规格的内页模板或者纷纷动手改制模板。应该说ZineMaker的这些不足恰恰就是它吸引人的特点，引领着人们不断深入学习Flash，不断探讨解决办法，不断开发出新颖别致的模板，这就是为什么我在回答一些网友问题时称ZineMaker是一只下不完蛋的鸡，我们可千万别把它给杀了。呵呵，啰哩啰嗦这么多，实际上就是想说明ZineMaker程序还是本文的基础和平台，从它出发，想以自己的实践经历给那些致力于开发制作和改制模板的网友提供一个另外的思路，权且作为抛砖引玉吧。一、自适应模板的基本原理凡常来520论坛的网友，可能看到了女孩提供的一些自适应模板，内容包括目录型、文字型、图片型和视频型，这些模板最大的特点就在于可自动适应各种主模板的规格（可能女孩的显示器是长型的，因此女孩较为偏重开发方型杂志的内页模板，有关此问题我们将在后面探讨）。看起来似乎很神奇，实际上它的原理很简单。有些网友可能更很熟悉自适应按钮，它是根据主模板的大小，通过改变上下两排按钮与主模板的相对位置来实现自适应的。与按钮不同的是，自适应内页模板实际上是根据主模板的大小，通过放大或缩小（也可称作拉伸）内页模板的规格来实现的。这一点有点像我们电脑屏幕的桌面壁纸显示，是根据屏幕不同的分辨率来拉伸位图实现适应不同的屏幕，其中的道理几乎完全一样。如果我们把主模板理解为电脑屏幕，不同的分辨率代表不同的规格，那么内页模板就是壁纸，我们只要能够缩放（或拉伸）这个壁纸，就能实现内页模板的自适应性。呵呵，道理很简单吧。我想网友更关心的是，如何实现内页模板可根据主模板规格拉伸（或缩放）自己使自己适应主模板这个问题。这就是ZineMaker程序变量功能的魅力了。自适应内页模板实现的基本条件是：1、主模板能够向内页模板提供自身规格参数变量的联络。2、内页模板可以使用这个变量来改变自身的大小。前者是自适应的基础，后者是自适应的条件。有了基础，那么创造条件应该不难。我们可以看出，基础是主模板自身提供的，而条件就是我们通过Flash制作模板或者改制模板来实现的。这就是为什么我要求本文的阅读者一定要会操作Flash，一定要熟悉ZineMaker程序的原因。二、自适应模板的制作实践现在我们来讲讲如何制作这样一种能够随主模板规格参数变量的变化而改变自身规格的内页模板。这里我们多次强调了参数变量这么个东西，很多网友对我说，一看到变量这个东西就头疼，说句实话，这个东西连我自己看了也头疼，但是还真不能小看这个东西，有了这个东西我们才能实现一些更有用的功能，有了这个东西Flash才变得有意思，也因为有了这个东西，我们才能在ZineMaker上开发出很多别的杂志程序所不具备的花样。这就是为什么我总强调ZineMaker的最大魅力在于其参数变量的运用上。我们所以对变量头疼，是因为我们总是企图在一瞬间就想掌握所有变量、参数、代码的功用和意义，恨不能马上将其投入使用创造出意想不到的效果，因此当你抱着书本去寻找变量、参数、代码的相关用途和意义时，你会发现你很失望，因为你很难看懂，也就谈不上运用了，所以你就会变得厌烦起来，厌烦变量、参数、代码的出现，甚至谈它们就色变。呵呵，我想说，我跟你一样，没有人会无缘无故地喜欢枯燥的变量、参数和代码的。我只是想告诉你，慢慢来，我们从一些我们感兴趣的角度来慢慢接近变量，先不用去管它到底有哪些更多的用途和含义，即使别人问你你三不知，也无关紧要，只要你能用它达到你的目的，就足够了，这样久而久之你就会感受到它的无穷魅力了。当然，你一时半会记不住这些变量也没什么丢人的，现在就是要学会复制与粘贴代码（变量），谁有工夫坐在那里一个字符一个字符的敲啊，拿来的东西不用白不用，只要你粘对了地方发挥出了作用就行，这足以说明你开始学会使用变量了。呵呵，一点心得，帮助你减轻一些学习压力。下面我们就来看看自适应主模板规格内页模板的第一个条件，主模板是否能够提供自身的规格参数变量并与内页模板联络？答案是肯定的。也许这里我说的文绉绉了一点，说白了，就是我们有没有可利用的主模板规格参数来作为内页模板规格的变量。熟悉ZineMaker主模板的网友可能都知道，在主模板代码内有两个变量：main_width，main_height。前者就是主模板的宽度，后者就是主模板的高度。这两个变量就是主模板提供给我们的可利用的基础条件。接下来，我们就是要利用这两个变量，让它成为内页模板的宽、高参数，这样的话不就实现了内页模板对主模板的适应了么？比如我们把内页模板的宽、高分别定义为x1、y1两个变量，设x1=main_width，y1=main_height，嘿嘿，接下来如果你对代数不陌生的话，你就可以看出来，当主模板的main_width=750，main_height=550，则内页模板自然就是x1=750，y1=550；如果你的主模板用的是main_width=950，main_height=650，那么内页模板自然就会变成x1=950，y1=650了。其他规格的道理我想就不用说了。看到这里，我想网友最想问的是，内页模板在制作时都已经先设定好了页面的宽度和高度，如何才能被变量改变呢？你说的没错，页面的宽度和高度的确不能通过变量来改变，但是场景中的剪辑却是可以通过变量来改变大小的，我们要利用的就是这一特点。打个比方来说，模板的页面就是相框，剪辑就是相框里的照片，我们不能改变相框的大小，但至少我们可以改变照片的大小，假设这个相框是透明的，我们把这个相框放到另一个相框上（相当于放在主模板上），然后我们按照下面的相框的大小来调整照片的大小，那么你看到的肯定是照片对下面相框的适应，而自身的那个相框就不那么重要了。这就是我们创造的自适应模板的条件。为此，和以往在场景内直接加入模板内页版面的各种元素有所不同，自适应模板场景的第一帧只有一个剪辑，所有的版面内容元素全都放到这个剪辑里，通过变量控制剪辑的大小就实现了模板的自适应能力。下面我们制做一个简单的一张图片的自适应模板，来实践一下，你可以通过这个实践举一反三，自己再试试文字、甚至视频、目录等自适应内页的制作。注意：女孩的屏幕为长型，因此女孩还是以方版杂志为基础来制作模板，网友可以根据自己的情况来设定页面的大小。准备一张1200x680大小的图片备用。第一步，新建一个页面，设定页面尺寸为1200x680（本文将在后面探讨为什么要建立大尺寸页面这个问题）。建立两个图层，第一层作为动作层，第二层作为剪辑层，新建一个剪辑元件，把这个剪辑元件拖到第二层的第一帧里，将这个剪辑命名为muban（注意：是剪辑名称不是元件的名称。这个名称很重要，在程序的左下角“影片剪辑”下方的空白处。你也可以命名为其他的名称）。将剪辑的x、y均设为0（见图1）第二步，打开剪辑muban，建立一个图形元素，把这个图形元素拖到剪辑的第一帧中，将图形元素的x、y设为0（见图2）。第三步，打开图形元素，导入你准备好的那张图片到舞台上。将图片的x，y设为0（见图3）第四步，回到场景1，选中最上面的图层，打开动作框，输入如下代码：（见图4）x1 = _root.main_width;y1 = _root.main_height;muban._width = x1;muban._height = y1; muban._x = 0;muban._y = 0;这些代码很简单，你一看就会明白。_root的加入是必须的，它表示要在主模板的主轴上读取主模板的宽、高参数。muban._width和muban._height就是剪辑muban的宽、高变量，muban._x和muban._y是剪辑muban的位置变量，如果剪辑本身就在0的位置上，那么这两个变量可以不要。上面的式子也可直接写成：muban._width = _root.main_width;muban._height = _root.main_height;muban._x = 0;muban._y = 0;第五步，输出这个swf，然后到ZineMaker模板编辑器中把这个swf变成tpf模板，到此这个自适应模板就做成了。下面我们可以检验一下它的自适应性。第六步，把模板安装到ZineMaker的模板文件夹里去。第七步，打开ZineMaker程序，选择一个960x540的主模板，将这个模板加载进去，预览看看是不是自适应了？不相信的话，再选一个其他规格的主模板试试。做完这个简单的自适应模板，我想你该会对自适应模板有了初步的了解了，而且我相信至少这几个变量不会再让你头疼了吧？好，那我们就一鼓作气，再领略一下变量的好处。我们还可以将上面的模板改为可变规格的内页模板（通俗的说就是可以手动更改规格的模板）。很简单，代码如下：var x1 = 1200;var y1 = 680;muban._width = x1;muban._height = y1; muban._x = 0;muban._y = 0;我们可以看出，x1和y1不再读取主模板的参数，而是直接输入了参数，var的加入是表示该变量是可以在模板上进行修改的。好，我们在输出这个swf，到模板编辑器中去做模板，与上面不同的是，请在模板编辑器的“变量”一栏中，将这两个变量勾选上（图5）。输出tpf文件后，安装到ZineMaker的模板文件夹里去。打开ZineMaker程序，选择一个960x540的主模板，将这个模板加载进去，在模板属性栏里，你可以看到x1，y1这两个变量，分别改成960，540即可。（图6）怎么样？是不是很简单？OK，这就是变量的魅力，我们通过对变量的变通使用，显然可以让模板发生质的变化。有关变量的使用后面我们还要讲到，让我们继续回到自适应模板这个主题。三、自适应模板的适应范围要求现在我们来讨论一下自适应模板的页面适应范围问题。由于历史的原因，电脑显示器有方有长，不可能有一种壁纸既能在方型显示器上满屏正常显示，又能在长型显示器上满屏正常显示，如果想在显示器上满屏显示任一种规格的壁纸，无一例外的都采用了缩放（或拉伸）的办法，方型显示器上满屏显示长型壁纸，壁纸肯定要横向压缩，正常的人物会成为一个瘦子；而长型显示器上满屏显示方型壁纸，壁纸肯定要纵向压缩，正常人物就会变成一个胖子。这是无法避免的现实，因此，自适应模板肯定也存在这个问题。办法有两个：一是分别为长型杂志和方型杂志制作一个自适应模板，各自用在各自类型的主模板中；另一种是只制作一种规格的自适应模板，如果有变形的图片，就用其反向变形后的图片来代替，这种方法要求你至少会PS图片。再来谈谈为什么一定要做成大规格自适应模板这个问题。我想，如果要使自适应模板达到实用化，而不是单纯仅仅为了凑主模板的规格的话，那么这个问题是很重要的。还是拿壁纸来做比方，如果你有个400x600的图片想做1024x768屏幕的壁纸满屏显示，显然这个图片的横向和纵向都被放大了，图片的显示质量可想而知。但是如果你有1940x1200的图片，在1204x768屏幕、或者同规格屏幕、或者800x600屏幕上显示，图片是被缩小的，图像质量就不会受到影响。自适应模板做大适小，是个基本的原则（包括文本文字），我想这个道理应该很明白吧。这就是为什么我不主张把750x550的模板改制成自适应的，适应谁呢？自身不用适应，适应比它小的又没有这种主模板，适应950x650主模板的话，那就存在了我说的上述问题，这种自适应显然是在凑合，没有什么实际意义。第三，既然是自适应模板，当然就不存在什么固定的规格尺寸，但是做大适小（也包括适应自身尺寸大小）是个绝对的原则，你倒是可以设计一个在长型和方型主模板中都变形比较小的一种尺寸的自适应模板，来满足模板拉伸变形的缺陷，这不失为一种“凑合”的办法。切记，由大尺寸往下去适应小尺寸才是自适应模板的正道。四、自适应模板制作的变量运用从自适应模板的制作实践中，我们不难看出，变量的作用是最为关键的，否则，我们无论如何也没有办法去实现模板的自适应。当然可变规格模板也同样如此，我们在第二讲的实践中已经举了这个例子。那么接下来，我们再看看变量在模板制作中还能有什么可以让我们迅速体会到的作用。也许有些网友看到了女孩的可变样式模板，觉得很新奇，其实这种模板也是变量的一种运用。制作杂志时，我们可能有这样一种体会，一些简单的图文，我们用一些模板去表现，因为简单，又不想重复，因此我们总是不断地制作一些模板，或者寻找一些模板，但是这样的话，花费在寻找模板和制作模板上的时间，远远超出了我们对杂志本身的热情，最后是磨了刀还误了砍柴。能不能有一种模板，至少包括几种可以变换的样式，使其满足我们对页面变化的需求，又不需要再去制作或者寻找其他模板。呵呵，这就是可变样式模板的最初思路，而要想获得这一模板，变量的运用无疑会使我们实现这个梦想。下面我们来实践一下这种模板的制作。为了节省时间，我们还是利用前面的自适应模板来制作一个可选两种样式的内页模板，女孩不再详细叙述如何添加的各种元件了，重点放在讲述变量的使用上。第一步，用FLASH 8程序打开我前面说的自适应模板，在场景1的动作里再添加下面的变量（见下图）var yangshi = 0;这个代码可以认为是我们在模板中将要使用的样式选择开关。第二步，在剪辑muban中再添加一个图形，并将两个图形转换为剪辑（选中一个图像，右键选择“转换为元件”，选择“影片剪辑”然后确定）。将这两个剪辑分别命名为m1和m2。（见下图）第三步，在最上面增加一个图层，打开动作框写入下面的代码（见下图）：if (_parent.yangshi = 1)m1._visible = false;因为我们是在剪辑muban中添加的动作，yangshi这个变量在它的上一级动作代码中，因此一定要加入_parent，有网友要问，假如我要在m1的剪辑里添加动作，如何读取yangshi变量呢？很简单，在前面再加一个_parent变成_parent._parent.yangshi即可。这段代码表示：如果yangshi变量的参数为1的时候，将剪辑m1的属性关闭（即不显示），而yangshi变量的参数为其它数值时，则显示剪辑m1。事实上，剪辑m2始终在显示，只是因为在剪辑m1之下看不着而已。由于我们在前面将yangshi变量预设为了0，因此，我们预览时只能看到剪辑m1（剪辑m2此时被剪辑m1遮住了）。好了，这个可变样式的模板就做好了。第四步，输出这个模板的swf，然后到ZineMaker模板编辑器中，勾选替换的图片，在变量中勾选yangshi = 0，（见下图），然后保存为tpf模板之后，将其安装到ZineMaker模板目录里。第五步，打开ZineMaker程序，选择一个主模板，将这个内页模板添加进去，你看到的是样式一的内容，如果你确定使用这个样式，请将样式二的内容（图片）勾选掉，这样有利于减小杂志体积；将yangshi参数设为1时，你将看到样式二的内容，确定只用这个样式时，那就勾选掉样式一的内容（图片）。（见下图）通过上面的实践，你应该对可变样式模板有了基本的了解了，对变量的妙用也应该有所体会了吧。其实无论女孩在论坛里提供的可变样式模板有多复杂，其原理跟上面的简单模板是一样的，网友们可以运用上面的原理，自己动手自制一些可变样式的模板试试。五、自适应模板的改制实践尽管女孩不主张将非自适应的750x550的模板改制成自适应模板（理由见第三讲），但是为了学习方便，女孩仍以非自适应的750x550的官方模板阿朵为例，来实践一下如何将它改成自适应模板。第一步，打开Flash 8程序，新建一个空白文档，页面尺寸定为750x550。建立两个图层，建立一个剪辑，把这个剪辑放到第二层里，命名为muban，设x，y都为0（步骤与第二讲的前两步相同）。选第一层打开动作框，填入下面的代码（见下图，步骤与第二讲的第四步相同）：x1 = _root.main_width;y1 = _root.main_height;muban._width = x1;muban._height = y1; muban._x = 0;muban._y = 0;第二步，反编译官方模板阿朵，获得fla文件，在Flash 8程序中打开，然后选择所有帧复制下来。（见下图）第三步，回到第一步中的文档，打开剪辑muban，选中第一帧粘贴，之后你会发现阿朵模板的所有元素都被粘贴在了里面，只是位置还不对。（见下图）第四步，把指针放到最后一帧，选择所有元素，拖动与页面对齐（或将x设为0，y设为-7）。这时我们将动画帧的最后结束的那些帧都在正常位置上了，只是动画的开始帧还不在正确的位置上。（见下图）第五步，我们需要把所有元素的动画关键帧修改到正确的位置上，这里仅举第二层的那个文字动画的修改为例，先到最后一帧，看看它的最后的正确位置，我们可以看到元素的x=0，y=-7（见下图）由于该文字元素动画是从左至右进入，因此变化的只是位置x，y应该都是-7，因此，我们把前面每一个关键帧（有黑点的帧）中该元素的y全都改成-7即可。其他有动画帧的元素全部按照上面的办法将关键帧的位置修改好（注意：位置参数可能各不相同，请根据实际情况修改）。这一步做好后，可以预览一下看看显示的是不是和原模板一样。第六步，输出swf，用ZineMaker模板编辑器制作成模板，打开ZineMaker程序，选择一个950x650的主模板，将这个内页模板添加进去，看看结果如何。下面是女孩改好后，在960x540主模板中看到的样子。（见下图）六、自适应模板制作和改制中的常见问题下面我想以问答的形式来阐述一些在制作中和改制中遇到的一些问题。1、自适应模板在杂志中为什么会跳跃？有没有办法避免？答：因为自适应模板制作的比较大，在低于它自身规格的主模板中有一个缩小的过程，这个过程就造成了模板的跳跃。我们可以采取让剪辑从黑场淡入显示的办法来拖延自适应模板显示出来的时间。以第二讲的实例为例子：我们可以将剪辑模板创建一个带有补间动画的剪辑，让它从黑色慢慢显示出剪辑内容，即所谓的淡入进入页面，如果你熟悉Flash程序，这个过程应该很容易实现，动画最好能达到60帧（可根据实际情况，只要能躲过页面翻过之后的那段时间即可）。注意一定要在代码中的第一行添加“stop();”，否则动画无法停止。（见下图）2、自适应模板能否用于ZineMaker2006中？答：完全可以。3、自适应模板能否用于iebook程序中？答：因为女孩不了解iebook决定其页面规格的变量名称，因此目前还不能提供包括iebook和zmaker在内的自适应模板，不过完全可以制作成可变规格的模板供这两个程序使用。这里以iebook为例，说一下它的代码。请打开第二讲提供的“可变规格.fla”文件，在场景1中增加一个图层，选择第一帧，在页面的边缘（外边任何的位置上，不在页面内就行）