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
{

}
}
}

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

好了，写到这里。累了。