|
st.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。

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元件最好是个全不透明的矩形 上一页 [1] [2] [3] 下一页 |