案例4：熟悉xml的运用

说明：一个简单的相册，先载入xml，然后载入xml列表里的images缩略图，点击缩略图出现大图以及大图的说明。这个案例较前面几个复杂了一些，不过如果熟悉了AS3的语法，还是比较容易理解的。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/

代码：

复制代码 代码如下:

importfl.transitions.Tween;

importfl.transitions.easing.*;

varimageText:TextField=newTextField();

varfadeTween:Tween;

varimageLoader:Loader;

varxml:XML;

varxmlList:XMLList;

varxmlLoader:URLLoader=newURLLoader();

xmlLoader.load(newURLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);

跟之前的一样，先导入几个包，这是为了实现图片的渐入渐出效果。然后是定义几个变量，这里xmlList可能比较陌生，这个变量的作用主要是获得xml的child列表，下面具体运用的时候，它的作用就一目了然了。

通过URLLoader载入xml，然后监听xml，一旦载入完成，就触发xmlLoaded函数。

复制代码 代码如下:

functionxmlLoaded(event:Event):void

{

xml=XML(event.target.data);

xmlList=xml.children();

for(vari:int=0;i<xmlList.length();i++)

{

imageLoader=newLoader();

imageLoader.load(newURLRequest(xmlList[i].attribute("thumb")));

imageLoader.x=25;

imageLoader.y=i*150+25;

imageLoader.name=xmlList[i].attribute("source");

addChild(imageLoader);

imageLoader.addEventListener(MouseEvent.CLICK,showPicture);

}

}

这里有一些地方需要注意，比如第一句

xml=XML(event.target.data);

如果直接

xml=event.target.data

会报错，因为两个变量的类型不一样。

这里可以看到xmlList，它是取得xml的children，对于使用xml非常方便。

然后实例化imageLoader，并载入xmlList里定义的缩略图，注意这里的写法。

调整一下坐标，并给imageLoader添加了一个name属性，这个属性的值就是xml文件里的图片地址，这有利于下面的showPicture函数。

然后将缩略图放到舞台上，并监听它的鼠标点击事件。

复制代码 代码如下:

functionshowPicture(event:MouseEvent):void

{

imageLoader=newLoader();

imageLoader.load(newURLRequest(event.target.name));

imageLoader.x=200;

imageLoader.y=25;

addChild(imageLoader);

imageText.x=imageLoader.x;

imageText.y=351;

for(varj:int=0;j<xmlList.length();j++)

{

if(xmlList[j].attribute("source")==event.target.name)

{

imageText.text=xmlList[j];

}

}

fadeTween=newTween(imageLoader,"alpha",None.easeNone,0,1,1,true);

}

imageText.autoSize=TextFieldAutoSize.LEFT;

addChild(imageText);

这个点击后显示大图的函数，由于前面已经给name属性添加了图片地址，所以这里直接拿来用就可以了。

大图载入后分配一下坐标，添加到舞台上，接下来就该显示图片的说明了。

这里的做法是循环xmlList，然后比较xml里source是否与这里的name相等，是的话，将该xml的值赋予imageText，不过显然有更简单的做法，就是在上面的xmlLoaded函数中为imageLoader添加一个text属性，然后在showPicture里直接拿来用就可以了。

然后给图片来一个渐入效果，这个之前已经讲过了。

最后两行是定义imageText的对齐方式，这里是左对齐，然后放到舞台上。

整个案例到此结束。

打包文件