相关文章: 通过实例学习Flash AS3.0——案例五

首先声明：本人大菜鸟一个，刚接触AS3不久，许多理念还没来得及灌输，这些case都是从网上down的，但因为解说是英文的，不利我们学习，我就充当一个translater，顺便可以让自己巩固一下知识。

水平有限，错误难免，欢迎大虾小虾，大鸟小鸟指正。

下面进入正题：

案例6：通过类来实现一个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) All

登陆 还没注册？