通过实例学习Flash AS3.0——案例四

相关文章：通过实例学习as3.0——案例三
首先声明：本人大菜鸟一个，刚接触as3不久，许多理念还没来得及灌输，这些case都是从网上down的，但因为解说是英文的，不利我们学习，我就充当一个translater，顺便可以让自己巩固一下知识。
水平有限，错误难免，欢迎大虾小虾，大鸟小鸟指正。
下面进入正题：
案例4：熟悉xml的运用
说明：一个简单的相册，先载入xml，然后载入xml列表里的images缩略图，点击缩略图出现大图以及大图的说明。这个案例较前面几个复杂了一些，不过如果熟悉了as3的语法，还是比较容易理解的。
演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/
代码：
import fl.transitions.tween;
import fl.transitions.easing.*;
var imagetext:textfield = new textfield();
var fadetween:tween;
var imageloader:loader;
var xml:xml;
var xmllist:xmllist;
var xmlloader:urlloader = new urlloader();
xmlloader.load(new urlrequest("data/images.xml"));
xmlloader.addeventlistener(event.complete, xmlloaded);
跟之前的一样，先导入几个包，这是为了实现图片的渐入渐出效果。然后是定义几个变量，这里xmllist可能比较陌生，这个变量的作用主要是获得xml的child列表，下面具体运用的时候，它的作用就一目了然了。
通过urlloader载入xml，然后监听xml，一旦载入完成，就触发xmlloaded函数。
function xmlloaded(event:event):void
{
xml = xml(event.target.data);
xmllist = xml.children();
for(var i:int = 0; i < xmllist.length(); i )
{
imageloader = new loader();
imageloader.load(new urlrequest(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函数。
然后将缩略图放到舞台上，并监听它的鼠标点击事件。
function showpicture(event:mouseevent):void
{
imageloader = new loader();
imageloader.load(new urlrequest(event.target.name));
imageloader.x = 200;
imageloader.y = 25;
addchild(imageloader);
imagetext.x = imageloader.x;
imagetext.y = 351;
for(var j:int = 0; j < xmllist.length(); j )
{
if(xmllist[j].attribute("source") == event.target.name)
{
imagetext.text = xmllist[j];
}
}
fadetween = new tween(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的对齐方式，这里是左对齐，然后放到舞台上。
整个案例到此结束。
源文件下载