[AS3编程教学]如何通过xml加载外部图片

1、首先我们新建一个空白的Flash文件。

 

2、我们新建4个注册点在左上角的影片剪辑，填充色未50%黑色，最好大小都不相同，给四个容器

 

分别取名字为mc0,mc1,mc2,mc3,并且写出他们要加载的图片内容名字，以便于我们明显地观察加载是否按照既定的顺序进行：

 

如图所示，我们打算加在四张动物图片进来，所以要先找四张动物图片到硬盘某个位置存好。为了方便起见，我就放在fla本地目录下，这个过程自己完成，大小不限。

 

3、下面我们写一个xml文件，用来保存四张图片信息，我们稍后就是通过读取这个xml文件，解析得到其中的图片数据，然后通过其中的图片路径加载进来到四个容器中。xml如下：

 

<?xml version="1.0" encoding="utf-8" ?>

 

<data>

 

<pic amount="4">

 

<path>pic/1.jpg</path>

 

<path>pic/2.jpg</path>

 

<path>pic/3.jpg</path>

 

<path>pic/4.jpg</path>

 

</pic>

 

</data>

 

我们把图片保存在fla文件所在位置的pic目录下。

 

4、接下来我们放一个按钮在舞台上，上面有“加载”两个字，取实例名未btnLoad:

 

5、接下来我们写一个加载函数：loadPic(path:String,cup:Sprite,index:int):void,就如这个函数名和参数所示，功能就是把path路径的图片加载到cup容器中去,index是加载顺序编号，在连续的加载过程中，这个编号往往是很有用的：

 

//加载图片到容器中

 

function loadPic(path:String,cup:Sprite,index:int):void

 

{

 

var mLoader:Loader = new Loader();

 

mLoader.name = "loader" + index;

 

mLoader.load(new URLRequest(path));

 

mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeLoad);

 

}

 

function completeLoad(e:Event):void {

 

var targetLoader:Loader = e.target.loader as Loader;

 

var index:int =int(targetLoader.name.slice(6));

 

var getPic:Bitmap = Bitmap(targetLoader.content);

 

var curentCup:Sprite = this["mc" + index] as Sprite;

 

getPic.width = curentCup.width;

 

getPic.height = curentCup.height;

 

curentCup.addChild(getPic);

 

}

 

我们给mLoader一个name属性，作用是在后面判断到底加载的是哪个容器。

 

6、然后我们写加载解析xml文件数据的函数如下：

 

//加载xml数据

 

function loadXMLData(path:String):void

 

{

 

var xLoader:URLLoader = new URLLoader();

 

xLoader.addEventListener(Event.COMPLETE,completeLoadData);

 

xLoader.load(new URLRequest(path));

 

}

 

function completeLoadData(e:Event):void

 

{

 

var mXML:XML = XML(e.target.data);

 

var len:int = int(mXML.pic.@amount);

 

for(var i:int = 0;i<len;i++)

 

{

 

var mPath:String = mXML.pic.path[i];

 

loadPic(mPath,this["mc"+i],i);

 

}

 

}

 

4个图片的路径在读取出来的时候便同时加载了图片

 

7、最后我们给按钮btnLoad加上加载图片的功能，按钮来衔接完成读取xml数据和图片加载的功能。

 

addMouseEvent();

 

function addMouseEvent():void

 

{

 

btnLoad.addEventListener(MouseEvent.CLICK,loadPicInfo);

 

}

 

function loadPicInfo(e:MouseEvent):void

 

{

 

loadXMLData("picData.xml");

 

}

 

单击按钮，便发现四张图加载进来，并且充满了四个容器:)

 

制作完毕！