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

代码如下:

package interactive.gallery 

    import flash.display.*; 
    import flash.events.*; 
    import fl.transitions.*; 
    import fl.transitions.easing.*; 
    import flash.filters.*; 
    import flash.net.*; 
    public class ImageGallery extends MovieClip 
    { 
        var xml:XML; 
        var xmlList:XMLList; 
        var xmlLoader:URLLoader = new URLLoader(); 
        var container:MovieClip = new MovieClip(); 
        var imageLoader:Loader; 
        var segments:Number; 
        var currentSegment:int; 
        var fullLoader:Loader = new Loader(); 
        var xmlPath:String; 
        var thumbAtt:String; 
        var fullAtt:String 
        public function ImageGallery(path:String,thumb:String, full:String) 
        { 
            section1 
        } 
        function xmlLoaded(event:Event):void 
        { 
            section2 
        } 
        function changeThumb(event:MouseEvent):void 
        { 
            section3 
        } 
        function showPicture(event:MouseEvent):void 
        { 
            section4 
        } 
    } 
}

section1代码:

代码如下:

xmlPath = path; 
thumbAtt = thumb; 
fullAtt = full; 
container.x = 25; 
container.y = 25; 
fullLoader.x = 200; 
fullLoader.y = 25; 
container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb); 
container.addEventListener(MouseEvent.CLICK, showPicture); 
xmlLoader.load(new URLRequest(xmlPath)); 
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded); 
container.filters = [new DropShadowFilter()]; 
addChild(container); 
addChild(fullLoader);

这段代码的功能就是在初始化类时,给一些以后会用到的变量赋值,因为这些变量是全局变量,所以后面的function都能用。
对container添加了监听事件,监听鼠标移动和点击。
然后载入xml文件,当xml载入完成后,执行xmlLoaded函数
然后对container应用了阴影滤镜,这个container就是将来我们要载入图片的mc。
然后将container和fullLaoder放到舞台上,fullLoader将来会载入大图。

section2

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(thumbAtt)));
    container.addChild(imageLoader);
}
当xml载入完成后就会执行这个函数,先是获取xml对象列表,然后获取xml的子元素。这个在前面的教程提及过。
遍历子元素,然后通过Loader载入图片,并将imageLoader添加到container里。

section3

代码如下:

segments = container.width / container.numChildren; 
currentSegment = Math.floor(container.mouseX / segments); 
if (currentSegment <= container.numChildren - 1) 

    for (var j:int = 0; j < container.numChildren; j++) 
    { 
        container.getChildAt(j).visible = false; 
    } 
container.getChildAt(currentSegment).visible = true; 
}

这个函数是响应鼠标在缩略图上移动的事件,有一个算法在里面。
将mc的宽除以载入的缩略图的数量,得到一个平均数。
然后将当前鼠标的x位移除以刚刚得到的平均数就得到了当前鼠标所在的图片(听着有点别扭)
然后先将所有container里的child隐藏起来,再显示当前的图片。

section4

fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
这个是响应缩略图点击事件,当点击后先去掉先前载入的大图,然后再去载入缩略图对应的大图。
其实也不难,不是吗?

再拉看一下完整的代码

代码如下:

package interactive.gallery 

    import flash.display.*; 
    import flash.events.*; 
    import fl.transitions.*; 
    import fl.transitions.easing.*; 
    import flash.filters.*; 
    import flash.net.*; 
    public class ImageGallery extends MovieClip 
    { 
        var xml:XML; 
        var xmlList:XMLList; 
        var xmlLoader:URLLoader = new URLLoader(); 
        var container:MovieClip = new MovieClip(); 
        var imageLoader:Loader; 
        var segments:Number; 
        var currentSegment:int; 
        var fullLoader:Loader = new Loader(); 
        var xmlPath:String; 
        var thumbAtt:String; 
        var fullAtt:String 
        public function ImageGallery(path:String,thumb:String, full:String) 
        { 
            xmlPath = path; 
            thumbAtt = thumb; 
            fullAtt = full; 
            container.x = 25; 
            container.y = 25; 
            fullLoader.x = 200; 
            fullLoader.y = 25; 
            container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb); 
            container.addEventListener(MouseEvent.CLICK, showPicture); 
            xmlLoader.load(new URLRequest(xmlPath)); 
            xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded); 
            container.filters = [new DropShadowFilter()]; 
            addChild(container); 
            addChild(fullLoader); 
        } 
        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(thumbAtt))); 
                container.addChild(imageLoader); 
            } 
        } 
        function changeThumb(event:MouseEvent):void 
        { 
            segments = container.width / container.numChildren; 
            currentSegment = Math.floor(container.mouseX / segments); 
            if (currentSegment <= container.numChildren - 1) 
            { 
                for (var j:int = 0; j < container.numChildren; j++) 
                { 
                    container.getChildAt(j).visible = false; 
                } 
                container.getChildAt(currentSegment).visible = true; 
            } 
        } 
        function showPicture(event:MouseEvent):void 
        { 
            fullLoader.unload(); 
            fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt))); 
        } 
    } 
}

类说完了,接下来就来看看fla里面都是怎么写的。
这个就简单多了

import interactive.gallery.ImageGallery;
var gallery:ImageGallery = new ImageGallery("data/images.xml","thumb","full");
addChild(gallery);
我不说了,聪明的你一看就明白了。

案例分析到此结束。
打包下载

(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 复制代

  • Android7.0 工具类:DiffUtil详解

    一 概述 DiffUtil是support-v7:24.2.0中的新工具类,它用来比较两个数据集,寻找出旧数据集->新数据集的最小变化量. 说到数据集,相信大家知道它是和谁相关的了,就是我的最爱,RecyclerView. 就我使用的这几天来看,它最大的用处就是在RecyclerView刷新时,不再无脑mAdapter.notifyDataSetChanged(). 以前无脑mAdapter.notifyDataSetChanged()有两个缺点: 1.不会触发RecyclerView的动画(删

  • 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时代,为了解决这部分的问题 效率. 

  • java创建一个类实现读取一个文件中的每一行显示出来

    实例如下 import java.io.*; import java.util.*; class MyBufferReaderDemo{ private FileReader fb; MyBufferReaderDemo(FileReader fb){ this.fb=fb; } public String BufferReader() throws IOException{ StringBuilder s1=new StringBuilder(); int ch=0; while((ch=fb

  • 学习thinkphp5.0验证类使用方法

    通过一个实例,给大家讲解一下如果通过thinkphp5.0验证类的方法. 自定义验证类,需继承Validate类 比如在home模块新建validate文件夹,再新建Test.php验证类,内容如下: <?php namespace app\home\validate; use think\Validate; class Test extends Validate { protected $rule = [ 'name' => 'require|regex:/.{6}/', 'age' =&g

  • 如何从0开始用node写一个自己的命令行程序

    前言 什么是命令行程序呢?像我们常见的webpack,vue-cli都属于命令行程序. 本文将带你从0开始用node写一个自己的命令行程序,并发布到npm. 准备工作 我打算写一个统计个人代码提交量的命令行工具,起名 git-tool . npm地址见git-tool,GitHub地址见 git-tool . 1.在GitHub上新建一个项目git-tool. 2.克隆到本地进行开发. 3.执行npm init创建package.json文件. // 其他代码 "bin": { &qu

  • 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  实例学习 熟悉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 实例学习 熟悉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的运用

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

随机推荐