[原创]Flash全站的技术应用(五)—想做最流行的新浪图片轮换效果的进来(时间轴版)

HBrO

前言
笔者之前写了四篇Flash全站的技术应用文章：
http://www.blueidea.com/tech/multimedia/2006/3987.asp
但是内容相对比较枯燥，技术也没有跟表现很好地结合，所以，也许不能引起大家的兴趣。
从该篇文章开始，笔者将给大家介绍Flash全站中多媒体方面的应用。估计能引起大家兴趣。就该篇文章来说，我就看到有不下20人问过怎么做了。

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

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

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

HBrO

整个程序的流程：
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这个把新图片放到旧图片的操作不变。

[ 本帖最后由 HBrO 于 2006-9-10 10:53 编辑 ]

HBrO

具体做法：
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
                        descriptions=imgNode.childNodes[0].nodeValue //这是图片的文字描述
                        trace("description:"+descriptions)
                        imgabbrs=imgNode.attributes.a //这是缩略图的路径
                        trace("imgabbr:"+imgabbrs)
                        imgs=imgNode.attributes.s //这是源图的路径
                        trace("img:"+imgs)
                }
                play();  //分析完毕，可以让时间轴播放
        }else{
                trace("loading error!")
        }
}

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

HBrO

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

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

2.3 这里我们将通过复制graph载入列表中的所有图像。名称将按graph0，graph1的规则来命名。因此，在这里的帧先定义一个设置图像可见性的函数。
function setImage(imgIndex){
  for(var i in _parent.imgabbrs){
    this["graph"+i]._visible=false
  }//先把所有图片隐藏
  this["graph"+imgIndex]._visible=true //把需要显示的图像重新显示出来
}
然后把loadPic这一MC复制一个到新图片所在的图层，实例名为thisPic，并让两个loadPic重合。
2.4 第二帧的“动作脚本”图层里加入载入图片的代码：
stop();//首先，还是先让时间轴停下来，图片载入完毕后再播放
lastPic._visible = false;//在载入之前，还是先把两个图片容器隐藏，以免因加载延迟而导致有不好看的效果
thisPic._visible = false;
var mcL:MovieClipLoader = new MovieClipLoader();//这里使用MovieClipLoader类来载入图片，方便监测图片载入完成事件
for (var i in imgabbrs) {//把存放图像缩略图信息的数组枚举一次。
        var tp:MovieClip = thisPic.createEmptyMovieClip("graph"+i, i);
        var lp:MovieClip = lastPic.createEmptyMovieClip("graph"+i, i);//对thisPic和lastPic同时创建一个空的mc，来载入相应的图像
        mcL.loadClip(imgabbrs, tp);
        mcL.loadClip(imgabbrs, lp);//把图像同时载入到thisPic和lastPic中。
}
var loadListener:Object = new Object();
mcL.addListener(loadListener);//给mcL添加侦听器，监测图片载入情况。
var loadCount:Number = 0;//该变量用于记录载入了多少图，一开始为0；
loadListener.onLoadInit = function(target_mc:MovieClip) {
        loadCount++;//载入一张以后，对记录载图数量的变量加一。
        target_mc._width = thisPic.graph._width;
        target_mc._height = thisPic.graph._height;//每张载入完成以后，设置图片尺寸等于图片容器的尺寸
        //考虑到这么设置会导致比例失调，加上下面这几句来实现按比例缩放。
        var scale:Number=Math.min(target_mc._xscale,target_mc._yscale)
        scale=Math.min(scale,100) //如果载入的图片尺寸比较小，放大后失真明显，可以加这句控制下，不能把图像放大。这个看你个人的喜好了。
        target_mc._xscale=scale
        target_mc._yscale=scale
        //--------
        if (loadCount>=imgabbrs.length*2) {//每个图像容器thisPic和lastPic都要载入imgabbrs这个数组的所有图片，故当图片载入数量达到imgabbrs.length*2的时候，意味着所有图片加载完成
                play();//便可以转到下一帧了
        }
};

[ 本帖最后由 HBrO 于 2006-9-10 11:04 编辑 ]

HBrO

