如何通过XML加载外部图片

2024-08-19

4125

今天要实现的效果是，从外部的XML中读取四张图片，分别放到舞台上建立好的四个容器中，并改变大小适应容器的大小。首先我们新建一个空白的Flash文件。接着我们新建4个注册点在左上角的影片剪辑，填

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

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

接着我们新建4个注册点在左上角的影片剪辑，填充色未50%黑色，最好大小都不相同，给四个容器分别取名字为mc0、mc1、mc2、mc3，并且写出他们要加载的图片内容名字，以便于我们明显地观察加载是否按照既定的顺序进行。如图所示，我们打算加载四张动物图片进来，所以要先找四张动物图片到硬盘某个位置存好。为了方便起见，我就放在fla本地目录下，这个过程自己完成，大小不限。

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

lt;?xml version"1.0" encoding"utf-8"?gt;
lt;datagt;
  lt;pictures amount"4"gt;
    lt;pathgt;;/pathgt;
    lt;pathgt;;/pathgt;
    lt;pathgt;;/pathgt;
    lt;pathgt;;/pathgt;
  lt;/picturesgt;
lt;/datagt;

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

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

然后我们写一个加载函数：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();
    "loader_"   index;
  mLoader.load(new URLRequest(path));
  (, completeLoad);
}
function completeLoad(e:Event):void {
  var targetLoader:Loader   as Loader;
  var index:int  int((7));
  var getPic:Bitmap  Bitmap();
  var currentCup:Sprite  this["mc"   index] as Sprite;
  getPic.width  currentCup.width;
  getPic.height  currentCup.height;
  (getPic);
}

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

然后我们写加载解析XML文件数据的函数：

//加载XML数据
function loadXMLData(path:String):void {
  var xLoader:URLLoader  new URLLoader();
  (, completeLoadData);
  xLoader.load(new URLRequest(path));
}
function completeLoadData(e:Event):void {
  var mXML:XML  XML();
  var len:int  int(@amount);
  for(var i:int  0; i < len; i  ) {
    var mPath:String  [i];
    loadPic(mPath, this["mc"   i], i);
  }
}

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

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

addMouseEvent();
function addMouseEvent():void {
  (, loadPicInfo);
}
function loadPicInfo(e:MouseEvent):void {
  loadXMLData("picData.xml");
}

单击按钮，便发现四张图加载进来，并且充满了四个容器。制作完毕！

相关推荐