基于AS的WEB图片随机切换效果的实现

出处:电子技术网 发布于:2013-12-04 10:01:01

  摘要:Flash已渐渐成为WEB网站的一大主流,在许多页面上都可以看到用flash制作的炫目的图片自动切换效果,在Flash中图片切换一般有两种途径:遮罩和AS脚本,相比较而言,用AS脚本不论在图片批量处理上还是后期维护更新上都有显着优势。

      本文详细介绍了用Adobe Flash Professional CS5.5脚本设计图片切换效果的技术和步骤,并附上脚本详细代码,对网站动画设计和多媒体课件制作都具有一定的指导作用。

  引言

  Flash是一种交互式矢量多媒体技术,目前互联网上已经有成千上万个纯Flash站点,而且其他普通站点,包括很多wap站点,也都用到了flash技术,可以说Flash已渐渐成为交互式矢量的标准,未来网页的一大主流。在用Flash展示产品、风景、新闻等图片时,其切换效果可用遮罩和AS两种途径来实现,其中遮罩方式简单易学,但效果比较单调,修改不方便;AS方式效果丰富,适合对图片批处理,更改图片及效果也极为方便,是制作切换效果的。

  2.图片处理

  2.1 图片存放

  首先准备若干张jpg或gif图片,本文设计的是10张600*400的jpg图片(可以用“光影魔术手”软件进行批处理),文件名分别为:

  1.jpg,2.jpg,…,8.jpg,存放在与。fla文件相同目录下(如图1),然后通过AS脚本,创建空的影片剪辑和加载外部图片。

  

  2.2 图片加载

  用数组方式批量添加,用MovieClip类的createEmptyMovieClip()和loadMovie()方法创建空影片剪辑实例和将图片加载到实例中,因为图片多,用循环方式依次加载,同时也方便使后加入的深度依次增大而位于上层,具体如:

  

  这样就在舞台上层叠了8个影片剪辑。

  2.3 图片布局

  外部图片导入到舞台以后,位置和大小不一定与舞台相匹配,须作调整。本程序中,舞台大小设置为800*600,图片大小在导入之前已统一设置为600*400,完被装下,如果图片大于舞台,可通过_xscale和_yscale属性来缩小。代码如下:

  

  

  3.图片切换

  因为8张图片大小完全相同,后载入的覆盖了先载入的,这时只能看到上面的一张,所以还必须在两张图片之间设置时间和过渡效果,才能看到前后图像载入变化。

  flash AS提供了10种效果:Blinds(遮罩效果)、Fade(淡化效果)、Fly(飞行效果)、IRis(光圈效果)、Photo(聚变曝光效果)、PixelDissolve(像素溶解效果)、Rotate(旋转效果)、Squeeze(挤压效果)、Wipe(划入/划出效果)、Zoom(缩放效果),每种效果中又有很多种形式,统计起来共有27种之多。这些效果的实现主要是通过TransitionManager类来完成的。要实现过渡效果,为编写代码更为方便,首先需要导入所有mx.transitions类和所有mx.transitions.easing类:

  import mx.transitions.*;

  import mx.transitions.easing.*;

  在导入上面两个类以后,就可以使用TransitionManager类的start()方法将过渡效果应用于影片剪辑上。

  格式:

  TransitionManager.start(影片剪辑名称,{type:过渡类型,direction:方向,duration:过渡所所需的时间,easing:缓动效果,各种过渡效果所需的参数});start()方法参数的说明:

  影片剪辑名称:就是要应用过渡效果的MC的实例名称,即前面用createEmptyMovieClip(“mc”+String(i+1),i+1)创建的mc1、mc2……mc8.

  Type:过渡类型,前面已提到共有10种过渡效果,如:Blinds、Fade、Fly、Iris、Photo等。

  Direction:方向,即过渡是进入还是退出。可以用两个值:Transition.IN和Transition.

  OUTDuration:过渡所所需的时间,一般一个过渡几秒就够了,常用3-5秒。

  easing:缓动效果:在过渡效果中可以为过渡效果添加缓动效果。

  startPoint:一个指示起始位置的整数,范围是1到9.1:左上;2:上中;3:右上;4:左中;5:中心;6:右中;7:左下;8:  下中;9:右下。

  某些效果还有自己特有的参数,如:遮罩条纹数:numStrips和条纹方向:dimension,遮罩形状Shape:.Iris.SQUARE(方形)和CIRCLE(圆形)等4.效果实现

  为了将图片各种随机切换效果连续地展示出来,可以使用setInterval()方法,setInterval()方法可以按照指定的周期来调用函数(在本程序中是调用图片自动切换的函数:showImages()),直到窗口关闭,代码如下:

  

  5.程序设计与调试

  在理解上述思路的基础上就可在Flash窗口开始编写程序代码和调试了。

  启动Adobe Flash Professional CS5.5,在图层1的帧处(如图2所示)按F9键,打开动作窗口,在动作窗口中输入附录中所示代码。另特别注意,在发布之前,务必通过“文件-发布设置”将脚本修改为Action-Script2.0,否则在发布时会报错。

  

  按上述步骤完成后,即可按Ctrl+Enter测试影片。

  7.结语

  本文介绍了用Adobe Flash Professional CS5.5脚本设计图片切换效果的技术,用Flash制作的炫目的图片自动切换效果,在Flash中图片切换一般有两种途径:遮罩和AS脚本,相比较而言,用AS脚本不论在图片批量处理上还是后期维护更新上都有显着优势,对网站动画设计和多媒体课件制作都具有一定的指导作用。(作者:易和平)

版权与免责声明

凡本网注明“出处:维库电子市场网”的所有作品,版权均属于维库电子市场网,转载请必须注明维库电子市场网,https://www.dzsc.com,违反者本网将追究相关法律责任。

本网转载并注明自其它出处的作品,目的在于传递更多信息,并不代表本网赞同其观点或证实其内容的真实性,不承担此类作品侵权行为的直接责任及连带责任。其他媒体、网站或个人从本网转载时,必须保留本网注明的作品出处,并自负版权等法律责任。

如涉及作品内容、版权等问题,请在作品发表之日起一周内与本网联系,否则视为放弃相关权利。

相关技术资料
广告
上传BOM文件: BOM文件
*公司名:
*联系人:
*手机号码:
QQ:
应用领域:

有效期:
OEM清单文件: OEM清单文件
*公司名:
*联系人:
*手机号码:
QQ:
有效期:

扫码下载APP,
一键连接广大的电子世界。

在线人工客服

买家服务:
卖家服务:

0571-85317607

客服在线时间周一至周五
9:00-17:30

关注官方微信号,
第一时间获取资讯。

建议反馈

联系人:

联系方式:

按住滑块,拖拽到最右边
>>
感谢您向阿库提出的宝贵意见,您的参与是维库提升服务的动力!意见一经采纳,将有感恩红包奉上哦!