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

来源：互联网 2023-03-17 00:10:18 282

今天要实现的效果是，从外部的xml中读取四张图片，分别放到舞台上实现建立好的四个容器中，并改变大小适应容

器的大小。

工具/原料

FlashCS3（及其以上版本），xml文件，4张图片

步骤/方法

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

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

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

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

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

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

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目录下。

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

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

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

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属性，作用是在后面判断到底加载的是哪个容器。

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

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;ilen;i )

{

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

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

}

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

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

6相关内容未经许可获取自百度经验

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

addMouseEvent();

function addMouseEvent():void

{

btnLoad.addEventListener(MouseEvent.CLICK,loadPicInfo);

}

function loadPicInfo(e:MouseEvent):void

{

loadXMLData("picData.xml");

}

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

制作完毕！

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

注意事项

容器不要只做一个，然后在舞台上复制四个出来，这样虽然能完成加载工作，但是比例缩放并不能改变元件的width和height值，这样你设置加载进来图片后设置尺寸时会发现总是设不对。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签：编程

上一篇：编程怎么入门/程序员需要学什么下一篇：java入门之如何编写第一个程序HelloWorld

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

工具/原料

步骤/方法

注意事项

热门文章

标签列表