gggds 发表于 2009-12-27 13:09:12

Fireworks 4 制作电影文字

Fireworks4增加了许多新功能,使我们在做图方面更加得心应手。尤其这次在MASK和TWEEN方面的改进使我们能做更多的动画和产生更多的效果。像这个电影文字,仅仅需要几个步骤就可以为你的网页增添一副不错的GIF动画。
http://it365cn.com/articleimg/96-1.gif
1。我们选择File->Import导入一副PNG图片,与Fireworks3不同的是,Fireworks4在图像的导入方面更加自由,我们可以直接导入,而不用做过多的设置。2。用选择工具选择这个图象,选择Insert->Convert to Symbol...,在Name栏中给这个对象取一个名,这里我取的是movie,在Type中选择Graphic。将图象转成实例,以方便我们做Tween效果。在Fireworks4中增加了动画实例,它保留了动画属性,当我们重复使用这个动画实例时,在Object标签中可以设置它的动画属性,比如移动,旋转,透明...等等。3。选择文字工具在图片上输入文字,字体的大小,风格可以自行设定,颜色选择白色。这里我输入的Fireworks ;字体是Arial Black ;字体大小为51;选择加粗。选择文字与图片,选择Modify->Mask->Group as Mask ,将字体作为遮罩,遮罩下面的图形。在这一步里,我们得到的是一个透明的图形。这是因为我们没有对它设置好,我们在层标签中可以看到同Photoshop中一样的是,蓝色的方框包围的是层,旁边黑色的是遮罩,遮罩与图层之间有一个链条,如果我们单击链条取消链条状态的话,我们就可以单独对图层和遮罩进行修改。这里我们单击遮罩,打开Objec t标签,Object标签根据你选择的不同显示不同的状态。在Fireworks里文字属于矢量遮罩,所以Object标签显示的是矢量遮罩的参数,其中Path Outline是路径轮廓,在这个模式下会以文字的轮廓去裁切图形,使图形作为文字的填充。而Show Fill and Stroke会显示文字的填充和描边,你试试可能会有不同的效果。Grayscale Appearance灰度显示是默认的选择方式,在这种方式下图片会根据遮罩颜色的不同深度使图像产生特别的效果,它就同Fireworks3中的Mask to Image一样的。
http://it365cn.com/articleimg/96-2.gif
 
http://it365cn.com/articleimg/96-3.gif
4。由于我们的文字是白色的,用白色作为遮罩会使图片变成完全透明,(黑色使图像不透明,而不同的灰度使图片透明度不一样),所以我们的图片完全不见了,我们选择Path Outline。用文字裁切图片。 5。为了产生透过文字看到图片滚动的效果,我们要对下面的图片做滚动的动画。在层标签中取消链接状态,选择图层,这时层眼睛旁出现一只铅笔,表示现在是图片编辑模式下。用选择工具选择图片,将它移当文字左边,直到图片不可见,选择Edit->Clone .克隆这个图片,按住Shift键向右拖动克隆的这副图,同样使它在文字右边直到图片不可见。选择Modify->Tween Instances,设置Steps:10;记住一定要勾选Distribute to Frames。将产生的帧分配到帧面板中,而不是显示在画布上。将产生的帧分配到帧面板中,而不是显示在画布上。7。最后我们得把我们的图导出成GIF动画,选择Fill->Export Preview.在出现在Export Preview中在Options的 Foramt的下拉列表中选择Animated GIF这是必选的。选择Export...在导出对话框的Name中给图片取一个名字,保存类型选择:Images Only;Slices:Export Slices;在它下面的多选框中选择Selected Slices Only,取消Include Area Without Slics。这样我们就只会导出适当的动画区域,而不会导出多余的区域。
http://it365cn.com/articleimg/96-4.gif
页: [1]
查看完整版本: Fireworks 4 制作电影文字