当前页面位置: » 丰搜网 » 文档中心 » 详细内容
钟摆式公告牌效果的制作
先参阅一下效果图：
1、新建一个文件，画布背景颜色选取白色。同时将画布大小设置稍大些；
2、使用fwmx2004的矢量工具，绘制圆角矩形，自选一种纹理效果填充，如图：
3、输入文字“织梦论坛”；
4、在圆角矩形右、左上角绘制小圆形，如图所示：
5、添加辅助形，找到该圆角矩形的中心点位置，如图：
6、在中心点上方垂直辅助线上绘制渐变效果的小圆形，以及两根斜直线段，复选该圆形及斜直线对角，组合并移至最后，使用钢笔工具，分别在两个白色小圆形上绘制曲线。如图：
7、群组（ctrl+a、ctrl+g）所有对象，一个简单的公告牌效果就简单制作完成了。现在进行动画效果的制作。
8、克隆群组后的公告牌，使用工具栏中的缩放工具，分别对画布中显示的公告牌进行旋转处理，如图：
9、复选这两个对象，并按垂直居中与水平居中进行排列，如图：
10、在层面板中先屏蔽掉右边的公告牌。再选择修改菜单、动画、选择动画命令，弹出动画属性设置窗口。进行参数的设置，如图：
11、确定后，公告牌对象自动转化为元件。双击该元件对象，在元件编辑窗口中，将公告牌圆形移至元件编辑窗口中心位置，如图：
12、返回至主编辑窗口，现在一个由左向右摆动的动画效果已形成。打开帧面板，选择第一帧。将层面板屏蔽的公告牌显示出来，并进行剪切。
13、在帧面板中新建空帧，粘贴对象至画布内。对当前公告牌进行由右至左的钟摆动画设置。选择修改菜单、动画、选择动画命令，弹出动画属性设置窗口。进行参数的设置，其中各参数与第九步相同，仅需要给旋转方向上变化为顺时针。如图：
14、将该公告牌参照第十一步修改元件中心的方法进行位置的移动。
15、这样，由右至左的钟摆动画效果就完成了，在帧面板中将gif动画效果设置为启永久，让动画连续播放。再导出为gif动画文件，最终效果图如下所示：
制作技巧提示：
①在位置调整时，比如中心点的对齐、旋转等，可以借助于fw中的辅助线。
②使用动画面板调整好旋转角度生成动画后，建议不要在帧面板中进行删除帧了操作了。如果需要调整角度，可以在画布上对元件对象进行选择右键、动画、设置，在弹出动画设置窗口中再进行调整。
fireworks制作的png源图：
出处：织梦幻影
责任编辑：juven
◎进入论坛photoshop、fireworks版块参加讨论
| | | 保持清晰的文档结构 | | | 月亮图腾教程ⅴ—最后一战 | | | x-sapce使用系列教程 | | | x-space安装系列教程 | | | 抽线以及虚线画法简明教程 | | | 创新设计 百万格子大楼 | | | discuz!转换系列教程 | | | 世界杯足球的32个变种 | | | 易上手简单图层样式扣图 | | | 一封写给mm学习linux的信 | | |
| | | 保持清晰的文档结构 | | | 月亮图腾教程ⅴ—最后一战 | | | x-sapce使用系列教程 | | | x-space安装系列教程 | | | 抽线以及虚线画法简明教程 | | | discuz!转换系列教程 | | | 易上手简单图层样式扣图 | | | 十分钟学会 xajax | | | css 菜单举一反三 | | | 利用照片制作版画简明教程 | | |
| | 蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。 特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 | | 本文总共有 10 条评论，现在显示最新的 5 条。评分：- llllllllllllllllllll + 评分人数: 4 ,平均分: 3.25
wswuming publish at 2005-12-2 18:45:14 评分2
不错啊，对于初学者是个很好的教程，顶下
bobflank publish at 2005-11-3 10:48:32
不如用flash做简单嘛。flash也可以输出gif的啊
zoufeicici publish at 2005-9-27 14:11:26 评分3
真是不错，可是我照着做都做不出来~！
xll502 publish at 2005-7-4 15:05:13 评分4
很好
我很想学这软件，你能告诉我那里有这教程下栽吗》
虽然我是学平面这块的
可我还是很想学这动漫
特别看你做的怎么漂亮
使我更想学了
谁能告诉我那里有这软件教程下栽
加我qq：154953768
8791017 publish at 2005-5-31 0:22:39
不错嘛
能想出这样的方法
查看全部评论 | | |
| 关于站点 免责声明 联系站长 版权隐私 友情链接 网站地图 京icp备05002321号 | ©1999-2006 blueidea.com. 版权所有 | |
