前言

从该篇文章开始，笔者将给大家介绍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这个把新图片放到旧图片的操作不变。

具体做法：

0.1、准备好外部的文件:在你的硬盘里新建一个文件夹，里头放入一个图像列表文件list.xml，使用如下格式

<?xml version="1.0" encoding="GB2312"?><images><i s="images/v82008.jpg" a="images_abbr/v82008.jpg">未被直播的超女复活赛</i><i s="images/060820110116v82009.jpg" a="images_abbr/060820110116v82009.jpg">吃“最便宜的盒饭”</i><i s="images/060820110131v82010.jpg" a="images_abbr/060820110131v82010.jpg">本报记者亲历长沙“超级女声”台前幕后</i></images>

根据这里的路径放置图像文件。
PS:这样的写法其实名称不好看明白，但当初笔者考虑传输时间，就在变量这里对xml文件做了压缩。
0.2 、新建一个Flash文档，大小定为300*225（参考），保存为picsExchange.fla，位置跟list.xml在同一目录。

1.1、 开始进入读取分析XML的工作，并把所有信息存放于数组里头，这里，笔者创建了三个数组：descriptions，imgabbrs，imgs。
1.2 、在第一帧里加上代码：

stop(); //因为是时间轴版，所以需要先停止播放，等xml的读取和分析完成以后才可以进入时间轴的第二段
System.useCodepage=true //防止中文乱码
var imgList:XML=new XML() //创建读取xml的对象
imgList.load("list.xml") //读取list.xml文件
var descriptions:Array
var imgabbrs:Array
var imgs:Array  //定义三个用于存放图像信息的数组
var imgsNum:Number=0; //放置图片数目的变量
imgList.onLoad=function(success){
       imgList.ignoreWhite=true
       if(success){
              descriptions=new Array()
              imgabbrs=new Array()
              imgs=new Array() //该步用于初始化数组，在重新读取的时候，把数组里的内容清空。
                imgsNum=imgList.childNodes[0].childNodes.length
              for(var i in imgList.childNodes[0].childNodes){
                     var imgNode:XMLNode=imgList.childNodes[0].childNodes[i]
                     descriptions[i]=imgNode.childNodes[0].nodeValue //这是图片的文字描述
                     trace("description:"+descriptions[i])
                     imgabbrs[i]=imgNode.attributes.a //这是缩略图的路径
                     trace("imgabbr:"+imgabbrs[i])
                     imgs[i]=imgNode.attributes.s //这是源图的路径
                     trace("img:"+imgs[i])
              }
                play();  //分析完毕，可以让时间轴播放
       }else{
              trace("loading error!")
       }
}

1.3、 确定所有内容正确输出以后，就可以进入加载图片的操作。

2.1、 按照下图创建三个图层。

其中动作脚本层就是1.2中输入代码的图层。
2.2 、在旧图片的图层里，新建一个MC，命名为loadPic，实例名为lastPic，并让该MC的注册点放在主场景的左上方。然后双击进入该MC，在里头再创建一个MC，元件名称和实例名均为graph。

[1] [2] 下一页