这里，我再对上述代码的两个问题作出解释：
1 本代码忽略了loadListener的onLoadError的处理，因此，只要有一个图片载入失败，程序就不能运行下去。如果该问题不能忽略，那么就需要再加代码了。当响应onLoadError事件时，至少要运行loadCount++以及检查loadCount>=imgabbrs.length*2。
2 使用onLoadInit事件而不用onLoadComplete事件：onLoadInit是在Movie载入了第一帧的数据并分析以后执行的。而onLoadComplete则是数据传输完成时执行的，此时Movie数据没经过Flash分析，连图像尺寸都无法获得。笔者曾为此问题头痛了半个小时，原来对于JPG这些只有一帧的Movie来说，onLoadInit居然会发生在onLoadComplete之后，只有响应了onLoadInit事件，才能获取图像尺寸。

HBrO

3.1 到显示图片了。先在第三帧里初始化一下thisIndex和lastIndex值，这两个值分别控制两个图片容器显示哪个图片。
第三帧代码：
var thisIndex:Number=0
var lastIndex:Number=-1
其实是一开始没有旧图片，所以lastPic里头实际上是不显示任何图片的。正因为如此，这一代码只运行一次。就把它单独放到第三帧了。
第四帧就正式显示图片了。而且每一次切换都要重新调用一次：
thisPic._visible=true;
lastPic._visible=true;
thisPic.setImage(thisIndex);
lastPic.setImage(lastIndex);// setImage刚在是loadPic里头写好的函数，控制数组里第几张图片显示
3.2 进入图片停止状态。加一段比较长的时间轴。笔者加到第42帧，并在42帧里加入代码：
lastIndex=thisIndex //让下一次新图片放到旧图片的位置。
thisIndex=(thisIndex+1)%imgabbrs.length //显示下一张图片，%运算让图片显示最后一张后，可以回到第一张
3.3 在44帧里添加帧代码：gotoAndPlay(4);
一个切换周期完成。
此时，运行影片，如果图像列表和图片都没有错误的话，图像就会轮着显示，但是现在的效果很生硬。是因为还没有遮罩动画做过渡。

HBrO

4.1 要添加遮罩了。在遮罩图层的第一帧里创建一个mc，元件名和实例名均为mask。接着在里头添加这么一段形状补间动画：


其中，时间轴上的首尾两帧均加上stop();
主时间轴的第四帧追加：mask.gotoAndPlay(2);
此时运行，效果就不再生硬了，是一个简单的遮罩动画切换效果。
但是，为了更方便地实现随机效果，这种刚才笔者不推荐的做法就不再用了。刚才只是为了方便大家测试效果而已。

5.1 把时间轴改成下图的设置：

动作脚本中每一帧都是写：
stop();
mask.gotoAndPlay(2);
而遮罩的mc这一图层的不同帧都放置一些跟刚才的形状补间类似的MC动画，实例名均为mask。最好动画的开头都不跟图片容器有接触，结尾则把整个图片容器覆盖。达到遮罩显示新图片的效果。
然后，主场景第四帧控制mask的代码也要跟着改变，把mask.gotoAndPlay(2);改为mask.gotoAndStop(1+random(mask._totalframes-1))。于是每一次切换，mask就会跳转到不同的帧。
5.2 修复一个Bug：
笔者以为已经成功的时候，测试才发现，有些时候还是不能自然过渡。一直以为是动画效果的问题，调来调去，还是不行。好不容易地，笔者通过输出每次跳转的帧才知道，原来当两次跳转的位置一样的时候，遮罩动画动不起来，因为没有发生帧跳转。为此，笔者想到了用如下方法调整：
把随机跳转代码转移到mask里头，在mask里添加最后一帧，其中，在遮罩的MC图层里随便放入一些图形，但是不要跟图片容器重叠。该帧的动作脚本图层添加代码：gotoAndStop(random(_totalframes-1)+1)，跳转到除最后一帧的任一帧里头运行遮罩动画效果。然后，主时间轴第四帧中的最后一句也相应地改为mask.gotoAndStop(mask._totalframes)，让mask先跳转到最后一帧，再随机播放效果。这样，哪怕两次随机的值一样，帧也会发生跳转，过渡动画一定可以播放成功。

