Fireworks创意遮罩动画制作
本例使用fireworks遮罩效果制作动画,对遮罩层的制作是本例的关键。
本实例用到的一些基本操作包括:钢笔工具、帧(frames)面板、羽化填充(feather)、遮罩(mask)。
制作这类遮罩层有两种思路:
1、将人物脸部精确的抠出来,转成灰度,然后使用反色。用这种方法做的效果可能是最好的,能够以人物面部的明暗影响滚动的文字,使文字若隐若现,但完全在fireworks中做是比较困难的,尤其是在抠图上最好能借助pototshop,以达到最完美的效果。
2、使用圆形工具和钢笔工具绘制出脸部的大概轮廓,使用羽化填充制作遮罩层。
这里我们采用第二种思路,以下边左边的遮罩动画为例,讲述这种创意动画的制作方法。至于第一种思路,有兴趣的朋友可以自己试试。
step1: 打开一幅人物图片如图1。最好选择脸部轮廓较明显的图片,这样更方便完成这个效果。点击层面板上的小三角形,选择“share this layer”,将该层置为共享层。
step2:新建一层,选择圆形工具,去掉填充色,只要边线的颜色,拖出一个近似于脸部的椭圆,然后用钢笔工具在椭圆上相对于脸部不规则地方添加几个控制点,调整如图2。在这一步中尽量放大图像视图,这样有助于做出比较精确的遮罩层。(请参阅贝赛尔曲线造型操作详解)
图2
step3: 选择上一步绘制好的路径,使用羽化填充,并且去掉边线,如图3。注意一定要用黑色填充,遮罩层的最终效果如图4所示:
step4:用文字工具输入一些文字如图5。
图5
选择该文字,按f8键,将其转化为符号,在弹出的对话框中选择graphic,取名为symbol 1,如图6。
图6
step5: 从library面板中托出两个symbol 1,排列成如图7一样的位置。注意两个symbol 1之间结合最好和谐融洽一点,这样在做动画时就会比较流畅。
图7
step6: 同时选择两个symbol 1,执行“modify/animate/animate selection”命令(快捷键alt+shift+f8),弹出如图8的对话框,将frames参数调为8,点击ok,两个symbol 1成为了一个整体。图9是此时的帧面板,自动产生8帧的动画。
图8 图9
效果如图10所示。
图10
step7: 选择前面绘制的遮罩层,在层面板中调整成顶层,然后同时选择遮罩层和symbol,执行“modify/mask/group as mask”命令,这时的整个图层如图11所示。
图11
step8: 现在基本工作已完成了,最后在输出时选择“animated gif”格式就ok了。看完本例后,赶快扩展你的想像空间吧,用简单的技术做出更有创意的动画,如前面的眼睛动画,png图下载
()
- · QQ.COM的天气预报代码
- · 用Dreamweaver MX建设神奇网页图片超链接
- · CSS在IE和Nascape的显示差别
- · 把按钮藏起来 谈制作Flash课件时的隐形处理
- · 加密页面代码生成器
- · 巧用Fireworks MX 2004打造马赛克特效文字
- · Flash MX 2004升级 AS改进是重头戏
- · 炎夏清凉一把!Fireworks绘制纸折扇
- · 写实:Fireworks中显示器的绘制
- · 在网页中控制wmplayer播放器
- · 古代智慧结晶 用Fireworks“铸造”古钱币
- · Fireworks写实作品绘制实例:我的手机
- · 拖出自己的精彩—谈Flash MX课件中的拖动
- · Flash实例精通:教你制作马赛克效果
- · 对CSS类及id的规范化命名
- · HTML語法大全
- · 网页经典代码集 高手必学(跳楼推荐)
- · 网页配色之黄金分割法
- · 丰富多彩 有声有色的Flash互动动画世界
- · 关于Dreamweaver乱码问题的解决方案
- · Fireworks MX之旅:滤镜
- · Fireworks MX制作下拉菜单
- · Fireworks制作空间环绕文字动画
- · Fireworks 巧制生肖鼠票
- · Fireworks制作透明按钮一例
- · 巧用Fireworks遮罩做平面设计
- · Fireworks MX制作像素动画
- · Fireworks MX 2004新功能
- · Fireworks MX 2004新功能色彩替换详解
- · Fireworks MX 滤镜讨论
- · 巧用FW MX的笔触制作宣纸书法
- · FW MX和Flash MX的亲密合作
- · Fireworks MX 模拟灯泡效果
- · Fireworks MX 制作燃烧效果
- · Fireworks 绘制国画牡丹
- · Ultradev实例教程:1.2 Ultradev的特点
- · Ultradev实例教程:1.1 什么是Ultradev
- · Ultradev实例教程:6 Ultradev使用心得
