Flash 与课件制作：加载图片

 Flash 与课件制作：加载图片

 

 

 

 

   今天下午写了一下这个简单的东西，加载图片。今晚我们玩一下课件的制作，flash 制作课件是一个很实用的东西，能够制造很多动态的效果。当然要制作这些东西花费时间也不少。今晚我们只是利用绘图APi 以及loader 这两个类进行对本地的图片进行加载。但是我们加载的时候 显示的进度会有一些特别，采用扇形填充的方式来填充。有关扇形的东西可以观看之前写的一篇扇形的话题。

 

加载图片我们使用loader 这个类就可以了，为了让其看起来更加好看，我们可以对图片进行加工，也就是说对图片底部进行一个阴影制作。我们借用滤镜就可以使用到了。非常方便。同时，这个制作当中，我们使用了一个进度显示。也是一个比较有趣的进度显示，采用扇形填充的方式对其图片进行变化。当加载完毕的时候，对图片进行偏移一个位置，这样我们的进度条显示就能够居中。

 

 

 

package { // 写于2010年6月2日，图片加载的进度显示 // 夏天的树人 import flash.display.Sprite; import flash.display.Loader; import flash.display.Shape; import flash.display.LoaderInfo; import flash.display.Bitmap; import flash.net.*; import flash.system.ApplicationDomain; import flash.events.*; import flash.filters.DropShadowFilter; import flash.text.*; public class PhotoLoader extends Sprite { //定义事件 public static const COMPLETE:String=Event.COMPLETE; public static const PROGRESS:String=ProgressEvent.PROGRESS; public static const IO_ERROR:String=IOErrorEvent.IO_ERROR; public static const INIT:String=Event.INIT; private var filter:DropShadowFilter; private var contents:*; private var isActive:Boolean=false; private var pen:Shape=new Shape(); private var bottom:Shape=new Shape(); private var contain:Sprite=new Sprite(); private var loadinfo:TextField=new TextField(); public function PhotoLoader() { init(); } //初始化阴影滤镜 private function init():void { filter=new DropShadowFilter(); filter.strength=0.3; addChild(bottom); addChild(pen); bottom.graphics.lineStyle(1); bottom.graphics.beginFill(0xffffff); bottom.graphics.drawCircle(0,0,30); bottom.graphics.endFill(); bottom.filters=[filter]; addChild(contain); addChild(loadinfo); } //加载图片 public function load(path:String,isActive:Boolean=true):void { var loader:Loader=new Loader(); //addChild(loader); this.isActive=isActive; loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete); loader.contentLoaderInfo.addEventListener(Event.INIT,onInit); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onErrorHandler); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onProgress); loader.load(new URLRequest(path)); } private function onInit(event:Event):void { this.content=event.currentTarget.content; this.dispatchEvent(new Event(PhotoLoader.INIT)); } public function get content():* { return contents; } public function set content(contents:*):void { this.contents=contents; } private function onComplete(event:Event):void { event.currentTarget.addEventListener(Event.COMPLETE,onComplete); event.currentTarget.removeEventListener(ProgressEvent.PROGRESS,onProgress); var bitmap:*=event.currentTarget.content; this.content=bitmap; contain.addChild(bitmap); bitmap.x=this.width*=-0.5; bitmap.y=this.height*=-0.5; loadinfo.text=""; this.removeChild(loadinfo); this.dispatchEvent(new Event(PhotoLoader.COMPLETE)); pen.graphics.clear(); if (isActive) { drawBase(bitmap.width,bitmap.height); } } private function onProgress(event:ProgressEvent):void { loadinfo.text=Math.floor(event.bytesLoaded/event.bytesTotal*100).toString()+"/%"; drawProgressBar(event.bytesLoaded/event.bytesTotal*360); this.dispatchEvent(new Event(PhotoLoader.PROGRESS)); } private function onErrorHandler(event:IOErrorEvent):void { this.dispatchEvent(new Event(PhotoLoader.IO_ERROR)); } //绘制图片底部 private function drawBase(w:Number,h:Number):void { var shape:Shape=new Shape(); contain.addChildAt(shape,0); shape.graphics.lineStyle(0,0,0); shape.graphics.beginFill(0xffffff); shape.graphics.drawRect(this.content.x-w/20,this.content.y-h/20,w+w/10,h+h/10); shape.graphics.endFill(); shape.filters=[filter]; } //进度显示，用于进度条显示 private function drawProgressBar(startAngle:Number):void { pen.graphics.clear(); pen.graphics.lineStyle(1); pen.graphics.beginFill(0x8000FF); pen.graphics.moveTo(0,0); for (var i:int=0; i<startAngle; i++) { var px:Number=30*Math.cos(-i*Math.PI/180); var py:Number=30*Math.sin(-i*Math.PI/180); pen.graphics.lineTo(px,py); } pen.graphics.lineTo(0,0); pen.graphics.endFill(); } } }

 

 

 

初步使用，然后对图片进行分布。这个分布也是我们常用一种技巧。

分布学当中一种很常用应用。矩阵分布方式。

package { import flash.display.MovieClip; import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.Bitmap; import flash.net.*; import flash.system.ApplicationDomain; import flash.events.*; public class Main extends MovieClip { private var loader:PhotoLoader; public function Main() { init(); } //循环加载12张图片 private function init():void { for (var i:int=1; i<=12; i++) { loader=new PhotoLoader(); addChild(loader); if (i<=3) { loader.x=(i)*140+(i)*20; loader.y=100; } else if(i>3 && i<=6) { loader.x=(i-3)*140+(i-3)*20; loader.y=220; } else if(i>6 && i<=9) { loader.x=(i-6)*140+(i-6)*20; loader.y=340; } else { loader.x=(i-9)*140+(i-9)*20; loader.y=460; } loader.addEventListener(PhotoLoader.COMPLETE,imageLoadComplete); loader.addEventListener(PhotoLoader.PROGRESS,onProgress); loader.addEventListener(PhotoLoader.IO_ERROR,onErrorHandler); loader.load("image/"+i+".jpg"); } } private function imageLoadComplete(event:Event):void { } private function onProgress(event:Event):void { } private function onErrorHandler(event:Event):void { } } }

 

 

扩展：扇形的知识，同时可以对图片增加交互的实验。对鼠标进行交互

 

好了，写到这里。累了。