将图像装载入网格

讨论装载图片，也许你说啊那很容易啊，你可以用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 " );

 

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