如何在Flash中使图片图片循环移动显示

作者:蓝柯

  在网页中我们常常看到一组图片横向的循环移动显示,但是这个循环并不连贯,那么怎么才能连贯的循环显示呢?
这个问题有很多朋友曾经问过我,我的回答是只要用心观察这个运动就可以实现,并不是什么难事。
我们以一个案例来看一看怎么做,比如我们需要在一个468×60的广告条上,循环显示A~Z。

◆常规的做法是:

最终的输出效果:

演示

可以看出这种动画循环并不连贯,通过对这种运动基本原理的观察,我们不难发现一下面的新做法。

◆连贯循环的新做法:

分析:

按常规方法的前三步建立首、末帧,我们可以发现这个循环不是一个完整的循环过程。末帧应该是一下状态才能使字母“A~Z”完整的走完一个循环。

而这样虽然能走完一个完整的循环,但是即使这样,和后面的循环也不连贯,怎么解决呢?用心的朋友不难发现上面的图片状态和首帧的图片状态刚刚好可以拼合成一个完整的连接。

想到了吧,只要我们拼凑的合适,最后一帧可以和首帧吻合,通过Flash的循环播放,可以实现图像的连贯循环。

我们来看看具体的做法:

从步骤2、3中可以对比看到,步骤3所缺的是“A~S”(根据具体情况而定,也可以做适当调整),我们在库中给“A~Z”后面添加。

为使定位更加准确,我们添加一个辅助层(曾内容为我们刚才制作的同位置首帧图像),来帮助我们定位好首末帧的位置。

最终的输出效果:

演示

◆应用:

同样的道理,我们可以作出连续象素图像的图片循环移动显示的效果,比如n张小照片横向运动循环显示。
比如说我们要把468×60广告条变为一个全景自动循环展示。(全景一般情况利用Action有其他更好的做法,在此我们只针对我们今天要讲的话题,仅供参考。)
全景图片:

那么对通过前面所讲的总结可知,该图像放入Flash的库中的时候,应该比原图像后面多出468×60象素的部分,通过拼接,我们输出Flash的库中所需要的图像。

最终的输出效果:

演示

通过详细的图文说明,大家可以看到,其实原理很简单,耐心、细致地在生活中注意观察,将会对我们有很大的帮助。

关于Gif格式透明背景图片的“毛边”问题

http://www.iblue.cn/bbs/Announce/Announce.asp?BoardID=11&ID=11164

========================================
mayi_yk 发表于 2004-12-22 12:12:34
为什么我把文字存成GIF格式会有毛边出现呢,很难看呀?我该怎样消除毛刺!!????

为什么我把文字存成GIF格式会有毛边出现呢,很难看呀?我该怎样消除毛刺!!????谢谢蓝柯帮我一下吧!!!

========================================
lanke 发表于 2004-12-22 19:53:09

  为什么会出现这样的问题呢?源于你对Photoshop的一些常用设置还不了解,对Photoshop最基本教程中几种常用图像格式还不熟悉。希望以后看教程、书籍的时候一定要细心啊,另外在Photoshop操作中,也可以自己多试试啊,比如我们网页设计常用的Jpg、Gif文件,保存的时候注意他们弹出了那些对话框;有哪些选项;分别是什么功能等等。
  最基础的东西,就是解决实际问题的知识库。

  那么你这个问题具体出在什么地方了呢?请看下面的讲述。
  比如说,我们需要在一个蓝色背景(或近似蓝色的花纹背景)中插入一个透明Gif图像。

首先,我们Photoshop中做好这个图像。

存储为Gif图像,会出现这么一个选项:

问题就在这里了,这是干什么用的呢?这酒是对透明图片边缘的处理设置,由于象素图的特性,以及Gif图像的性质,透明背景和实际图像的边缘是一个一个象素点构成,而这些象素点不能呈现半透明的情况,而我们Photoshop一般边缘是进行了柔化处理的,实际上边缘的一些象素在Photoshop文件中的确是半透明的那种比较柔和的状态。
而在生成Gif时,这种柔和的半透明区域就面临着透明、不透明的选择。
杂边(指这种柔和边缘的区域)选择为无和杂边选择为蓝色生成的图像在网页中的效果截然不同:

能从我的讲述中看出一点规律了么?或者总结出网页设计时,需要用到Gif透明背景图像的一些常用的处理方法了么?

========================================

希望这个帖子对曾经遇到此类问题的朋友有所启发:)