每天学一点flash（73） 恋上我的CD

 

   

 

     这几天看了同学一张自制光盘，觉得很有意思，于是尝试通过as3编程来制作这个类，其实就是使用了绘图API类通过填充位图的方式来实现这种cd的效果。

 

我们需要准备的材料是几张图片。这些图片通过外部加载的方式来实现获取位图的数据，然后通过一个函数beginBitmapFill 使用位图来进行填充这个圆形。而中间的周边的圆则是通过drawCircle 来进行绘制，绘制过程当中，使用一些接近灰色的颜色来实现搭配，这样看起来有的胶泽的味道在里面。

 

制作流程：

 

           1. 外部加载图片.

           2.使用位图对图片进行填充beginBitmapFill

           3.在填充完成之后，drawCircle 几个圆用于cd中间的圆圈

           4。可以尝试封装加载的方式对图像进行管理。

整个流程使用的 并没有什么的算法，而仅仅是使用我们平时的绘图api进行创作。当你慢慢发现到绘图api 魅力的时候，你就可以像画家一样操控画笔进行描绘你的图案。这样又多了一样好玩的东西了。

          

 

 

 测试：

package { import flash.display.*; import flash.net.*; import flash.events.*; import flash.filters.*; import flash.geom.*; public class Example extends Sprite { private var manager:CDManager=new CDManager();//cd管理类 public function Example() { init(); } private function init():void { manager.addEventListener(CDManager.LOAD_ALL_COMPLETE,onLoadAllComplete); manager.addImage("cd1",this,100,"1.jpg",true);//添加图片列表 manager.addImage("cd2",this,100,"2.jpg",true); manager.addImage("cd3",this,100,"3.jpg",true); manager.addImage("cd4",this,100,"4.jpg",true); manager.addImage("cd5",this,100,"5.jpg",true); manager.addImage("cd6",this,100,"6.jpg",true); manager.start();//开始加载外部图片 } private function onLoadAllComplete(event:Event):void { manager.getImage("cd1").drawCD(manager.getImage("cd1").content,10,15,30,new Point(-280,-180));//绘制cd图案 manager.move("cd1",stage.stageWidth/2-100,stage.stageHeight/2+150);//设置位置 manager.getImage("cd1").filters=[new DropShadowFilter(3,45,0.5,1,1)]; manager.getImage("cd2").drawCD(manager.getImage("cd2").content,10,15,30,new Point(-170,-230)); manager.move("cd2",stage.stageWidth/2-200,stage.stageHeight/2); manager.getImage("cd2").filters=[new DropShadowFilter(3,45,0.5,1,1)]; manager.getImage("cd3").drawCD(manager.getImage("cd3").content,10,15,30,new Point(-280,-100)); manager.move("cd3",stage.stageWidth/2,stage.stageHeight/2); manager.getImage("cd3").filters=[new DropShadowFilter(3,45,0.5,1,1)]; manager.getImage("cd4").drawCD(manager.getImage("cd4").content,10,15,30,new Point(-180,-100)); manager.move("cd4",stage.stageWidth/2+200,stage.stageHeight/2); manager.getImage("cd4").filters=[new DropShadowFilter(3,45,0.5,1,1)]; manager.getImage("cd5").drawCD(manager.getImage("cd5").content,10,15,30,new Point(-180,-100)); manager.move("cd5",stage.stageWidth/2+200,stage.stageHeight/2-200); manager.getImage("cd5").filters=[new DropShadowFilter(3,45,0.5,1,1)]; manager.getImage("cd6").drawCD(manager.getImage("cd6").content,10,15,30,new Point(-400,-100)); manager.move("cd6",stage.stageWidth/2,stage.stageHeight/2-200); manager.getImage("cd6").filters=[new DropShadowFilter(3,45,0.5,1,1)]; } } }

 

 

 package { import flash.utils.Dictionary; import flash.events.*; import flash.display.DisplayObjectContainer; public class CDManager extends EventDispatcher { private var data:Dictionary=new Dictionary(true); private var length:int=0; public static const LOAD_ALL_COMPLETE:String="loadallcomplete";//加载 public function CDManager() { } //添加图片 public function addImage(id:String,parent:DisplayObjectContainer,radius:Number,url:String,istartDrag:Boolean=false):void { var obj:Object={}; obj.id=id; obj.url=url; obj.item=new LoveCD(radius); obj.istartDrag=istartDrag; parent.addChild(obj.item); data[id]=obj; length++; } //开始加载 public function start():void { for each (var obj:* in data) { obj.item.loadImage(obj.url); obj.item.addEventListener(LoveCD.LOAD_COMPLETE,onLoadComplete); if(obj.istartDrag) { obj.item.addEventListener(MouseEvent.MOUSE_DOWN,onStartDragHandler); obj.item.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler); } } } private function onLoadComplete(event:Event):void { event.currentTarget.removeEventListener(LoveCD.LOAD_COMPLETE,onLoadComplete); length--; if(length==0) { this.dispatchEvent(new Event(CDManager.LOAD_ALL_COMPLETE)); } } //拖动 private function onStartDragHandler(event:MouseEvent):void { event.currentTarget.buttonMode=true; event.currentTarget.startDrag(false); } //停止拖动 private function onStopDragHandler(event:MouseEvent):void { event.currentTarget.buttonMode=false; event.currentTarget.stopDrag(); } //获取图片 public function getImage(id:String):LoveCD { return data[id].item; } public function move(id:String,x:Number,y:Number):void { data[id].item.x=x; data[id].item.y=y; } } }

 

LoveCD.as

package { import flash.display.*; import flash.net.*; import flash.events.*; import flash.filters.*; import flash.geom.*; public class LoveCD extends Sprite { private var radius:Number; private var _bitmap:Bitmap; public static const LOAD_COMPLETE:String="complete"; public var url:String; public function LoveCD(radius:Number) { this.radius=radius; } //加载图片 public function loadImage(url:String):void { this.url=url; var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onErrorHandler); loader.load(new URLRequest(url)); } //绘制底部 public function drawBase():void { var bottomShape:Shape=new Shape(); addChild(bottomShape); //trace(radius); bottomShape.graphics.beginFill(0xffffff,0.5); bottomShape.graphics.drawCircle(0,0,this.radius); bottomShape.graphics.drawCircle(0,0,this.radius-2); bottomShape.graphics.endFill(); } private function onErrorHandler(event:Event):void { throw new Error("发送错误"); } private function onLoadComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE,onLoadComplete); event.currentTarget.removeEventListener(IOErrorEvent.IO_ERROR,onErrorHandler); var bitmap:Bitmap=Bitmap(event.currentTarget.content); this.content=bitmap; this.dispatchEvent(new Event(LoveCD.LOAD_COMPLETE)); } //设置位图 public function set content(value:Bitmap):void { this._bitmap=value; } public function get content():Bitmap { return this._bitmap; } public function move(x:Number,y:Number):void { this.x=x; this.y=y; } //绘制CD,radiusA,radiusB,radiusC，由小到大 public function drawCD(image:Bitmap,radiusA:Number,radiusB:Number,radiusC:Number,offPoint:Point=null,repeat:Boolean=false,smooth:Boolean=false):void { drawBase(); var maskShape:Shape=new Shape(); maskShape.x=0; maskShape.y=0; addChild(maskShape); if (offPoint==null) { maskShape.graphics.beginBitmapFill(image.bitmapData,null,repeat,smooth); } else { maskShape.graphics.beginBitmapFill(image.bitmapData,new Matrix(1,0,0,1,offPoint.x,offPoint.y),repeat,smooth); } maskShape.graphics.drawCircle(0,0,radiusA); maskShape.graphics.drawCircle(0,0,radius-2); maskShape.graphics.endFill(); var shapeB:Shape=new Shape(); shapeB.x=0; shapeB.y=0; addChild(shapeB); shapeB.graphics.beginFill(0x999999,0.3); shapeB.graphics.lineStyle(0,0x999999); shapeB.graphics.drawCircle(0,0,radiusB); shapeB.graphics.drawCircle(0,0,radiusB+2); shapeB.graphics.drawCircle(0,0,radiusC); shapeB.graphics.endFill(); shapeB.graphics.lineStyle(0,0xffffff,0.6); shapeB.graphics.drawCircle(0,0,radiusC-1); } } }