返回织梦建站服务网首页 业界新闻 教程文档 资源下载 酷站鉴赏 免费服务 站长工具
织梦建站工作室
织梦建站论坛
载入中…
专题栏目
最新热门
>>更多热门...  
最新推荐
>>更多推荐...  
  您现在的位置: 织梦建站服务网 >> 建站教程 >> WEB多媒体 >> Flash >> 教程正文
[Flash] 图片轮换效果          
HITS: TIME:2007-4-27 9:58:06 AUTHOR:HBrO URL:蓝色理想
CONTENT INTRODUCE :
放大文字  缩小文字  发表评论  加入站内收藏夹  告诉好友  打印模式  关闭窗口 
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] 下一页

教程录入:jerome    责任编辑:jerome 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口

    相关教程
    仿6room网站图片链接效果
    浅谈flash web的结构
    A*寻路,二叉堆优化及AS3实现
    Apollo是危险的吗?
    Apollo 开发技巧
    APOLLO 未来畅想
    Flash纯脚本生成饼图
    基于flash的360虚拟现实引擎实现
    XML动态菜单
    Flash破解与加密
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    湘ICP备05010790号 {$Wap}
    关于我们 | 版本历史 | 联系方法 | 隐私条例 | 链接我们 | 广告服务 | 常见问题 | 友情链接 | 网站公告 | 设为首页 | 收藏本站
    Copyright © 2001-2006 17zm.NET All Rights Reserved.  织梦建站工作室[织梦建站工作室]™荣誉出品. Since 2001