flash特效原理:图片切换滚动

  

 

 

今天,我们来试玩一样东西,这个东西叫图片切换滚动,其实贴切一点应该叫图片轮播。时下图片轮播作为web方面在各大网站已经非常流行,这种图片轮播非常经典,前段时间花了两天写了像一个QQ视频网站看到的效果。

  参考效果地址:http://v.qq.com/music/index.html

 

  要想玩,但是我比较懒,所以在分解他们效果的时候,顺便查询网站里面一个xml里面的数据,只是为了演示作用,故此只是借用了他们的xml数据内容。

 

  查看:http://v.qq.com/music/pic.xml 里面的xml信息可以查看到里面图片和描述 以及一些视频地址链接。我们只是需要获取到里面数据并进行分析保存起来。

 

 

 

主类执行:

调用URLLoader 类对其xml 进行读取,读取完毕后,把数据转至photoItem 类,把需要的数据设置一下,如链接,图片地址,和文字描述。 在设置图片位置的时候,记录他们位置,以便在时间间隔调用的时候,进行切换下一个位置。

 

轮播当中需要工作:使用时间调度方式让图片进行轮播,

                           点击图片的时候可以进行轮播

                           点击中间图片的时候跳转到相应的链接处

                           切换图片时候 需要对图片进行暗处理,并隐藏主要文字

                           切换位置的时候,使用TweenLite进行轮播到下一个位置,

                           判断左右切换的方向。

                           深度排序

                           初始化图片的时候记录初始位置

                           

                                          

流程:

 

         加载xml数据-->实例化效果-->实例化图片元件,并赋予数据--->进行时间调度切换

 

当中交互里面,经常涉及到左右两只切换的方式,这两种方式使用频率比较高,在coverFlow 和一些轮播当中使用制作需要解决这两种交互的做法。

  制作这个效果之前,当时参考了双链表的方式来制作,但是在制作的时候,双链表并没有完全满足个人需求,于是采用循环链表来替代制作,这种结构对付这种效果十分有意思,借助队列思想 和链表当中思维结合, 可以帮助我们解决实际上一些交互的难题。

 

 

 

 

 

 

图片元件:记录xml 当中描述,设置图片地址,和图片显示。id是图片标记

 

 

 

 

播放按钮图标:使用绘图api绘制

 

交互当中常用接口:

 

轮播效果主实现方法:当中使用了循环链表。

让其实现左右切换的交互。

 

 

获取xml 数据:

 

配置文件

 

循环链表使用:

 

 

节点:

 

 记录他们参数

 

除了这个之后,我们可以观看到百度视频当中的,也有这种flash制作,他们的特点是实用,替换数据方便,显示效果也比较有意思。

不妨去参考他们的swf 来尝试制作一个属于自己轮播效果。

 

 http://video.baidu.com/hd/index/

 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值