AS3.0实例学习 熟悉xml的运用

案例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的对齐方式,这里是左对齐,然后放到舞台上。

整个案例到此结束。
打包文件

(0)

相关推荐

  • AS3.0实例学习 熟悉xml的运用

    案例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.*

  • AS3.0 实例学习 熟悉AS3的package,以及多个package之间的相互通信

    熟悉AS3的package,以及多个package之间的相互通信 说明:一个很简单的demo,有4个按钮,当鼠标划过和移开时会呈现出不同的状态,单击后变成disabled,再点击其他的按钮时,之前disabled的按钮恢复,被点击的按钮失效. 演示:http://www.live-my-life-with-yuyi.com/as3_cases/communicating/ 准备工作:打开源文件communicating_final.fla,点击属性里的发布设置,点击Actionscript3旁边

  • AS3.0实例学习 熟悉新的事件机制和addChild的运用

    首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下知识. 水平有限,错误难免,欢迎大虾小虾,大鸟小鸟指正. 下面进入正题: 案例1:熟悉新的事件机制和addChild的运用 说明:拖动小人到滑板上,然后拖动滑板,可以发现小人已经跟滑板粘在了一起. 演示:http://www.live-my-life-with-yuyi.com/as3_cases/chan

  • AS3.0  实例学习 熟悉AS3的package,以及多个package之间的相互通信

    熟悉AS3的package,以及多个package之间的相互通信 说明:一个很简单的demo,有4个按钮,当鼠标划过和移开时会呈现出不同的状态,单击后变成disabled,再点击其他的按钮时,之前disabled的按钮恢复,被点击的按钮失效. 演示:http://www.live-my-life-with-yuyi.com/as3_cases/communicating/ 准备工作:打开源文件communicating_final.fla,点击属性里的发布设置,点击Actionscript3旁边

  • AS3.0 实例学习 熟悉addChild和removeChild在不同的swf之间的运用,以及loader的用法

    案例2:熟悉addChild和removeChild在不同的swf之间的运用,以及loader的用法 说明:点击picture会载入另一个swf,点击载入的swf上的一个按钮,该swf消失. 演示:http://www.live-my-life-with-yuyi.com/as3_cases/different_movies/ 代码: swfA(也就是按钮所在的flash) 复制代码 代码如下: var loader:Loader = new Loader();  loader.load(new

  • AS3.0 实例学习 熟悉tween以及tweenEvent的运用

    案例3:熟悉tween以及tweenEvent的运用 说明:点击标签载入特定的图片说明(其实是一个mc,只是坐标不同),同时还有渐隐渐现效果,没做loading,可能载入会有点慢. 演示: http://www.live-my-life-with-yuyi.com/as3_cases/dynamic_with_events/ 代码: 初始化,给一些变量赋值 复制代码 代码如下: import fl.transitions.Tween;  import fl.transitions.easing.

  • As3.0 xml + Loader应用代码

    AS2.0对XML的支持不是内建的(build-in),也并非基于ECMAScript for XML(E4X)标准.而AS3.0中对XML的支持符合E4X标准,它的设计有三个优点:  1. 简易.包括操作和可读性.你会发现AS3.0中对于XML的操作犹如对一个普通Object对象一样浅显易懂.语句非常浅白流畅.  2. 连续性.其各个功能的设计和AS3.0其余的部分思想一致,易于理解.  3. 熟悉.操作符和操作逻辑对我们来说都相当熟悉易用.  在AS2.0时代,为了解决这部分的问题 效率. 

  • AS3.0 通过类来实现一个gallery

    通过类来实现一个gallery 说明:一个比较简单的相册,通过类来实现. 演示:http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/ 准备工作:打开源文件class_final.fla,点击属性里的发布设置,点击Actionscript3旁边的设置,在最下面的classpath里,引入classes_final的文件夹的路径,然后点击确定,前期工作就准备完了. 代码: 唯一的一个类文件:ImageGallery.as 复制代

  • AS3笔记(13),sendAndLoad的继承者

    在As2中LoadVars和XML都有sendAndLoad方法,该方法可以使用 POST 方法将参数发送到指定的URL,下载服务器的响应并接受参数.在As3.0之前,是最普及的数据通讯方法之一.在AS3.0以后,XML方法已经参照E4X的规范来定义,早就没有了sendAndLoad方法,而LoadVars 类更是消失的无影无踪了. 其实早在AS2中就可以发现,sendAndLoad方法的设计很不合理,在两中数据对象中存在且机制相同.现在好了,AS3.0中很好的封装了这一功能,这就是URLLoa

  • 使用JDBC4.0操作XML类型的字段(保存获取xml数据)的方法

    在 Java SE 6 所提供的诸多新特性和改进中,值得一提的是为 Java 程序提供数据库访问机制的 JDBC 版本升级到了 4.0, 这个以 JSR-221 为代号的版本 , 提供了更加便利的代码编写机制及柔性 , 并且支持更多的数据类型 . JDBC 4.0 的新特性分为下述四类: 1. 驱动及连接管理 2. 异常处理 3. 数据类型支持 4. API 的变化 以上说这么都不是本文要讲的重点内容,下面给大家介绍jdbc4.0操作xml类型数据的方法,具体详情如下所示: 在JDBC4.0推出

随机推荐