每天学一点flash（71）折纸（2）

      

  

如果对Y轴 的方向，我们依旧可以进行一次构造这种的折纸的形状效果，对图片经过处理后的变化就可以产生这种效果。

他涉及到对位图复制的处理，经过对一张平面的图进行一定比例选取，然后使用3d 当中的轴偏移（x，y，z方向的旋转）那么可以创造这种的效果。

当中核心代码不会超过10多行而，关键是会算出每两张图片直接的位置。

假设当中有4张图片，A-B-C-D，我们需要通过求出AB两点间的位置算出他们之间的关系。

其原理就是等腰三角形。有兴趣可以尝试一下

经过封装之后，

//折纸效果类，将图片重新进行拼接 //适合10.0版本 package org.summerTree.effect { import flash.display.Sprite; import flash.events.*; import flash.display.MovieClip; import flash.display.Loader; import flash.display.Bitmap; import flash.display.BitmapData; import flash.net.URLRequest; import flash.geom.Rectangle; import flash.geom.Point; public class OrigamiEffect extends Sprite { private var shapeList:Array = []; private var image_width:Number=0;//一张图片宽度 private var image_height:Number=0; private var bmpdata:BitmapData; public static const COMPLETE:String="complete"; private var n:int;//分割次数 private var direction:String;//方向 public function OrigamiEffect(n:int,direction:String="x") { this.n=n; this.direction=direction; } //加载图片 public function loadImage(url:String):void { var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadImageComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onIoErrorHandler); loader.load(new URLRequest(url)); } private function onLoadImageComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE,onLoadImageComplete); this.content=Bitmap(event.currentTarget.content).bitmapData; this.dispatchEvent(new Event(OrigamiEffect.COMPLETE)); } private function onIoErrorHandler(event:IOErrorEvent):void { throw new Error("发生错误"); } //释放大图 public function dispose():void { this.content.dispose(); } //返回位图数据 public function get content():BitmapData { return bmpdata; } public function set content(value:BitmapData):void { bmpdata=value; } //创建一组图形 public function creatEffect(bitmapData:BitmapData):void { var width:Number; var height:Number; if(direction=="x") { width=bitmapData.width/n;//图片宽度 height=bitmapData.height; image_width=width; } if(direction=="y") { width=bitmapData.width;//图片宽度 height=bitmapData.height/n; image_height=height; } for (var i:int=0; i<n; i++) { var sprite:Sprite=new Sprite(); var bmpData:BitmapData=new BitmapData(width,height); var tempX:Number=direction=="x" ? width: 0; var tempY:Number=direction=="x" ? 0: height; bmpData.copyPixels(bitmapData,new Rectangle(i*tempX,i*tempY,width,height),new Point(0,0));//复制像素 var bmp:Bitmap=new Bitmap(bmpData); bmp.x=-tempX/2; bmp.y=-tempY/2; sprite.addChild(bmp); addChild(sprite); shapeList.push(sprite); } } //返回数组列表 public function get arrayList():Array { return shapeList; } //对图像x方向设置位置 public function SortX(angle:Number):void { var len:int = shapeList.length; for (var i:int=0; i<len; i++) { shapeList[i].x = i * Math.cos(angle * Math.PI / 180) * image_width; shapeList[i].rotationY=(i%2==0?-angle:angle); } } //对图像y方向设置位置 public function SortY(angle:Number):void { var len:int = shapeList.length; for (var i:int=0; i<len; i++) { shapeList[i].y = i * Math.cos(angle * Math.PI / 180) * image_height; shapeList[i].rotationX=(i%2==0?-angle:angle); } } //设置位置 public function move(x:Number,y:Number):void { this.x=x; this.y=y; } } }

实例测试：

import org.summerTree.effect.OrigamiEffect; import flash.events.Event; import flash.geom.Point; var point:Point;//鼠标按下去的点 var angle:Number=0;//角度 //创建实例 var effect:OrigamiEffect = new OrigamiEffect(10,"y"); addChild(effect); effect.move(20,0);//移动位置 effect.addEventListener(OrigamiEffect.COMPLETE,loadComplete); effect.loadImage("2.jpg"); //加载图片; function loadComplete(event:Event):void { effect.creatEffect(effect.content); effect.SortY(30); effect.dispose();//释放大图; var len:int = effect.arrayList.length;//获取数组的长度 effect.arrayList[len - 1].buttonMode = true; effect.arrayList[len - 1].addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler); stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler); } function onMouseDownHandler(event:MouseEvent):void { point = new Point(mouseX,mouseY); stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); } function onMouseUpHandler(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); } //改变角度 function onMouseMoveHandler(event:MouseEvent):void { angle=Math.abs((90*(mouseY-point.y)/(point.y))); effect.SortY(angle); }