首先声明:本人大菜鸟一个,刚接触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的对齐方式,这里是左对齐,然后放到舞台上。
整个案例到此结束。
源文件下载
经典论坛讨论: http://bbs.blueidea.com/thread-2807809-1-1.html
本文链接:http://www.blueidea.com/tech/multimedia/2007/5100.asp
出处:蓝色理想
责任编辑:moby
◎进入论坛RIA设计与应用版块参加讨论
|