flash特效原理 CoverFlow 效果 2

               

 

 

   今晚抽点时间记录一下coverFlow效果。前几天修改了一个coverFlow的效果的代码。看到coverFlow效果有一种比较有趣的思路去制作。

 

在创造这个特效过程当中，所涉及到一些类包含缓冲类，包括倒影类，同时也可以使用一种数据结构来实现左右移动的时候变化，思路可以借鉴一下。

 

在这里大概讲解一下制作过程。

制作原理：我们可以看到图片都在Y轴都偏移了一定的角度，并且每一张图片都保持一定的距离。在交互的时候，中间的图片会进行滑行放大，由原来的偏移角度从（angle-->0）进行变化，并且在位置上都移动到另外一个位置。（x1-->x2）所以在这个动画过程当中，有两个属性发生变化了。

 

             （角度--->0）

              (位置X-->变化到另外一个位置)

 

 在每次点击一张图片，那么这张图片如果在目标图片的左边，那么左边所有图片（photo1，photo2....）会向右进行位置移动

                                                  如果在目标图片的右边，那么左边所有图片（photo5，photo6....）会向左进行位置移动

 

 

懂了这个我们可以尝试制作一下。

 

 

一。图形的线性分布

我们首先会依据这些图片按一定间距进行分布，这样看起来就像一条线。随后，我们将下面的图片按一定角度Y轴进行偏移，这样就能像coverflow的效果。看起来会有一点摸样了。

 

 

 

 

 

二 交互

  在flash 交互过程当中，图片进行滑动并且将原先的偏移的角度变化到一个角度。在这个过程当中，我们使用缓冲的类产生这个过程。

一方面改变这种偏移角度变化，一方面改变位置变化，在这个过程当中你会发现你点击的图片，和其他图片都会发生改变移动，这也是这个交互比较有趣的地方，我们可以通过循环检测目标图片左边的图片和右边的图片。并让其发生改变。那么这个交互就已经可以把握到了。

 

如：

A1 A2 A3（目标图片）B1 B2 B3

 

 

 

