flash特效原理 图片切换滚动

               

  

 

 

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

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

 

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

 

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

 

   <?xml version="1.0" encoding="UTF-8" ?> - <root>- <item>  <sid>0</sid>   <bpurl>/video/play.html?vid=s0090IljcFW</bpurl>   <url>http://imgcache.qq.com/qqlive/images/i1305516206_1.jpg</url>   <link>/video/play.html?vid=s0090IljcFW</link> - <title>- <!--[CDATA[ 刘惜君《怎么唱情歌》MV首播  ]]>   </title>- <subtitle>- <![CDATA[ “透明系女生”身陷两大型男无法自拔！  ]]>   </subtitle>  </item>- <item>  <sid>1</sid>   <bpurl>/video/play.html?vid=A0090V89apA</bpurl>   <url>http://imgcache.qq.com/qqlive/images/i1305195532_1.jpg</url>   <link>/video/play.html?vid=A0090V89apA</link> - <title>- <![CDATA[ 震撼有力！2NE1新MV《lonely》  ]]>   </title>- <subtitle>- <![CDATA[ 韩国女子天团回归，柔美单曲给炎炎夏日带来一丝清凉！  ]]>   </subtitle>  </item>- <item>  <sid>2</sid>   <bpurl>/video/play.html?vid=M0090YAejKV</bpurl>   <url>http://imgcache.qq.com/qqlive/images/i1305026066_1.jpg</url>   <link>/video/play.html?vid=M0090YAejKV</link> - <title>- <![CDATA[ 谢娜自导自演最新MV震撼出炉  ]]>   </title>- <subtitle>- <![CDATA[ 青春动力、活泼立志，最新MV《蓝色巧克力》俏皮来袭！  ]]>   </subtitle>  </item>- <item>  <sid>3</sid>   <bpurl>/video/play.html?vid=X0090zlLq5P</bpurl>   <url>http://imgcache.qq.com/qqlive/images/i1305006822_1.jpg</url>   <link>/video/play.html?vid=X0090zlLq5P</link> - <title>- <![CDATA[ 终极挑逗！辣妹蕾哈娜最新MV  ]]>   </title>- <subtitle>- <![CDATA[ 全新时尚大片，带你领略加州绝美风光…  ]]>   </subtitle>  </item>- <item>  <sid>4</sid>   <bpurl>/video/play.html?vid=p0090sSzkSC</bpurl>   <url>http://imgcache.qq.com/qqlive/images/i1305014875_1.jpg</url>   <link>/video/play.html?vid=p0090sSzkSC</link> - <title>- <![CDATA[ 郭富城章子怡：《最爱》主题曲  ]]>   </title>- <subtitle>- <![CDATA[ 顾长卫新片主题曲《一直都在》首度曝光，感动上映！  ]]-->   </subtitle>  </item>  </root>

 

主类执行：

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

 

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

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

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

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

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

                           判断左右切换的方向。

                           深度排序

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

                           

                                          

流程：

 

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

 

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

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

 

 

 

 

package { import flash.display.Sprite; import flash.events.*; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.StageAlign; import flash.display.StageScaleMode;  import org.summerTree.utils.XMLManager; imp