flash图片轮换显示效果Word格式.docx

flash图片轮换显示效果Word格式.docx

《flash图片轮换显示效果Word格式.docx》由会员分享，可在线阅读，更多相关《flash图片轮换显示效果Word格式.docx（10页珍藏版）》请在冰豆网上搜索。

在这里，笔者将利用人眼睛的错觉来方便实现这一过程。

具体做法如下：

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

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，使用如下格式

<

?

xmlversion="

1.0"

encoding="

GB2312"

>

images>

is="

images/v82008.jpg"

a="

images_abbr/v82008.jpg"

未被直播的超女复活赛<

/i>

images/060820110116v82009.jpg"

images_abbr/060820110116v82009.jpg"

吃“最便宜的盒饭”<

images/060820110131v82010.jpg"

images_abbr/060820110131v82010.jpg"

本报记者亲历长沙“超级女声”台前幕后<

/images>

根据这里的路径放置图像文件。

PS:

这样的写法其实名称不好看明白，但当初笔者考虑传输时间，就在变量这里对xml文件做了压缩。

0.2、新建一个Flash文档，大小定为300*225（参考），保存为picsExchange.fla，位置跟list.xml在同一目录。

1.1、开始进入读取分析XML的工作，并把所有信息存放于数组里头，这里，笔者创建了三个数组：

descriptions，imgabbrs，imgs。

1.2、在第一帧里加上代码：

//因为是时间轴版，所以需要先停止播放，等xml的读取和分析完成以后才可以进入时间轴的第二段

System.useCodepage=true//防止中文乱码

varimgList:

XML=newXML（）//创建读取xml的对象

imgList.load（"

list.xml"

）//读取list.xml文件

vardescriptions:

Array

varimgabbrs:

varimgs:

Array 

//定义三个用于存放图像信息的数组

varimgsNum:

Number=0;

//放置图片数目的变量

imgList.onLoad=function（success）{

imgList.ignoreWhite=true

if（success）{

descriptions=newArray（）

imgabbrs=newArray（）

imgs=newArray（）//该步用于初始化数组，在重新读取的时候，把数组里的内容清空。

imgsNum=imgList.childNodes[0].childNodes.length

for（variinimgList.childNodes[0].childNodes）{

varimgNode:

XMLNode=imgList.childNodes[0].childNodes[i]

descriptions[i]=imgNode.childNodes[0].nodue//这是图片的文字描述

trace（"

description:

"

+descriptions[i]）

imgabbrs[i]=imgNode.attributes.a//这是缩略图的路径

imgabbr:

+imgabbrs[i]）

imgs[i]=imgNode.attributes.s//这是源图的路径

img:

+imgs[i]）

}

play（）;

//分析完毕，可以让时间轴播放

}else{

loadingerror!

）

}

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

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

其中动作脚本层就是1.2中输入代码的图层。

2.2、在旧图片的图层里，新建一个MC，命名为loadPic，实例名为lastPic，并让该MC的注册点放在主场景的左上方。

然后双击进入该MC，在里头再创建一个MC，元件名称和实例名均为graph。

2.3这里我们将通过复制graph载入列表中的所有图像。

名称将按graph0，graph1的规则来命名。

因此，在这里的帧先定义一个设置图像可见性的函数。

functionsetImage（imgIndex）{

for（variin_parent.imgabbrs）{

this["

graph"

+i]._visible=false

}//先把所有图片隐藏

+imgIndex]._visible=true//把需要显示的图像重新显示出来

然后把loadPic这一MC复制一个到新图片所在的图层，实例名为thisPic，并让两个loadPic重合。

3.1、到显示图片了。

先在第三帧里初始化一下thisIndex和lastIndex值，这两个值分别控制两个图片容器显示哪个图片。

第三帧代码：

varthisIndex:

Number=0

varlastIndex:

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。

接着在里头添加这么一段形状补间动画：

其中，时间轴上的首尾两帧均加上：

主时间轴的第四帧追加：

mask.gotoAndPlay

（2）;

此时运行，效果就不再生硬了，是一个简单的遮罩动画切换效果。

但是，为了更方便地实现随机效果，这种刚才笔者不推荐的做法就不再用了。

刚才只是为了方便大家测试效果而已。

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

动作脚本中每一帧都是写：

而遮罩的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'

seasiersaidthandone，具体如何创建按钮，就不是那么简单了。

因为图像的数目是不确定的，因此需要动态创建。

创建按钮其实只需要在载入全部图像进入第一轮显示的时候创建一次就可以了，因此，可以把该段创建按钮的代码放在第三帧。

为了让美工高手能有发挥自己才华的机会，笔者在这里就不用代码写按钮了，而是先在库里手动创建一个，接着通过attachMovie载入。

为了让按钮的深度更好管理，笔者建议大家把所有按钮载入到一个mc里头。

于是，在遮罩层上面新建一个图层，命名为按钮。

然后放置一个空的mc，元件名和实例名均为button_Field。

位置根据你个人喜好而定。

接着，在第三帧追加代码：

for（variinimgabbrs）{

varbtn:

MovieClip=button_Field.attachMovie（"

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帧的自动切换代码

主时间轴的第三帧声明两个布尔变量：

varrunning:

Boolean;

varhavePressed:

主时间轴第四帧为切换周期的开始，遮罩效果处于运行时状态，而还没点击过按钮。

故追加：

running=true;

havePressed=false;

之后，在每个遮罩动画效果运行结束后，要让running=false，因为运行已经结束。

并且检测是否在效果运行这段时间内点过按钮。

因此都追加代码：

_parent._parent.running=false;

//running是在主场景里声明的，故需要指向于主场景

if（_parent._parent.havePressed）{//假如在效果运行时点了按钮，根据按钮代码，该值一定为true，否则就是false

//检查到点过的话，就在效果运行结束的这一刻，马上切换图片

至此，整个图片轮换的效果完成了。

但是，大家也许会提问，为什么那些很眩的百叶窗效果，丰富多彩的形状变化还没做出来啊？

其实那些都是在遮罩mc里做。

笔者在这里只拿了个最简单的效果作为例子，大家完全可以根据自己的需要，把那里的效果换成自己想要的效果。