package { import flash.display.*; import flash.net.*; import flash.events.*;  import org.summerTree.effect.CoverFlow; import org.summerTree.effect.Image; import org.summerTree.effect.Reflection; public class Main extends Sprite {  private var coverflow:CoverFlow=new CoverFlow();//创建coverFlow效果类    public function Main()  {      coverflow.SPACING=80;//设置间距      addChild(coverflow);   coverflow.move(stage.stageWidth/2,stage.stageHeight/2);       coverflow.addEventListener(Event.COMPLETE,onLoadCompleteHandler);   coverflow.loadImage("image/0.jpg","image/1.jpg","image/2.jpg",         "image/3.jpg","image/4.jpg",         "image/5.jpg","image/6.jpg",         "image/7.jpg","image/8.jpg",         "image/9.jpg","image/10.jpg"                  ); //加载图片     }    private function onLoadCompleteHandler(event:Event):void  {   coverflow.removeEventListener(Event.COMPLETE,onLoadCompleteHandler);   creatSprite(coverflow.imageArray);   coverflow.addListener();//添加左右按键     }       //创建图形  private function creatSprite(array:Array):void  {   var n:int=array.length;   for (var i:int=0; i<n; i++)   {    var image:Image=array[i];    var refect:Reflection=new Reflection(image,255,Reflection.CENTER,0.7,0.6);//对图片产生倒影效果    image.addEventListener(MouseEvent.CLICK,onClickHandler);    coverflow.addImage(image);//添加图片       }      coverflow.flow(array[int(n/2)]);  }     private function onClickHandler(event:MouseEvent):void  {   var image:Image = event.currentTarget as Image;   coverflow.flow(image);  } }}

 

 

   CoverFlow.as

package org.summerTree.effect{ import flash.display.Sprite; import flash.events.*; import org.summerTree.datastruct.DLinkedList; import org.summerTree.datastruct.DLinkNode; import com.greensock.TweenLite; import flash.display.Loader; import flash.net.URLRequest; import flash.display.Bitmap; import flash.display.BitmapData; import flash.ui.*; public class CoverFlow extends Sprite {  public var TIME:Number = 0.5;//移动响应时间  public var ROTATION_Y:Number = 60;//偏转角度  public var SPACING:Number = 100;//图片之间间隔  public var Z_FOCUS:int = -300;//z深度  private var targetImage:Image;//图片目标  private var plane:Image;  private var image_size:int = 0;  private var _imageArray:Array = [];  private var planeList:DLinkedList = new DLinkedList();  public function CoverFlow()  {  }  //添加图片  public function addImage(image:Image):void  {   planeList.appendNode(image);   this.addChild(image);  }  //加载图片  public function loadImage(...args):void  {   var len:int = args.length;   image_size = len;   for (var i:int=0; i<len; i++)   {    var loader:Loader=new Loader();    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadCompleteHandler);    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onErrorHandler);    loader.load(new URLRequest(args[i]));   }  }  private function onErrorHandler(event:IOErrorEvent):void  {   throw new Error("发生错误");  }  private function onLoadCompleteHandler(event:Event):void  {   event.currentTarget.addEventListener(Event.COMPLETE,onLoadCompleteHandler);   var image:Bitmap = event.currentTarget.content;   _imageArray.push(new Image(image));   image.bitmapData.dispose();   image_size--;   if (image_size == 0)   {    this.dispatchEvent(new Event(Event.COMPLETE));   }  }  public function get imageArray():Array  {   return _imageArray;  }  public function move(x:Number,y:Number):void  {   this.x = x;   this.y = y;  }  //监听鼠标和键盘监听   public function addListener():void  {   stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDownHandler);   stage.addEventListener(MouseEvent.MOUSE_WHEEL,onWheelHandler);  }  //跟随  public function flow(plane:Image):void  {   var xPosition:Number = 0;   targetImage = plane;   TweenLite.to(plane, TIME, {x:xPosition, z:Z_FOCUS, rotationY:0});   var current:DLinkNode = planeList.nodeOf(plane);//搜索当前节点   var walkLeft:DLinkNode = current.preNode;   while (walkLeft)   {    plane = Image(walkLeft.data);    xPosition -=  SPACING;    TweenLite.to(plane, TIME, {x:xPosition, z:0, rotationY:-ROTATION_Y});    walkLeft = walkLeft.preNode;    this.setChildIndex(plane,0);   }   xPosition = 0;   var walkRight:DLinkNode = current.nextNode;   while (walkRight)   {    plane = Image(walkRight.data);    xPosition +=  SPACING;    TweenLite.to(plane, TIME, {x:xPosition, z:0, rotationY:ROTATION_Y});    this.setChildIndex(plane,0);    walkRight = walkRight.nextNode;   }  }  public function preview():void  {   if (planeList.nodeOf(targetImage).preNode != null)   {    plane = planeList.nodeOf(targetImage).preNode.data as Image;    flow(plane);   }  }  public function next():void  {   if (planeList.nodeOf(targetImage).nextNode != null)   {    plane = planeList.nodeOf(targetImage).nextNode.data as Image;    flow(plane);   }  }  // 左右键盘  private function onKeyDownHandler(event:KeyboardEvent):void  {   if (event.keyCode == Keyboard.RIGHT)   {    next();   }   else if (event.keyCode==Keyboard.LEFT)   {    preview();   }  }  //鼠标滚动  private function onWheelHandler(event:MouseEvent):void  {   if (event.delta > 0)   {    preview();   }   else   {    next();   }  } }}

 

 

package org.summerTree.effect{ import flash.display.Sprite; import flash.display.Bitmap; import flash.display.BitmapData;  public class Image extends Sprite {    public var url:String;  public function Image(source:*)  {   var bmpData:BitmapData=new BitmapData(source.width,source.height,false,0x0);   bmpData.draw(source);   var bitmap:Bitmap=new Bitmap(bmpData);   bitmap.x-=bitmap.width/2;   bitmap.y-=bitmap.height/2;   addChild(bitmap);  } }}

 

 

 

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.datastruct{ import org.summerTree.datastruct.DLinkNode; public class DLinkedList {  private var _size:int = 0;  public var head:DLinkNode = null;//头节点  public var tail:DLinkNode = null;//尾节点  private var NodeList:Array=[];  public function DLinkedList()  {  }  //插入节点  public function appendNode(obj: * ):void  {   var newNode:DLinkNode = new DLinkNode(obj);   if (this.isEmpty())   {    head = newNode;   }   else   {    tail.nextNode = newNode;    newNode.preNode = tail;   }   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)    {     //break;     return NodeList[i];         }       }      return null;  }  //判断是否空链表  public function isEmpty():Boolean  {   return size == 0;  }          //返回节点数   public function get size():int  {   return _size;  } }}

 

 

package org.summerTree.effect{ //倒影类 import flash.display.*; import flash.geom.*; public class Reflection   {  private var reflectionContainer:DisplayObjectContainer;  private var reflectionHeight:Number;  private var reflectionalphaStrength:Number;//透明度  private var reflectionPercent:Number;  private var offDistance:Number;//偏移距离  private var reflectionClip:Sprite;    private var reflectionBMP:Bitmap;//倒影位图  private var reflectionMask:Sprite;//倒影遮罩  private var RegPointType:String;//注册点位置类型    //实现三种情况进行倒影  public static var LEFT_TOP:String="left_top";  public static var CENTER:String="center";  public static var CENTER_BOTTOM:String="center_bottom";          /* @ para reflectionContainer 倒影的容器   * @ para reflectionHeight  倒影高度   * @ para RegPointType  注册点类型，根据不同注册点位置做出相应的倒影   * @ para alphaStrength 透明度 （0-1）   * @ para reflectionPercent 倒影映射的百分比   * @ para offDistance 偏移距离   */         public function Reflection(reflectionContainer:DisplayObjectContainer, reflectionHeight:Number = 255, RegPointType:String="left_top" ,alphaStrength:Number = 1, reflectionPercent:Number = -1 ,offDistance:Number=0)  {   this.reflectionContainer = reflectionContainer;   this.reflectionHeight = reflectionHeight;   this.reflectionalphaStrength = alphaStrength;   this.reflectionPercent = reflectionPercent;   this.RegPointType=RegPointType;   this.offDistance=offDistance;   CreatReflection();   addItem();  }            //创建倒影  private function CreatReflection():void  {   reflectionClip = new Sprite();//倒影剪辑容器   reflectionMask = new Sprite();//遮罩      var bmd:BitmapData = new BitmapData(reflectionContainer.width,reflectionContainer.height,true,0xffffff);   if(RegPointType==Reflection.LEFT_TOP)   {    bmd.draw(reflectionContainer);    reflectionBMP = new Bitmap(bmd);       reflectionBMP.scaleY= -1;       reflectionBMP.x = 0;       reflectionBMP.y = reflectionBMP.height*2+offDistance;    reflectionMask.y = reflectionBMP.height+offDistance;       reflectionMask.x = 0;   }   else if(RegPointType==Reflection.CENTER)   {    var matrix:Matrix=new Matrix();       matrix.tx=reflectionContainer.width/2;       matrix.ty=reflectionContainer.height/2;       bmd.draw( reflectionContainer,matrix);    reflectionBMP = new Bitmap(bmd);       reflectionBMP.scaleY= -1;       reflectionBMP.x = -reflectionBMP.width/2;       reflectionBMP.y = reflectionBMP.height+reflectionBMP.height/2+offDistance;    reflectionMask.y = reflectionBMP.height/2+offDistance;       reflectionMask.x = -reflectionBMP.width/2;   }   else if(RegPointType==Reflection.CENTER_BOTTOM)   {    var matrixB:Matrix=new Matrix();       matrixB.tx=reflectionContainer.width/2;       matrixB.ty=reflectionContainer.height;          bmd.draw( reflectionContainer,matrixB);    reflectionBMP = new Bitmap(bmd);       reflectionBMP.scaleY= -1;       reflectionBMP.x = -reflectionBMP.width/2;       reflectionBMP.y = reflectionBMP.height+offDistance;    reflectionMask.y = 0+offDistance;       reflectionMask.x = -reflectionBMP.width/2;   }       var fillType:String = GradientType.LINEAR;   var colors:Array = [0xFFFFFF,0xFFFFFF];   var alphas:Array = [reflectionalphaStrength,0];   var ratios:Array = [0,reflectionHeight];   var matr:Matrix = new Matrix();   var matrixHeight:Number;   if(reflectionPercent<=0)   {    matrixHeight=reflectionContainer.height;   }   else   {    matrixHeight=reflectionContainer.height*reflectionPercent;   }   var spreadMethod:String = SpreadMethod.PAD;   matr.createGradientBox(reflectionContainer.width ,matrixHeight, 0.5*Math.PI,0, 0);   reflectionMask.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);   reflectionMask.graphics.drawRect(0, 0, reflectionContainer.width, reflectionContainer.height);            reflectionMask.graphics.endFill();                    reflectionBMP.cacheAsBitmap = true;         reflectionMask.cacheAsBitmap = true;      reflectionBMP.mask = reflectionMask;  }  //添加项目  private function addItem():void  {   reflectionClip.addChild( reflectionBMP );   reflectionClip.addChild( reflectionMask );   reflectionContainer.addChild( reflectionClip );      }            //清除倒影  public function clearAll():void  {   reflectionClip.removeChild( reflectionMask );   reflectionClip.removeChild( reflectionBMP );   reflectionContainer.removeChild( reflectionClip );  } }}