通过XML批量装载图片

翻译转贴外国友人博客，FLEX的老鸟们，这篇文章技术含量不是很高（鄙人翻译完了才发现）

 讨论装载图片，也许你说啊那很容易啊，你可以用loadMovie("imageURL")，但是那不是我要在这里谈论的，我们要通过XML装载他们，OK仍然不是什么困难的问题，只是要将将他们装入一个网格而已

首先我们要使用一个补间类来填充延迟（延时可能很长）

#include "mc_tween2.as"//包含一个补间类

接着我们创建一个XML对象，这样我们就可以在转载图片对象的时候使用XML 属性了。

var myXmlVar:XML = new XML();

myXmlVar.ignoreWhite = true;

ignoreWhite 是XML的一个参数，控制XML是否有二义性，如果一个文本节点以空格开头，在运行时就会被丢弃，接下来创建一个数组来存放XML标记

var myArray:Array = new Array();

然后，我们需要创建更多的一些变量，在我们创建格子的时候，他能够被正确的放置，下面我给出了一个表展示这些变量是干什么的

 

方块上方的间隔称为yOffset 对应的xOffset也可以依次类推，图片的宽和高分别命名为imageWidth 和imageHeight，columnNumber 是要放置的图片的行书，rowNumber依次类推，这样来声明

var yOffset:Number = 10;

var xOffset:Number = 10;

var imageWidth:Number = 100;

var imageHeight:Number = 100;

var columnNumber:Number = 3;

var rowNumber:Number = Math.round(Math.max());

Math.round(Math.max())这一点对于那些想要无限行列格子的人来说很重要。如果你想要设置数值，改了就是了。下面我们创建一个当XML对象创建时候调用的函数，所以我们会显式的使用ONLOAD函数，在这里面，我们将添加一些XML元素的属性，在接下来的FOR循环里面从XML遍历装载的数据，然后将其发送到一个后面将创建的一个新函数，这个函数将这些数据转换为图片并放置它

myXmlVar.onLoad = function()

{

myArray = this.firstChild.childNodes;

for (i=0; i<items.length; i++)

{

var titles = items[i].attributes.imageUrl;

var texts = items[i].attributes.linkUrl;

generateImage(i,imageUrl,linkUrl);

}

}

下面就来看看这个读取数据装载函数

 

function createItem(i:Number, imageUrl:String, linkUrl:String):Void {

var itemClip:MovieClip = _root.attachMovie("linkage", "item"+i, i);

itemClip._x = (i%columnNumber)*imageWidth+xOffset;

itemClip._y = Math.floor(i/rowNumber)*rowNumber+yOffset;

itemClip.holder.loadMovie(imageUrl);

itemClip.onRelease = function()

{

getURL(linkUrl);

}

}

So that's almost it apart from out final and most important line:

myXmlVar.load("yourXml.xml");

OK. Now here is how your XML should work:

<grid>

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

<photo linkUrl="http://start.deepdesigners.com/" imageUrl="images/1.jpg" />

</grid>

如果象我一样懒，下面就是所有的代码

#include "mc_tween2.as"

var myXmlVar:XML = new XML();

myXmlVar.ignoreWhite = true;

var yOffset:Number = 10;

var xOffset:Number = 10;

var imageWidth:Number = 100;

var imageHeight:Number = 100;

var columnNumber:Number = 3;

var rowNumber:Number = Math.round(Math.max());

myXmlVar.onLoad = function()

{

myArray = this.firstChild.childNodes;

for (i=0; i<items.length; i++)

{

var titles = items[i].attributes.imageUrl;

var texts = items[i].attributes.linkUrl;

generateImage(i,imageUrl,linkUrl);

}

}

function generateImage(i:Number, imageUrl:String, linkUrl:String):Void {

var itemClip:MovieClip = _root.attachMovie("linkage", "item"+i, i);

itemClip._x = (i%columnNumber)*imageWidth+xOffset;

itemClip._y = Math.floor(i/rowNumber)*rowNumber+yOffset;

itemClip.holder.loadMovie(imageUrl);

itemClip.onRelease = function()

{

getURL(linkUrl);

}

}

myXmlVar.load("yourXml.xml");

So hope you like this.

Simon Shand

 

源文档 <http://start.deepdesigners.com/tutorial/loading-images-into-a-grid-as2/>