这里需要说明一点的是，如果你在2.2步创建的graph元件不是矩形或者Alpha不等于100的话，那么，当图形因为比例问题而不占满整个graph的时候，旧图片将有可能因为新图片面积小而不会被完全覆盖，在下次轮换的时候，就会看到很生硬的图片消失效果。所以，笔者建议大家的graph元件最好是个全不透明的矩形。

至此，自动过渡播放的效果已经实现了。下面就是按钮控制的实现。

HBrO

6.1 按钮功能的实现：
如果要添加按钮功能，首先就得添加按钮，这个道理连小学生都明白。然而，it's easier said than done，具体如何创建按钮，就不是那么简单了。因为图像的数目是不确定的，因此需要动态创建。
创建按钮其实只需要在载入全部图像进入第一轮显示的时候创建一次就可以了，因此，可以把该段创建按钮的代码放在第三帧。为了让美工高手能有发挥自己才华的机会，笔者在这里就不用代码写按钮了，而是先在库里手动创建一个，接着通过attachMovie载入。
为了让按钮的深度更好管理，笔者建议大家把所有按钮载入到一个mc里头。于是，在遮罩层上面新建一个图层，命名为按钮。然后放置一个空的mc，元件名和实例名均为button_Field。位置根据你个人喜好而定。
接着，在第三帧追加代码：
for (var i in imgabbrs) {
        var btn:MovieClip = button_Field.attachMovie("button", "button"+i, i);//从库里载入button元件，创建方法在后面介绍
        btn._x = i*btn._width;
        btn._y = 0;//这两句让按钮横向排列
        btn.index=Number(i)+1;//给按钮定义一个属性，这个属性表示第几张图片，将在一个动态文本里显示
}
6.2 因为按钮到现在还没创建，所以大家可能不明白上面的代码有些到底是用来干啥的。
现在笔者就给大家讲述如何先创建一个按钮。
在库里右键—新建元件，命名为button，类型为mc，打开“高级”对话框，点中“为动作脚本导出”和“在第一帧导出”。
在该元件里，创建两个图层。

其中，按钮图层放一个按钮，添加代码：
on(release){
        _parent._parent.lastIndex=_parent._parent.thisIndex //让新图片放到旧图片所在的地方
        _parent._parent.thisIndex=(index-1) //获得新图片的索引
        _parent._parent.gotoAndPlay(43) //跳转到43帧，从而跳过42帧的自动切换代码
}
文字图层放一动态文本，变量名为index
现在，测试一下，基本效果就出来了，但是还有一个小Bug，就是当图片切换效果动画还没完成的时候，马上切换下一个图，动画效果的过渡就不自然，解决的办法有两个，第一个很简单，就是把44帧的代码拖后一点，但是不能从根本上解决问题，第二个办法相对复杂，将在下一帖再作介绍。

