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

helloyesyes

浏览: 1306679 次
性别:
来自: 武汉

最近访客更多访客>>

u012363178

一溜烟儿的跑

myredapple001

OliveExcel

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1237)

社区版块

存档分类

Flash QQ XML 百度 .net

今天，我们来试玩一样东西，这个东西叫图片切换滚动，其实贴切一点应该叫图片轮播。时下图片轮播作为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> -  </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; 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<len; i++) { effect.getPhotoItem(i).x = stage.stageWidth / 2 - (2 - i) * effect.getPhotoItem(i).width / 2; effect.getPhotoItem(i).y = stage.stageHeight / 2; effect.getPhotoItem(i).scaleX=effect.getPhotoItem(i).scaleY=1-Math.abs(2-i)*0.2; if (i!=2) { effect.photoList[i].data.isTextVisible = false; } effect.setParameters(new Photoparam(effect.getPhotoItem(i).x,effect.getPhotoItem(i).scaleX)); } effect.sortZ(); addChild(effect); effect.startMotion(); } } }

图片元件：记录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<len; i++) { var photoItem:PhotoItem = new PhotoItem(data[i].url); photoItem.addEventListener(Event.COMPLETE,onLoadImageCompleteHandler); photoItem.addEventListener(MouseEvent.CLICK,onGotoPage); if (data[i].link.indexOf(Config.domain) == -1) { data[i].link = "http://"+Config.domain+ data[i].link; } photoItem.setText(data[i].title); photoItem.imageUrl = data[i].link; photoItem.id = i; addChild(photoItem); nodeList.appendNode(photoItem); } currentTargetPhoto = nodeList.nodeList[1].data; addEventListener(MouseEvent.ROLL_OVER,onMotionHandler); addEventListener(MouseEvent.ROLL_OUT, onMotionHandler); } private function onLoadImageCompleteHandler(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE,onLoadImageCompleteHandler); photoNums--; if (photoNums==0) { this.dispatchEvent(new Event(Event.COMPLETE)); } } private function onGotoPage(event:MouseEvent):void { if (PhotoItem(event.currentTarget).isClick) { navigateToURL(new URLRequest(event.currentTarget.imageUrl)); } else { flow(PhotoItem(event.currentTarget)); } } private function onMotionHandler(event:MouseEvent):void { if(event.type==MouseEvent.ROLL_OVER) { stopMotion(); } else { startMotion(); } } //开始运动 public function startMotion():void { if(timer==null) { timer = new Timer(timeInterval); timer.addEventListener(TimerEvent.TIMER,onTimerHandler); timer.start(); } else { timer.start(); } } //停止运动 public function stopMotion():void { timer.stop(); } private function onTimerHandler(event:TimerEvent):void { if(motionDirection=="right") { next(); } else if(motionDirection=="left") { preview(); } } //获取图片列表 public function get photoList():Array { return nodeList.nodeList; } //获取图片列表长度 public function get photoLength():int { return nodeList.nodeList.length; } //获取图片单项 public function getPhotoItem(index:int):PhotoItem { return nodeList.nodeList[index].data; } //添加基本图片参数 public function setParameters(value:Photoparam):void { parameters.push(value); } //设置时间间隔 public function setTimeInterval(value:Number):void { timeInterval=value; } //设置运动方向 public function setMotionDirection(value:String):void { motionDirection=value; } //左右的交互切换过程 public function flow(target:PhotoItem):void { currentTargetPhoto = target; //判断左右 if (target.id > targetPointNumber) { walkLeft(); } else if (target.id<targetPointNumber && target.id!=targetPointNumber) { walkRight(); } sortZ(); } //左方向交互 public function preview():void { if (nodeList.nodeOf(currentTargetPhoto).nextNode != null) { currentTargetPhoto = nodeList.nodeOf(currentTargetPhoto).nextNode.data as PhotoItem; flow(currentTargetPhoto); } } //右方向交互 public function next():void { if (nodeList.nodeOf(currentTargetPhoto).preNode != null) { currentTargetPhoto = nodeList.nodeOf(currentTargetPhoto).preNode.data as PhotoItem; flow(currentTargetPhoto); } } private function walkLeft():void { var len:int = nodeList.nodeList.length; var n:int = 0; var temp:int = 0; var index:int = 0; for (var i:int=len-1; i>-1; i--) { if (i==len-1) { temp = nodeList.nodeList[i].data.id; } if (i==0) { n = len - 1; nodeList.nodeList[i].data.id = temp; } else { n = i - 1; nodeList.nodeList[i].data.id = nodeList.nodeList[n].data.id; } index = nodeList.nodeList[i].data.id; if (currentTargetPhoto!=nodeList.nodeList[i].data) { nodeList.nodeList[i].data.isClick = false; } if (nodeList.nodeList[i].data.id != targetPointNumber) { nodeList.nodeList[i].data.isTextVisible = false; nodeList.nodeList[i].data.isClick = false; } else { nodeList.nodeList[i].data.isTextVisible = true; nodeList.nodeList[i].data.isClick = true; } TweenLite.to(nodeList.nodeList[i].data,0.5,{x:parameters[index].x,scaleX:parameters[index].scale,scaleY:parameters[index].scale}); } } private function walkRight():void { var len:int = nodeList.nodeList.length; var n:int = 0; var temp:int = 0; var index:int = 0; for (var i:int=0; i<len; i++) { if (i==0) { temp = nodeList.nodeList[i].data.id; } if (i==len-1) { n = 0; nodeList.nodeList[i].data.id = temp; } else { n = i + 1; nodeList.nodeList[i].data.id = nodeList.nodeList[n].data.id; } index = nodeList.nodeList[i].data.id; if (currentTargetPhoto!=nodeList.nodeList[i].data) { nodeList.nodeList[i].data.isClick = false; } if (nodeList.nodeList[i].data.id != targetPointNumber) { nodeList.nodeList[i].data.isTextVisible = false; nodeList.nodeList[i].data.isClick = false; } else { nodeList.nodeList[i].data.isTextVisible = true; nodeList.nodeList[i].data.isClick = true; } TweenLite.to(nodeList.nodeList[i].data,0.5,{x:parameters[index].x,scaleX:parameters[index].scale,scaleY:parameters[index].scale}); } } //深度排序() public function sortZ():void { var n:int = 0; while (n<this.numChildren) { var index:int = nodeList.nodeList[n].data.id; if (index<targetPointNumber) { this.setChildIndex(nodeList.nodeList[n].data,index); } else if (index==targetPointNumber) { this.setChildIndex(nodeList.nodeList[n].data,this.numChildren-1); } else if (index>targetPointNumber && index!=this.numChildren-1) { this.setChildIndex(nodeList.nodeList[n].data,index); } else if (index==this.numChildren-1) { this.setChildIndex(nodeList.nodeList[n].data,targetPointNumber); } n++; } } } }

获取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<len;i++) { var sonXML:XMLList=itemList[i].children(); var dataObject:Object={}; var nodeLen:int=sonXML.length();//节点长度 for(var j:int=0;j<nodeLen;j++) { var name:String = itemList[i].children()[j].name().toString(); var value:* = itemList[i].children()[j].toString(); dataObject[name]=value; } array.push(dataObject); } return array; } } }

配置文件

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<len;i++) { if(NodeList[i].data==obj) { return NodeList[i]; } } return null; } //判断是否空链表 public function isEmpty():Boolean { return size == 0; } //返回节点数 public function get size():int { return _size; } public function get nodeList():Array { return NodeList; } } }

节点：

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/