查看完整版本: 照片连续滚动效果

captain 2006-4-15 16:10

照片连续滚动效果

  本文中我们建立一个具有胶片形式的动态影视Banner,首先制作一个具有胶片效果的边框,接着使用帧面板制作GIF动画效果。主要熟悉Fireworks MX 2004中组合、帧面板、修改画布大小、动画面板等使用。[color=#ff0000]文章末尾提供原文件供大家下载参考。[/color]

[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-banner.gif[/img]
  下面我们看具体操作步骤。
  
  1) 新建一个353×51的文件,设置背景颜色为黑色,如图1。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-01.jpg[/img]
图1  新建一个文件
  
  2) 由于图像相对较小,为了方便编辑需要改变视图大小,点击"视图"菜单,选择"缩放比例"150%,如图2所示。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-02.jpg[/img]
图2  改变视图大小
  
  3) 点击工具箱的 图标,在图像上画一矩形,并设置填充色为白色,得到图3。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-03.jpg[/img]
图3  画一矩形

captain 2006-4-15 16:11

  4) 选择矩形并按Ctrl+C复制,然后Ctrl+V粘贴。并用方向键移动复制所得矩形到适当位置,按Shift键选择两者并组合,得到图4。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-04.jpg[/img]
图4  复制并组合矩形

  5) 不断重复步骤4)得到如图5所示。这样就做出了一个胶卷的样子了,下一步就为其添加一些"相片"。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-05.jpg[/img]
图5  重复复制矩形得到的图片
  
  6) 导入一个Banner.gif图片,如图6所示。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-06.jpg[/img]
图6  导入一个图片
  
  7) 选定导入的图像并点击工具箱的 图标,改变导入图像的大小使其与"胶卷"符合,得到图7。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-07.jpg[/img]
图7  改变导入图像的大小

  8) 重复步骤6)和步骤7),导入其他一些图像,并按方向键排列导入的图像,恢复到100%视图最终得到图8。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-08.jpg[/img]
图8  导入所有图像后所得图像
  
  9) 保存文件为Banner.png,下一步来制作一个滚动的Gif图片。打开Banner.png图片,单击"选择"菜单,选择"选择全部"下拉菜单,选定所有的元素。如图9所示。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-09.jpg[/img]
图9  选择所有元素

captain 2006-4-15 16:13

  10)选择"修改"|"组合",将所有元素组合成一个对象,如图10所示。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-10.jpg[/img]
图10  组合所有元素

  11)为了实现滚动效果,需要图像右边移出时,左边有图像能够补进。需要两幅相同图像来制作滚动效果。首先选择"修改"菜单,然后选择"画布"|"画布大小",修改画布大小为706×51,得到图11。
图11  修改画布大小(图片较大,请拉动滚动条观看)[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-11.jpg[/img]

  12)选择所选组合,按Ctrl+C复制后再按Ctrl+V粘贴,然后排列好两个对象并再次组合,得到图12。
图12  复制并排列组合元素(图片较大,请拉动滚动条观看)[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-12.jpg[/img]

  13)按Ctrl+X剪切所选组合,修改画布大小到353×51,再按Ctrl+V粘贴组合,将所选组合右侧与画布右侧对齐,得到图13。
图13  恢复画布大小并右侧对齐画布与图像(图片较大,请拉动滚动条观看)[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-13.jpg[/img]

  14)在开始制作滚动动画。首先选择"修改"菜单,再其下拉菜单中选择"动画"|"选择动画",得到如下图所示窗口。将"移动"设为"353",使其恰好能够左右衔接上。并将"帧"设为70,如图14所示。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-14.jpg[/img]
图14  动画窗口的参数设置

captain 2006-4-15 16:14

  15)单击"确定"会跳出如图15所示窗口,单击"确定"会得到图16。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-15.jpg[/img]
图15  跳出窗口
图16  动画元件窗口(图片较大,请拉动滚动条观看)[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-16.jpg[/img]
  
  16)打开帧面板,选择第一帧,按住Shift键并拖动至第七十帧,单击鼠标左键选定所有帧,双击帧面板右侧,修改"帧延时"为"10/100秒"。如图17。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-17.jpg[/img]
图17  选择所有帧并修改"帧延时"

  17)下一步就可以播放动画,看看效果如何了。点击绘图面板的 图标播放动画,效果如图18所示。
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-18.jpg[/img]
图18  播放动画

  18)最后一步导出图像,将做好的图片保存为Banner.gif文件,如图19所示。[url=http://soft.yesky.com/imagesnew/software/0411/08/banner.rar][color=#000000] 原文件下载[/color][/url]
图19  将图像保存(图片较大,请拉动滚动条观看)
[img]http://soft.yesky.com/imagesnew/software/0411/08/yl041108-fw1-19.jpg[/img]

爱洁的宝宝 2006-12-1 10:24

:kiss:

颖颖 2006-12-1 11:24

稍微有点小

还有在你加字的时候层没有设置为共享

爱洁的宝宝 2006-12-1 13:59

[quote]原帖由 [i]颖颖[/i] 于 2006-12-1 11:24 发表
稍微有点小

还有在你加字的时候层没有设置为共享 [/quote]


:Q我本来想删掉字的,怎么给忘记了啊~

颖颖 2006-12-1 14:15

把字体但放到一层里面设置共享吧

chinacang 2006-12-4 13:50

我的作业,哈哈

你们讨论的什么“共享”?不清楚啊,呵呵
我做出来的大小是680kb,蛮大的啊,怎么弄小了?
是不是我用的滚动的照片大的原因啊?单个照片是225kb的呢

颖颖 2006-12-4 13:53

动态图片本来就大

帧多呗

chinacang 2006-12-4 14:15

谢谢哦,呵呵
作业也加分,耶

娃娃¢ 2006-12-5 13:53

:victory:娃娃又来交作业了,哈哈,每次交都很难,这次不知道又是多少连,呵呵,多的我会删掉的!
哈哈,我做了个反向走的!!:'$

娃娃¢ 2006-12-5 14:32

作业!!!!!!!!!!!!真郁闷!!!总是交不上!:P

[color=Orange]——————————————————— 颖颖 ·专用分割线 _____。[/color]

[color=Orange]帮你把作业发上来........   by颖[/color]

[[i] 本帖最后由 颖颖 于 2006-12-5 14:44 编辑 [/i]]

颖颖 2006-12-5 14:46

辛苦娃娃了~

这么半天都发不上图来

huangli766622 2007-4-30 17:56

:'$

[[i] 本帖最后由 huangli766622 于 2007-4-30 18:07 编辑 [/i]]

welkiny 2007-5-1 20:33

回复 #15 huangli766622 的帖子

很卡的感觉~- -

jayin 2007-6-7 12:10

作业

[[i] 本帖最后由 jayin 于 2007-6-7 12:34 编辑 [/i]]

welkiny 2007-6-7 17:32

回复 #17 jayin 的帖子

不错的感觉恩~
页: [1]
查看完整版本: 照片连续滚动效果