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 和一些轮播当中使用制作需要解决这两种交互的做法。
制作这个效果之前，当时参考了双链表的方式来制作，但是在制作的时候，双链表并没有完全满足个人需求，于是采用循环链表来替代制作，这种结构对付这种效果十分有意思，借助队列思想 和链表当中思维结合， 可以帮助我们解决实际上一些交互的难题。
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; import org.summerTree.effect.FollowEffect; import org.summerTree.model.Photoparam; public class Main extends Sprite { private var dataPath:String = "http://v.qq.com/music/pic.xml"; private var effect:FollowEffect; public function Main() { if (stage) { initData(); } else { addEventListener(Event.ADDED_TO_STAGE,initData); } } private function initData(event:Event=null):void { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //加载xml var loader:URLLoader=new URLLoader(); loader.addEventListener(Event.COMPLETE,onLoadDataCompleteHandler); loader.addEventListener(IOErrorEvent.IO_ERROR,onLoadDataErrorHandler); loader.load(new URLRequest(dataPath)); } private function onLoadDataCompleteHandler(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE,onLoadDataCompleteHandler); event.currentTarget.removeEventListener(IOErrorEvent.IO_ERROR,onLoadDataErrorHandler); var xmlData:* = event.currentTarget.data; effect=new FollowEffect(); effect.targetPointNumber = 2; effect.initData(XMLManager.getXMLData(xmlData)); effect.addEventListener(Event.COMPLETE,onLoadCompleteHandler); } private function onLoadDataErrorHandler(event:IOErrorEvent):void { trace("数据加载失败了"); } private function onLoadCompleteHandler(event:Event):void { effect.removeEventListener(Event.COMPLETE,onLoadCompleteHandler); var n:int = 0; var len:int = effect.photoLength; //设置好队列顺序。 for (var i:int=0; i 图片元件：记录xml 当中描述，设置图片地址，和图片显示。id是图片标记 package org.summerTree.display { import flash.display.Sprite; import flash.display.Loader; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; import flash.system.LoaderContext; import flash.display.Bitmap; import flash.display.Shape; import flash.filters.GlowFilter; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.geom.Point; public class PhotoItem extends Sprite { private var loader:Loader; private var title:String; private var bitmap:Bitmap; private var link:String; //点击链接 private var _isTextVisible:Boolean; private var photoContain:Sprite=new Sprite();//图片容器 private var bigTitle:TextField; private var blackMask:Shape; //黑色背景 public var id:int; public var level:int;//深度 public var isClick:Boolean = false;//是否允许点击 public var positionXY:Point;//记录开始的默认位置值 public function PhotoItem(url:String) { this.buttonMode = true; loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadImageCompleteHandler); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onIOErrorHandler); loader.load(new URLRequest(url),new LoaderContext(true)); } private function onLoadImageCompleteHandler(event:Event):void { loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoadImageCompleteHandler); loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,onIOErrorHandler); bitmap = Bitmap(event.currentTarget.content); addChild(photoContain); photoContain.x = - bitmap.width / 2; photoContain.y = - bitmap.height / 2; photoContain.addChild(bitmap); drawBaseBottom(bitmap.width,bitmap.height); blackMask=new Shape(); setTextDescription(); photoContain.addChild(blackMask); this.dispatchEvent(new Event(Event.COMPLETE)); } private function onIOErrorHandler(event:IOErrorEvent):void { trace("错误了"); } private function drawBaseBottom(width:Number,height:Number):void { var shape:Shape=new Shape(); shape.graphics.beginFill(0xCCCCCC); shape.graphics.drawRect(-5,-5,width+10,height+10); shape.graphics.endFill(); shape.filters = [new GlowFilter(0x999999,0.3)]; photoContain.addChildAt(shape,0); } //设置文本信息 public function setText(info:String):void { title = info; addEventListener(Event.ENTER_FRAME,render); } //设置图片链接 public function set imageUrl(value:String):void { this.link = value; } public function get imageUrl():String { return this.link; } //设置文本是否可见 public function set isTextVisible(value:Boolean):void { this._isTextVisible = value; photoContain.getChildAt(2).visible = value; blackMask.graphics.clear(); if (value) { blackMask.graphics.clear(); } else { blackMask.graphics.beginFill(0x333333,0.5); blackMask.graphics.drawRect(0,0,bitmap.width,bitmap.height); blackMask.graphics.endFill(); } } public function get isTextVisible():Boolean { return this._isTextVisible; } private function render(event:Event):void { if (bitmap) { removeEventListener(Event.ENTER_FRAME,render); bigTitle.text = title; } } private function setTextDescription():void { var contain:Sprite=new Sprite(); contain.graphics.beginFill(0x000000,0.5); contain.graphics.drawRect(0,0,bitmap.width,bitmap.height/4); contain.graphics.endFill(); photoContain.addChild(contain); var button:PlayButton = new PlayButton(40,40); contain.addChild(button); button.x = 8; button.y = 10; contain.y = bitmap.height - contain.height; bigTitle=new TextField(); bigTitle.defaultTextFormat = new TextFormat("黑体",12,0xffffff); bigTitle.multiline = true; bigTitle.autoSize = TextFieldAutoSize.LEFT; bigTitle.mouseEnabled = false; bigTitle.text = title; bigTitle.x = 60; bigTitle.y = contain.height - bigTitle.textHeight - 15; contain.addChild(bigTitle); blackMask.graphics.clear(); } } } 播放按钮图标：使用绘图api绘制 package org.summerTree.display { import flash.display.Sprite; public class PlayButton extends Sprite { public function PlayButton(width:Number,height:Number) { this.graphics.beginFill(0x333333,0.5); this.graphics.drawRoundRect(0,0,width,height,5,5); this.graphics.endFill(); this.graphics.lineStyle(2,0xffffff,0.5); this.graphics.drawRoundRect(-1,-1,width+2,height+2,5,5); this.graphics.beginFill(0xffffff,0.5); this.graphics.moveTo(width/3,height/3); this.graphics.lineTo(width/3,height*0.7); this.graphics.lineTo(width-width/3,height/2); this.graphics.lineTo(width/3,height/3); this.graphics.endFill(); } } } 交互当中常用接口： package org.summerTree.effect { //常见左右交互当中的使用的接口 public interface IEffect { function next():void; function preview():void; } } 轮播效果主实现方法：当中使用了循环链表。 让其实现左右切换的交互。 package org.summerTree.effect { import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.events.*; import org.summerTree.display.PhotoItem; import org.summerTree.datastruct.CLinkedList; import org.summerTree.datastruct.DLinkNode; import org.summerTree.model.Photoparam; import org.summerTree.utils.Config; import com.greensock.TweenLite; import flash.geom.Point; public class FollowEffect extends Sprite implements IEffect { public var timeInterval:Number = 5000;//每隔一段时间播放j间隔 private var timer:Timer; private var currentTargetPhoto:PhotoItem;//当前的图片 private var isCurrentPage:Boolean = false; private var nodeList:CLinkedList=new CLinkedList(); private var photoNums:int = 0;//图片数目 public var targetPointNumber:int;//目标放大点 private var parameters:Array = [];//保存路径 public var motionDirection:String="right";//运动方向 public static const RIGHT:String="right"; public static const LEFT:String="left"; public function FollowEffect() { } public function initData(data:Array):void { if (data.length == 0) { return; } var len:int = data.length; photoNums = len; for (var i:int=0; i 获取xml 数据： package org.summerTree.utils { public class XMLManager { //获取xml ，返回xml的数据 public static function getXMLData(data:String):Array { var array:Array=[]; var xml:XML=null; try{ xml=new XML(data); } catch(e:Error) { trace("数据发生了错误了"); } if(xml==null) return array; xml.ignoreWhitespace = true; var itemList:XMLList = xml..item; var len:int= itemList.length(); for(var i:int=0;i 配置文件 package org.summerTree.utils { public class Config { public static var domain:String="v.qq.com"; } } 循环链表使用： package org.summerTree.datastruct { import org.summerTree.datastruct.DLinkNode; public class CLinkedList { private var _size:int = 0; public var head:DLinkNode = null;//头节点 public var tail:DLinkNode = null;//尾节点 private var first:DLinkNode=null; private var last:DLinkNode=null; private var NodeList:Array=[]; public function CLinkedList() { } //插入节点 public function appendNode(obj: * ):void { var newNode:DLinkNode = new DLinkNode(obj); if (this.isEmpty()) { head = newNode; } else { tail.nextNode = newNode; newNode.preNode = tail; newNode.nextNode=head; head.preNode=newNode; } tail = newNode; _size++; NodeList.push(newNode); } //搜索当前节点 public function nodeOf(obj: * ):DLinkNode { var len:int=NodeList.length; for(var i:int=0;i 节点： package org.summerTree.datastruct { public class DLinkNode { public var data:*; public var preNode:DLinkNode; public var nextNode:DLinkNode; public function DLinkNode(obj:*) { preNode = nextNode = null; data = obj; } } } 记录他们参数 package org.summerTree.model { //记录图片的位置和缩放信息 public class Photoparam { public var x:Number; public var scale:Number; public function Photoparam(x:Number,scale:Number) { this.x=x; this.scale=scale; } } } 除了这个之后，我们可以观看到百度视频当中的，也有这种flash制作，他们的特点是实用，替换数据方便,显示效果也比较有意思。 不妨去参考他们的swf 来尝试制作一个属于自己轮播效果。 http://video.baidu.com/hd/index/