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

}
}