<b>通过实例学习AS3.0——案例四</b>[Flash设计]

首先声明:本人大菜鸟一个,刚接触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的对齐方法,这里是左对齐,然后放到舞台上.

整个案例到此完毕.

源文件下载