【标题】：打字动画效果的实现
【关键字】：动画
【来源】：网络

打字动画效果的实现

很长时间以来，总是有人在探讨在FW中如何制作打字效果的动画这个问题。大部分的朋友认为，使用FLASH可以轻松的实现这一种效果，但在FW中似乎要困难些，好像除了一帧一帧的累加以外，就没有更好的办法了。原来也是一直这么来理解的，但是今天无意中找到了一种在FW中实现打字动画效果的更好的方法，请随我来：

【打字动画效果图】

第一步：打开FW，新建一个文件，文件的大小为140x20像素，背景色自定，这里采用了黑色。

第二步：选取工具箱中的Text Tool（文字工具），在编辑区输入你想要出现打字效果的文字，这里我们输入了“风云设计眼欢迎您的到来”；字体采用“宋体”；字号采用12Px；颜色自定；字体边缘效果选择“No Anti-Alias”；对齐方式采取默认的左对齐方式。

第三步：选中编辑区的文本对象，执行快捷键“Ctrl+Shift+D”，原地复制相同的一个文本对象，然后打开Fill（填充）面板，将复制的文本对象的颜色做一改变即可，然后向任意方向移动1像素的距离，调整好的效果图如图01所示：
[注：]此步骤可以略去，直接进入下一步，如果你不需要对文字对象做改变的话！

图01 在编辑区输入相关文字

第三步：选中文字所在的层，点击层面板右上角的弹出菜单按钮，在随后出现的弹出菜单中，执行“Share This Layer”（共享这一层）命令，将文字所在层变为共享层，如图02所示。

图02 共享文字所在层

第四步：打开Library（符号库）面板，点击位于库面板由下角的增加新符号按钮，来增加一个新符号。（注：这个快捷按钮的功能和菜单命令“Insert --New Symbol（插入-新符号）”是相同的）如图03所示：

图03 符号库面板

第五步：在弹出的对话框中，可以给新增加的符号起一个名字，也可以采用默认的Symbol不做更改，Type（类型）选择第一个Graphic（图形符号）即可，点击OK按钮即可，如图04所示。

图04 添加新符号对话框

第六步：点击确定后，会自动进入到这个Symbol的编辑区，在编辑区中绘制一个边长为20像素大小的正方形（注意：也可以绘制一个矩形，但是不管是正方形还是矩形，它们的高度都以和编辑区的场景的高度相同或者大于场景高度为宜，不能小于场景高度），正方形的具体大小、边长情况，可以在选定正方形的情况下，打开Info（信息）面板，将其中的W和H的值都调节到20即可，如图05所示。

图05 通过Info面板调整正方形的边长大小

第七步：将画好的正方形的位置进行调整，使其位于符号编辑区的中央部位，如图06所示。

图06 调整符号的位置

第八步：再次点击库面板右下角的新增符号按钮，增加一个新的符号对象。在弹出的对话框中，符号名称还是不做改变，但是符号的Type（类型）要设为Animation（动画的），点击OK按钮确定即可，如图07所示。

图07 增加新符号对象

第九步：点击确定后，会自动进入这个动画Symbol的编辑区。从符号库中选择刚刚制作好的图形Symbol，也就是那个正方形，将其拖到动画Symbol的编辑区，在正方形这个Symbol处于选中状态的情况下，打开Info（信息）面板，将其中的W值变为1，也就是说，将正方形这个Symbol进行水平缩小变形处理了。接着，再次拖动一个正方形Symbol到动画编辑区，同样打开Info（信息）面板，将其中的W值变为144（注意：一定要宽于编辑区的场景宽度），好了，看看现在在动画Symbol的编辑区的两个对象吧，如图08所示：

图08 动画Symbol编辑区的两个对象

第十步：同时选定这两个已经变形处理的的正方形Symbol对象，点击快捷工具栏的对齐选项按钮，让这两个对象左对齐，并且水平方向居中对齐（图09鼠标所点击就是水平居中对齐按钮），对齐各选项如图09所示，在上部快捷工具栏有相应的快捷按钮。

图09 快捷工具栏的各个对齐选项按钮

第十一步：经过对齐处理的两个Symbol对象，如图10所示。

图10 对齐处理后效果

第十二步：同时选定这两个Symbol对象，执行菜单命令“Modify--Symbol--Tween Instance”，在随后弹出的对话框中进行设定：将Steps（动画步骤数，也就是所需帧的数目）设为“11”，
（请注意这个数目的设置，数值的大小和你将来生成的打字效果动画是否逼真有着绝对密切的关系，采用11的缘故是，我们刚刚输入的文字字符数为11个，呵呵，明白了？！是啊，最好与你的字数相同。还有一点需要提示：考虑到模拟逼真的效果，可以在现有的字符数上加1，这样就多出一个空格字符来了~~这个不需要多作解释了吧？！）
记得一定要勾选“Distribute to Frames”前面复选框的对勾，只有这样才能产生动画效果啊！具体设定如图11所示。

图11 生成动画设定

第十三步：好了，一切设定完毕，点击OK按钮确定即可，这样我们就完成了一个伸缩动画的制作，关闭动画Symbol的编辑窗口，返回到主编辑区。

第十四步：打开Layers（层）面板，点击右下角快捷按钮的增加新层按钮，这样会自动添加一个新层“Layer2”，层的名称我们不需要改变，如图12所示：

图12 增加新层

第十五步：选中Layer2层，打开Library（符号库）面板，将我们刚刚做好的动画Symbol拖到编辑区，这时候会弹出一个警示框，如图13所示，意思是提醒你编辑区目前只有一帧，但是现在引入场景的是一个动画，是否需要自动增加帧来放置动画？当然我们要点击YES按钮了，这样将来的动画效果才能出现啊！

第十六步：调整动画Symbol在编辑区的位置，使其恰恰占满整个编辑区为宜，如图14所示。

图14 调整动画Symbol的位置

第十七步：好了，现在我们可以看到编辑区下部的快捷栏上的动画播放器已经由灰色不可用变成了黑色可用状态，这样可以点击播放按钮来看看目前的动画效果。不满意？什么效果也没有？呵呵，当然，因为我们还没有完工啊~继续！

第十八步：（注意：如果你刚刚测试动画的话，进行这一步之前一定要确保你现在处于动画的第一帧的位置。不然就功亏一篑了~~）选中处于Layer1共享层的文本对象，执行快捷键“Ctrl+X”剪切它，接着选定位于Layer2层的Animation（动画）对象，然后执行菜单命令“Modify--Mask--Paste as Mask”，好了，一切OK了~~不要吃惊，现在再次点击播放按钮测试你的动画吧~~:) 看看打字效果是不是已经出现了？不要骗我啊？呵呵……

第十九步：如果感觉动画速度过快的话，打开Frames（帧）面板，配合Shift键，同选定从Frame1到Frame13的所有帧（有人可能会问，刚才明明是11帧啊？不错，这是FW刚刚自动为我们加上的啊~和我们没关系的！），然后在右侧的任意一个数字“7”上双击鼠标，在弹出的帧速率调整框里，将“7”改动一下，然后测试效果，不满意的话，可以继续调整，如图15、图16所示。