快捷導(dǎo)航

AS3.0 通過類來實(shí)現(xiàn)一個(gè)gallery

更新時(shí)間：2007年12月12日 22:04:54 作者：

通過類來實(shí)現(xiàn)一個(gè)gallery

說明：一個(gè)比較簡單的相冊，通過類來實(shí)現(xiàn)。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/

準(zhǔn)備工作：打開源文件class_final.fla，點(diǎn)擊屬性里的發(fā)布設(shè)置，點(diǎn)擊Actionscript3旁邊的設(shè)置，在最下面的classpath里，引入classes_final的文件夾的路徑，然后點(diǎn)擊確定，前期工作就準(zhǔn)備完了。

代碼：

唯一的一個(gè)類文件：ImageGallery.as

復(fù)制代碼代碼如下:

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代碼：

復(fù)制代碼代碼如下:

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); 

這段代碼的功能就是在初始化類時(shí)，給一些以后會用到的變量賦值，因?yàn)檫@些變量是全局變量，所以后面的function都能用。
對container添加了監(jiān)聽事件，監(jiān)聽鼠標(biāo)移動和點(diǎn)擊。
然后載入xml文件，當(dāng)xml載入完成后，執(zhí)行xmlLoaded函數(shù)
然后對container應(yīng)用了陰影濾鏡，這個(gè)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);
}
當(dāng)xml載入完成后就會執(zhí)行這個(gè)函數(shù)，先是獲取xml對象列表，然后獲取xml的子元素。這個(gè)在前面的教程提及過。
遍歷子元素，然后通過Loader載入圖片，并將imageLoader添加到container里。

section3

復(fù)制代碼代碼如下:

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;  
} 

這個(gè)函數(shù)是響應(yīng)鼠標(biāo)在縮略圖上移動的事件，有一個(gè)算法在里面。
將mc的寬除以載入的縮略圖的數(shù)量，得到一個(gè)平均數(shù)。
然后將當(dāng)前鼠標(biāo)的x位移除以剛剛得到的平均數(shù)就得到了當(dāng)前鼠標(biāo)所在的圖片（聽著有點(diǎn)別扭）
然后先將所有container里的child隱藏起來，再顯示當(dāng)前的圖片。

section4

fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
這個(gè)是響應(yīng)縮略圖點(diǎn)擊事件，當(dāng)點(diǎn)擊后先去掉先前載入的大圖，然后再去載入縮略圖對應(yīng)的大圖。
其實(shí)也不難，不是嗎？

再拉看一下完整的代碼

復(fù)制代碼代碼如下:

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里面都是怎么寫的。
這個(gè)就簡單多了

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

案例分析到此結(jié)束。
打包下載