原文地址：Flash 图片轮换效果制作作者：pegasus827
https://www.doczj.com/doc/8416701310.html,/tech/multimedia/2006/4031.asp
效果预览：
https://www.doczj.com/doc/8416701310.html,/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，使用如下格式
s="images/v82008.jpg" a="images_abbr/v82008.jpg">未被直播的超女复活赛 a="images_abbr/060820110116v82009.jpg">吃“最便宜的盒饭” s="images/060820110131v82010.jpg" a="images_abbr/060820110131v82010.jpg">本报记者亲历长沙“超级女声”台前幕后
根据这里的路径放置图像文件。
PS:这样的写法其实名称不好看明白，但当初笔者考虑传输时间，就在变量这里对xml文件做了压缩。
0.2 、新建一个Flash文档，大小定为300*225（参考），保存为picsExchange.fla，位置跟list.xml在同一目录。
1.1、开始进入读取分析XML的工作，并把所有信息存放于数组里头，这里，笔者创建了三个数组：descriptions，imgabbrs，imgs。
1.2 、在第一帧里加上代码：
stop(); //因为是时间轴版，所以需要先停止播放，等xml的读取和分析完成以后才可以进入时间轴的第二段
https://www.doczj.com/doc/8416701310.html,eCodepage=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].nodue //这是图片的文字描述
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。
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重合。
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);
一个切换周期完成。
此时，运行影片，如果图像列表和图片都没有错误的话，图像就会轮着显示，但是现在的效果很生硬。是因为还没有遮罩动画做过渡。
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元件最好是个全不透明的矩形。
至此，自动过渡播放的效果已经实现了。下面就是按钮控制的实现。
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._https://www.doczj.com/doc/8416701310.html,stIndex=_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._https://www.doczj.com/doc/8416701310.html,stIndex = _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里做。笔者在这里只拿了个最简单的效果作为例子，大家完全可以根据自己的需要，把那里的效果换成自己想要的效果。
一些常用的PPT动画效果及设置方法 我感到PowerPoint在动画方面很不错，可以满足制作幻灯片的一般需要。下面我就从几个侧面来谈谈最常用的PowerPoint XP动画效果及实现方法。 自定义对象的动作路径 用过Flash软件的老师可能都知道在Flash里面，可以通过为一个对象画出一条路径来，然后就可以让对象按照这个路径进行动作，PowerPoint中也提供了这个让用户心动的功能。具体实现方法如下： 先选定一个对象，方法一：点击“幻灯片放映→自定义动画→添加效果→动作路径→绘制自定义路径→自由曲线”命令；方法二：单击右侧窗格中“添加效果”按钮，在弹出的菜单中选择“动作路径→绘制自定义路径→自由曲线”。然后用户的鼠标指针会变成笔形，可以在幻灯片中随意画出一条曲线，这就是所选对象的动作路径了。 上面介绍的是PowerPoint提供的动画效果，类似的效果还有很多可供选用；另外在PowerPoint中自己动手也可以制作出不错的动画效果。 为幻灯片添加电影字幕式效果 PowerPoint提供了丰富的自定义动画，用户可以合理组合动画效果，制作出相当漂亮的动画来。这里介绍在PowerPoint
中实现字幕滚动效果的制作方法： 字幕“由上往下”或“由下往上”滚动效果，可直接选取自定义动画中的“字幕式”效果来实现。方法：选定对象，单击“添加效果”按钮，在弹出的菜单中选择“进入→其他效果”，在“华丽型”栏中选择“字幕式”，最后单击“确定”即可。 字幕“由左向右”或“由右向左”滚动效果。使用上面的“字幕式”不能制作出字幕左右滚动的效果，不过可以借助于“缓慢进入”和“缓慢移出”来实现，选择效果之后还需要在“方向”下选择“自左侧”还是“自右侧”。实际上“缓慢进入”和“缓慢移出”也可以制作字幕的上下滚动(选择自“底部”或“自顶部”)。 文本框中的文本使用字幕式动画效果时，幻灯片加上适当的背景效果会更好些。 让文字与旁白同步 可以采用“自定义动画”中按字母形式向右擦除的方法来使文字与旁白一起出现。但如果是一大段文字，字的出现速度还是太快了。这时用户可以按需要将这一段文字分成一行一行的文本框，甚至几个字一个文本框，再对于每个文本框中的字，分别设置它的动画形式为按字母向右擦除，并在时间项中设置与前一动作间隔几秒，就可使文字的出现速度和旁白一致了。 让标题出现时跳几跳 这种文本的动画效果非常有趣：播放时字符一个接一个地从上方歪歪斜斜地下落，落下后每个字符还要上下反弹几次才
遮罩层与遮罩动画的制作课堂导学案 【学习目的】 1）进一步理解遮罩的概念； 2）掌握遮罩动画的制作要领； 3）能够恰当运用遮罩层再现生活中一些有趣的情境。 【学习重点】 1）遮罩概念的理解； 2）恰当运用遮罩层再现生活中一些有趣的情境。 【学习难点】 遮罩概念的理解。 【学习方法】 让学生在欣赏-模仿-分析-探究的过程中学会学习。从生活中寻找遮罩“原型”并重现，通过主动探索、发现和体验，实现学以致用。 一、概念复习 除了普通图层、引导层外，还有一种特殊的图层——遮罩层。利用遮罩功能，可以设定显示图像的哪一部分，不显示哪一部分，以便进行一些特殊处理。由此形成的动画，就是遮罩动画。 1．遮罩动画的概念 （1）什么是遮罩 遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建
一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 （2）遮罩有什么用 在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。 2．创建遮罩的方法 （1）创建遮罩 在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择【遮罩层】，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了。 （2）构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。 被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。
个个精彩 ——为幻灯片内的文字、图片等设置动画效果 新开镇一中黄林军 教学目标： ?知识目标：使学生熟练掌握设置动画效果的方法 ?能力目标：①培养学生自主学习、动手操作的能力； ②培养学生创新、团结协作的能力。 ?情感目标：培养学生的创新、合作精神，热爱家乡的情感以及提高他们的审美情趣。 教学重难点： ?教学重点：自定义动画效果设置的方法 ?教学难点：合理地利用动画效果增强幼灯片的吸引力 教学方法： 自主探究法、合作交流法、演示法、任务驱动法 教具准备： 计算机教室、Microsoft Powerpoint 2003、课件、三套演示文稿 教学理念： 1、注重学科整合。 2、注重学生的自主、合作、探究学习。 3、注重情景与任务驱动的融合。 4、注重实施分层教学 教学流程： 创设情境导入新课→合作探究获取新知→ 归纳小结整合知识→课后拓展巩固新知 教学过程： 教学流程教师活动学生活动设计意图
活动一： 创设情境 导入新课教师放映两套演示文稿 让学生欣赏：一套没有 设置动画效果，一套设 置了动画效果。 欣赏演示文稿 通过欣赏演示文稿，充分 调动学生学习的积极性， 提高他们的创作欲望。 活动二： 合作探究 获取新知1、寻找动画命令： 教师让学生在菜单 中寻找动画命令 让学生自主寻找动画命 令，充分突出学生的主体 地位。 活动三： 归纳小结 整合知识 活动四： 课后拓展 巩固新知 一、活动一：创设情境，导入新课 1、 设计意图： 二、 1、寻找动画命令： 学生在课前已经预习了本节知识，有了一定的基础, 很容易弄清楚动画效果设置的两种方式。 设计意图：让学生自主寻找动画命令，充分突出学生的主体地位。 2、尝试“预设动画”： 任务：请你利用“预设动画”命令为自己上节课创作的“二桥风采”幻灯片内的各个对象设置不同的动画效果。 学生自主完成。 设计意图： 因“预设动画”效果设置比较简单，外加初二学生已具备一定的计算机操作水平，完全可以让学生自行完成、自主实践。让学生通过自己的实践，初步感受动画效果的魅力，感受动画设置原来是这么简单，增强自信心，进一步激发他们的创作欲望。 3、熟悉“自定义动画”： 任务一：打开电脑桌面上的演示文稿“二桥风采”，请你利用“自定义动画”命
