Flash 特效原理：图片圆柱墙

 

网上也有这种不错的图片圆柱的效果，它有一些交互做得不错，采用cs4 或者3d引擎可以创造出这种图片圆柱墙的效果。这种效果主要涉及到圆的分布，借用这种圆的轨迹，我们可以实现这种圆柱图片墙的效果。是不是说错了？我们讨论的圆柱 而为什么提及到圆？那是因为圆这种数学模型在flash 当中是非要实现而基础的应用技术，从图片中看起来会像圆柱形状，但是实际上，我们只是重复复制两个圆，而他的高度只是不同而已。 如果细心会发现，你会发现到这种会更加像一种扭曲的二维阵列。和图片平面墙的做法是相同的。采用两个循环来复制图片。

 

for (var i:int=0; i<2; i++)
    for (var j:int=0; j<num; j++)

{

   创建图片

   配置图片的位置和高度

}

 

为了让其有不同的图片，我们需要进行外部加载，下面有一种比较傻瓜的做法，但是不提倡，因为只是重用性不够强，只是演示代码。

private function addImages(...args):void：//加载图片

 

加载完毕之后，需要进行保存，采用数组来进行，然后对其不同的图片进行位置分布。

private function createSprite(array:Array):void；//创建图像

 

 

实现圆柱的做法：

myphoto.x=R*Math.cos(angle*j);
myphoto.z=R*Math.sin(angle*j); 
    
myphoto.y=i*80+10;//为其指定不同的高度

这样就能实现一种圆柱的效果

我们把核心的东西记住了就可以了，创建这些程序的时候，能够灵活地结合其他的方式进行交互。

 

扩展：

对图片进行交互，增加鼠标的对图片交互！

 

 

 

代码清单：这段代码是比较偷懒的做法，需要进行改造。只要把核心的地方弄明白了，其他的都可以进行修改。

建议和xml结合使用。会增加交互应用。

 

package { import flash.display.Sprite; import flash.display.MovieClip; import flash.events.*; import flash.geom.*; import flash.display.DisplayObject; import flash.display.Bitmap; import flash.display.Loader; import flash.net.*; import com.image.Reflect; public class Main extends Sprite { private var contain:Sprite=new Sprite();//创建容器 private var list:Array=new Array();//用于图片管理的数 private var count:int=0; private var imageList:Array=new Array(); private var centerX:Number=stage.stageWidth/2; private var centerY:Number=stage.stageHeight/2; private var R:int=300;//b半径 private var num:int=16;//边数 private var perangle:Number=(num-2)*180/num; private var angle:Number=2*Math.PI/num; public function Main() { init(); init_loadImage(); } private function init():void { addChild(contain); contain.x=centerX; contain.y=centerY; contain.z=250; root.transform.perspectiveProjection.fieldOfView=80;//初始化透视角度 addEventListener(Event.ENTER_FRAME,Run); } //加载外部图片 private function init_loadImage():void { addImages("./image/pic1.jpg","./image/pic2.jpg","./image/pic3.jpg","./image/pic4.jpg", "./image/pic5.jpg","./image/pic6.jpg","./image/pic7.jpg","./image/pic8.jpg", "./image/pic9.jpg","./image/pic10.jpg","./image/pic11.jpg","./image/pic12.jpg", "./image/pic13.jpg","./image/pic14.jpg","./image/pic15.jpg","./image/pic16.jpg", "./image/pic17.jpg","./image/pic18.jpg","./image/pic19.jpg","./image/pic20.jpg", "./image/pic21.jpg","./image/pic22.jpg","./image/pic23.jpg","./image/pic24.jpg", "./image/pic25.jpg","./image/pic26.jpg","./image/pic27.jpg","./image/pic28.jpg", "./image/pic29.jpg","./image/pic30.jpg","./image/pic31.jpg","./image/pic32.jpg"); } //创建二维阵列分布4x8 private function createSprite(array:Array):void { var k:int=0; for (var i:int=0; i<2; i++) { for (var j:int=0; j<num; j++) { var myphoto:MovieClip=new MovieClip(); contain.addChild(myphoto); myphoto.addChild(array[k]); list.push(myphoto); myphoto.x=R*Math.cos(angle*j); myphoto.z=R*Math.sin(angle*j); myphoto.y=i*80+10; myphoto.rotationY=j*perangle+90;//偏移 k++; } } //contain.rotationX=5;//偏移45度 sortZ(); } //添加外部图片，偷懒的做法 private function addImages(...args):void { count=args.length; for (var i:int=0; i<args.length; i++) { var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError); loader.load(new URLRequest(args[i])); } } private function onComplete(event:Event):void { var bitmap:Bitmap=event.currentTarget.content as Bitmap; bitmap.x=-bitmap.width/2; bitmap.y=-bitmap.height/2; imageList.push(bitmap); event.currentTarget.removeEventListener(Event.COMPLETE,onComplete); event.currentTarget.removeEventListener(IOErrorEvent.IO_ERROR,onError); count--; if (count==0) { createSprite(imageList); } } private function onError(event:Event):void { throw new Error("路径错误"); } //排序 private function sortZ():void { list.sort(depthSort); for (var i:int=0; i<list.length; i++) { var myimage:MovieClip=list[i]; contain.setChildIndex(myimage,i); } } //摘录make thing move 姐妹篇一个管理方法 private function depthSort(objA:DisplayObject,objB:DisplayObject):int { var posA:Vector3D=objA.transform.matrix3D.position; posA=contain.transform.matrix3D.deltaTransformVector(posA); var posB:Vector3D=objB.transform.matrix3D.position; posB=contain.transform.matrix3D.deltaTransformVector(posB); return posB.z-posA.z; } private function Run(event:Event):void { contain.rotationY+=0.2; sortZ(); } } }