6.3 从根本上解决上述的小Bug：
新浪的新闻图片轮换里，如果遮罩效果运行的时候，点了别的图片的话，Flash会等效果运行结束，就马上切换到所点到的图像。因此，在这里，我们应该让控制主时间轴帧跳转的代码gotoAndPlay(43)放在效果运行结束以后。
那么，效果运行结束之后，怎么知道之前点了按钮呢？这个很好处理，只要设一个布尔变量havePressed=true就可以了。动画效果结束以后，检查havePressed的值就可以了。因此，我们还需要在开始切换图片的时候，要让havePressed变回false，否则即使下次不点按钮，也会在遮罩效果结束后，马上切换到下一图。
但是，这样又会有新的问题。如果在遮罩效果运行结束后，已经检查了havePressed，再点切换按钮的话，检查havePressed的操作就不能再在点击按钮时进行。导致立即切换图片的操作失败。
由此可见，效果运行时和效果运行结束两种状态需要分别处理。故还需要定义一个布尔变量，存放当前的效果运行状态是运行时还是运行结束。在遮罩效果开始时，设置running=true，运行结束，让running=false。
于是，要修改代码的地方就比较多了。
首先，按钮代码需要改为：
on (release) {
        _parent._parent.lastIndex = _parent._parent.thisIndex;
        //让新图片放到旧图片所在的地方
        _parent._parent.thisIndex = (index-1);
        //获得新图片的索引
        if (_parent._parent.running) {
                //如果遮罩效果正在运行
                _parent._parent.havePressed = true;
                //主时间轴不能直接跳转，而要等到效果运行结束后，检查到havePressed=true时才可以
        } else {
                _parent._parent.gotoAndPlay(43);
                //跳转到43帧，从而跳过42帧的自动切换代码
        }
}
主时间轴的第三帧声明两个布尔变量：
var running:Boolean;
var havePressed:Boolean;
主时间轴第四帧为切换周期的开始，遮罩效果处于运行时状态，而还没点击过按钮。故追加：
running=true;
havePressed=false;
之后，在每个遮罩动画效果运行结束后，要让running=false，因为运行已经结束。并且检测是否在效果运行这段时间内点过按钮。因此都追加代码：
_parent._parent.running=false;//running是在主场景里声明的，故需要指向于主场景
if(_parent._parent.havePressed){//假如在效果运行时点了按钮，根据按钮代码，该值一定为true，否则就是false
  _parent._parent.gotoAndPlay(43);//检查到点过的话，就在效果运行结束的这一刻，马上切换图片
}

至此，整个图片轮换的效果完成了。但是，大家也许会提问，为什么那些很眩的百叶窗效果，丰富多彩的形状变化还没做出来啊？其实那些都是在遮罩mc里做。笔者在这里只拿了个最简单的效果作为例子，大家完全可以根据自己的需要，把那里的效果换成自己想要的效果。如果想了解这些效果具体怎么个做法，那么，大家不妨研究下笔者一年前的教程：
http://bbs.blueidea.com/viewthread.php?tid=2272971&page=

8765004

效果不错呀,不过加载稍微慢了一点,如果图片规格小些或数量少些的话,会快很多的,你的演示是11张图片

HBrO

嗯,是啊.这么尺寸的图,15K以下质量就很差了.

HBrO

已换成只有4个图的了.

HBrO

旧的教程本来想提供闪吧链接的,但是没有办法搜索回来,就只好先用着蓝色理想那些了,不便之处,敬请见谅.

gongjinglong

哈哈，楼主，我以前做的一个怎么和您的做法差不多呀，我当时才初学flash,都不知道有闪吧，看到新浪的图片切换，便很想做个放在自己的网站上，于是我就自己一个人在那里蠢想，嘿，最后竟还真让我想出来差不多的效果了，那时真是充满了成就感啊！正准备拿出去炫耀时，却发现闪吧上早就有人做出了纯as版，佩服之余，心也凉了半截，后来都没勇气提了，但这件事却真是让我印象深刻呀，自己想出来的就是觉得好，所以后来我在自己的网站上一直没撤下来。我回此帖也没别的目的，是您的帖子勾起了我的回忆。
不信您可以看一下：http://gongjinglong.mm9mm.com
肯定比您的是差了许多，但还是有一些效果的。那个免费空间的速度好慢！
如果您看了可不要笑我的网站，那可是我一开始学flash时做的，好久没更新了。

[ 本帖最后由 gongjinglong 于 2006-9-12 16:32 编辑 ]

HBrO

从你的效果来看,应该跟我的教程有相同之处,但是,切换的效果,我是用AS做的,教程里提供的动画效果只是一个简单例子,方便读者阅读.

binchenglz

呵呵，不错

cuiyysw

留名...哈哈

HBrO

下篇打算写Flash播放wmv的,但是可惜服务器好像有点问题.有的视频本地可以,网上不行了.
http://hbro.cincn.com/cindex.htm#contents=video

amrabit

照着楼主的帖子做练习来着，这个可是 “descriptions=imgNode.childNodes[0].nodeValue”怎么也trace不出值来，改成
“descriptions=imgNode.childNodes[0].firstChild.nodeValue”
就可以了，没有弄明白是为什么

amrabit

请问楼主imgList.childNodes与imgList.firstChild有什么区别呀？trace后的结果是一样的