每天学一点flash（71）折纸

 

 

    今晚，写了一个程序，不知道打算起什么名字，看到这种像折纸的形状，将就叫折纸效果。这组图形是拼接出来的效果，有的像古代那种屏风门。要是我们想象不到，也可以用纸来折叠这种的形状。

    制作的过程当中，一方面需要设置矩形的偏移y轴方向角度，同时为了接缝两两之间的图片，还需要计算它们之间图片的距离是多少。通过一个余弦三角函数就能设置求出这种距离。

    涉及到等腰的三角形和直角的求取办法，这两个也是很容易的。

 

 利用到公式就能求出出来，如下图，我们想实现下面的拼接效果。

 

 

 

代码如下：

package { import flash.display.Sprite; import flash.events.*; import flash.display.MovieClip; public class Main extends Sprite { private var contain:Sprite=new Sprite();//容器 private var angle:int = 45;//默认开始角度45 private var shapeList:Array = []; public function Main() { addChild(contain); contain.x = 100; contain.y = 180; contain.z = -100; creatSprite(12); contain.rotationX = 30; stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); } //改变角度 private function onMouseMoveHandler(event:MouseEvent):void { angle=(90*(stage.stageWidth-mouseX)/(stage.stageWidth)); Sort(shapeList,angle,60); } //创建一组图形 private function creatSprite(n:int):void { for (var i:int=0; i<n; i++) { var sprite:Sprite=new Sprite(); sprite.graphics.lineStyle(0); sprite.graphics.beginFill(0x00ff00); sprite.graphics.drawRect(-30,-50,60,100), sprite.graphics.drawCircle(0,0,5); sprite.graphics.endFill(); sprite.buttonMode = true; sprite.y = 0; contain.addChild(sprite); shapeList.push(sprite); } Sort(shapeList,30,60); } //对图像设置位置 private function Sort(array:Array,angle:Number,lens:Number):void { var len:int = array.length; for (var i:int=0; i<len; i++) { array[i].x = i * Math.cos(angle * Math.PI / 180) * lens; trace("angle"+angle+"宽度"+array[i].width); array[i].rotationY=(i%2==0?-angle:angle); } } } }

 

 

 

 更改之后，尝试变化，效果会变成这种效果，看起来挺好玩的！写成一种像竹简形式。

好，累了，休息去！

 

 

 

 

 package { import flash.display.Sprite; import flash.events.*; import flash.display.MovieClip; import flash.filters.GlowFilter; import flash.text.TextField; import flash.text.TextFormat; public class Main extends Sprite { private var contain:Sprite=new Sprite();//容器 private var angle:int = 45;//默认开始角度45 private var shapeList:Array = []; public function Main() { addChild(contain); contain.x = 10; contain.y = 50; contain.z = -100; creatSprite(11); //contain.rotationX = 30; stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); } //改变角度 private function onMouseMoveHandler(event:MouseEvent):void { angle=(90*(stage.stageWidth-mouseX)/(stage.stageWidth)); Sort(shapeList,angle,60); } //创建一组图形 private function creatSprite(n:int):void { for (var i:int=0; i<n; i++) { var sprite:Sprite=new Sprite(); sprite.graphics.lineStyle(0); sprite.graphics.beginFill(0xffffff); sprite.graphics.drawRect(-30,0,60,300); sprite.graphics.drawCircle(0,50,3); //sprite.graphics.drawCircle(0,150,5); sprite.graphics.drawCircle(0,250,3); sprite.graphics.endFill(); var txt:TextField=new TextField(); txt.defaultTextFormat=new TextFormat("楷体_GB2312",30); txt.text="大唐无双梦幻西游天下贰".substr(i,1); txt.x=-20; txt.y=140 sprite.addChild(txt); sprite.buttonMode = true; sprite.filters=[new GlowFilter(0x666666,1,3,3)]; sprite.y = 0; contain.addChild(sprite); shapeList.push(sprite); } Sort(shapeList,30,60); } //对图像设置位置 private function Sort(array:Array,angle:Number,lens:Number):void { var len:int = array.length; for (var i:int=0; i<len; i++) { array[i].x = i * Math.cos(angle * Math.PI / 180) * lens; trace("angle"+angle+"宽度"+array[i].width); array[i].rotationY=(i%2==0?-angle:angle); } } } }

 

 

通过加载外部的一些图片，构建这种折纸的效果。可以变化得更加趣味，实现的基础对位图进行复制并重新组合在一起。

 

 

 

package { 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 Main extends Sprite { private var contain:Sprite=new Sprite();//容器 private var angle:int = 45;//默认开始角度45 private var shapeList:Array = []; private var image_width:Number=0;//一张图片宽度 private var point:Point; public function Main() { loadImage("1.jpg"); addChild(contain); contain.x = 65; contain.y = 50; contain.z = -100; contain.rotationY = -30; } //加载图片 private function loadImage(url:String):void { var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadImageComplete); loader.load(new URLRequest(url)); } private function onLoadImageComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE,onLoadImageComplete); var bitmapData:BitmapData=Bitmap(event.currentTarget.content).bitmapData; creatSprite(bitmapData,10); bitmapData.dispose(); stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler); } private function onMouseUpHandler(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); } //改变角度 private function onMouseMoveHandler(event:MouseEvent):void { angle=Math.abs((90*(mouseX-point.x)/(point.x))); Sort(shapeList,angle,image_width); } //创建一组图形 private function creatSprite(bitmapData:BitmapData,n:int):void { var width:Number=bitmapData.width/n;//图片宽度 var height:Number=bitmapData.height;//图片高度 image_width=width; for (var i:int=0; i<n; i++) { var sprite:Sprite=new Sprite(); var bmpData:BitmapData=new BitmapData(width,height); bmpData.copyPixels(bitmapData,new Rectangle(i*width,0,width,height),new Point(0,0));//复制像素 var bmp:Bitmap=new Bitmap(bmpData); bmp.x=-bmp.width/2; sprite.addChild(bmp); contain.addChild(sprite); if(i==n-1) { sprite.buttonMode = true; sprite.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler); } shapeList.push(sprite); } Sort(shapeList,0,width); } private function onMouseDownHandler(event:MouseEvent):void { point=new Point(mouseX,0); stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); } //对图像设置位置 private function Sort(array:Array,angle:Number,lens:Number):void { var len:int = array.length; for (var i:int=0; i<len; i++) { array[i].x = i * Math.cos(angle * Math.PI / 180) * lens; trace("angle"+angle+"宽度"+array[i].width); array[i].rotationY=(i%2==0?-angle:angle); } } } }