您现在的位置： 网页制作教程网 >> 网页制作 >> Fireworks教程 >> 文章正文
作者:佚名
来源:不详
热度:
2007-4-17 13:31:23
长时间以来，总是有人在探讨在FW中如何制作打字效果的动画这个问题。大部分的朋友认为，使用FLASH可以轻松的实现这一种效果，但在FW中似乎要困难些，好像除了一帧一帧的累加以外，就没有更好的办法了。原来也是一直这么来理解的，但是今天无意中找到了一种在FW中实现打字动画效果的更好的方法，请随我来：
【打字动画效果图】
第一步：打开FW，新建一个文件 ，文件的大小为140x20像素，背景色自定，这里采用了黑色。
第二步：选取工具箱中的Text Tool（文字工具），在编辑区输入你想要出现打字效果的文字，这里我们输入了“风云设计眼欢迎您的到来”；字体采用“宋体”；字号采用12Px；颜色自定；字体边缘效果选择“No Anti-Alias”；对齐方式采取默认的左对齐方式。
第三步：选中编辑区的文本对象，执行快捷键“Ctrl+Shift+D”，原地复制相同的一个文本对象，然后打开Fill（填充）面板，将复制的文本对象的颜色做一改变即可，然后向任意方向移动1像素的距离，调整好的效果图如图01所示：
[注：]此步骤可以略去，直接进入下一步，如果你不需要对文字对象做改变的话！
图01 在编辑区输入相关文字
第三步：选中文字所在的层，点击层面板右上角的弹出菜单按钮，在随后出现的弹出菜单中，执行“Share This Layer”（共享这一层）命令，将文字所在层变为共享层，如图02所示。
$False$ $False$ $False$ 请注意这个数目的设置，数值的大小和你将来生成的打字效果动画是否逼真有着绝对密切的关系，采用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所示。
图15 同时选定所有的帧
img src="/Article/UploadFiles/200704/20070422225920707.gif" onclick="get_larger(this)" />图16 修改帧速率大小
第二十步：动画已经制作完成了，剩下的步骤就是输出看效果噢！输出时记得输出格式变为“Animated Gif”啊，不然动画效果就看不到了……
[后记：]
本文学习的主要是一种思路或者说是一种方法。制作这种动画效果的方法也许还有更好的，这就需要我们继续去探索……
对于如例图所示的打字效果，本文还有一点没有涉及到，大家可以自行思考解决的办法~开动脑筋，创造无限啊！
我来说两句：
推荐文章
相关文章