将图像装载入网格

讨论装载图片，也许你说啊那很容易啊，你可以用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依次类推，这样来声明

varyOffset:Number = 10 ;

varxOffset:Number = 10 ;

varimageWidth:Number = 100 ;

varimageHeight:Number = 100 ;

varcolumnNumber:Number = 3 ;

varrowNumber: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++)

...{

vartitles=items[i].attributes.imageUrl;

vartexts=items[i].attributes.linkUrl;

generateImage(i,imageUrl,linkUrl);

}

}

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

functioncreateItem(i:Number,imageUrl:String,linkUrl:String):Void ... {

varitemClip: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 >

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

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

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

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

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

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

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

</ grid >

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

#include " mc_tween2.as "

varmyXmlVar:XML = new XML();

myXmlVar.ignoreWhite = true ;

varyOffset:Number = 10 ;

varxOffset:Number = 10 ;

varimageWidth:Number = 100 ;

varimageHeight:Number = 100 ;

varcolumnNumber:Number = 3 ;

varrowNumber:Number = Math.round(Math.max());

myXmlVar.onLoad = function()

... {

myArray=this.firstChild.childNodes;

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

...{

vartitles=items[i].attributes.imageUrl;

vartexts=items[i].attributes.linkUrl;

generateImage(i,imageUrl,linkUrl);

}

}

functiongenerateImage(i:Number,imageUrl:String,linkUrl:String):Void ... {

varitemClip: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 " );

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