首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > Flash教程 > 正文
图片轮换效果
来源:蓝色理想 2006年09月15日 08:46 网友评论:1条 点击:
前言

    从该篇文章开始,笔者将给大家介绍Flash全站中多媒体方面的应用。估计能引起大家兴趣。就该篇文章来说,我就看到有不下20人问过怎么做了。

    效果预览
http://hbro.cincn.com/cindex.htm#sub0=1

    这里的图片轮换效果跟新浪的那种不太一样,因为整个代码都是笔者自己写的,而且后来下了源码,发现里头的做法跟笔者的也不尽相同,它那里基本上是用setInterval控制的。转换的特效很多是用纯AS写出来。而笔者做的那个,基本上是时间轴控制,特效也不是纯AS的。从程序规范和运行效率来说,新浪那个更接近规范的程序语言,运行效率更高。从制作的方便性和直观性来说,笔者那个制作起来更为方便,更为直观,对于不是程序员出身的Flasher来说,笔者这一个更好理解。

    考虑到AS也趋向于规范性,笔者前段时间也用纯AS2.0类把这个轮换效果写成了组件。但是因为笔者多类的编程思想还不很了解,导致贻笑大方,故本篇文章就先介绍笔者这个时间轴版轮换效果的制作过程。

    整个程序的流程

    1、 该程序的图像列表是读XML的。故第一步先读取并分析XML,把相关的信息存于数组里头。该分析是时间轴的第一部分。

    2、 分析到XML以后,根据图像源,把所有图片先载入到swf,因为在图片切换的过程中,不允许有图像消失的现象或者延迟现象出现。图片是通过用遮罩效果把新的一张覆盖掉旧的一张来
实现切换的,因此需要有三个图层:一个放旧图片,一个放新图片,其中新图片被遮罩。为了不让切换时,图像有不可见的现象或者出现延迟,加载时,放旧图片和放新图片的MC里头都要先载入所有图像。然后通过设置可见性来显示相应的图像。

按此在新窗口浏览图片

按此在新窗口浏览图片

    这是时间轴的第二部分。

    3、 然后,将有比较长一段时间轴,这个其实就是图片轮换的延迟时间。

    4、 此时,就要进入下一轮的切换了。这里,可以通过attachMovie或者duplicateMovieClip放入一个载入所有图的MC,但可惜的是,这么做需要重新loadMovie,故不可取。或者通过交换深度来实现,不过每次交换深度也很麻烦,因为要重新设置遮罩。在这里,笔者将利用人眼睛的错觉来方便实现这一过程。
    具体做法如下:

按此在新窗口浏览图片

    这一切换过程完成了,一个周期结束。

    5 、接下来讲述随机效果的实现:
    如果在mask里就一个单一效果切换的时间轴动画,那么每次的轮换效果将都是一样。这里,笔者提供两种随机效果的实现方法:
    A 把遮罩做成一个MC,时间轴如下:

按此在新窗口浏览图片

    其中无标签的空白关键帧均输入代码:

stop()
_parent.play();

    在调用遮罩效果的时候,用一个随机数来控制使用何种特效:

mask.gotoAndPlay("效果"+(random(3)+1))

    笔者不推荐使用该法,因为把所有效果放在同一时间轴里容易乱,而且不知道是不是Flash有BUG,MC的gotoAndPlay函数,如果使用帧标签,容易出错。使用帧号的话,将很麻烦,要手动把关键帧标签所在的帧号(26,47,65)放在一个数组里面,一旦效果增加或者改变很大,数组又要手动修改。
笔者推荐使用的办法是:

按此在新窗口浏览图片

    每个效果都放在一个MC里头,单独控制,在效果结束后,运行

stop();
_parent._parent.play();

    6、 按钮切换的实现:
    切换过程中,显示哪个图片,可以在主时间轴通过一个变量来控制。因为有两个图片,所以就需要两个变量,笔者定义为lastIndex和thisIndex。
如果没有按钮控制,图片轮换是以图片顺序为根据的。根据上述的错觉显示法,在将要切换的时候,运行

lastIndex=thisIndex
thisIndex+=1

    对于thisIndex,如果超过了图片信息数组的下标,则需要进行判断。这将在介绍具体做法的时候提到。
如果换作了按钮,则thisIndex不是加1,而是换成按钮所传过去的变量。而lastIndex=thisIndex这个把新图片放到旧图片的操作不变。

首页 上一页 [1] [2] [3] 下一页 尾页
上一篇:纯ActionScript的Loading效果四例   下一篇:Flash 8中文版动画制作入门
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】