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();			
		}
		
	}
}