Question

嗨我有关于xml动态照片库的问题。画廊有2部分。第一个滚动面板（带鼠标控制），第二个是电影面板，当从滚动面板点击缩略图时，大图显示在其中。当试图测试时电影无法在播放器中看到任何内容。没有编译器错误或其他任何内容。如果有人可以检查代码我将非常高兴：）thx求助于任何抱歉浪费你的时间。

import caurina.transitions.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

var full_tween:Tween;
var full_mc:MovieClip;
var my_images:XMLList;
var my_total:Number;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML(); 
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
    trace("xml loading complete");
    xmlData = new XML(e.target.data);
    //trace(xmlData.image);
    my_images = xmlData.IMAGE;
    my_total = my_images.length();

}

var konum:Object = new Object();
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 10;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;
konum.dikey = 450 ;
scroller.y = konum.dikey;

//build scroller from xml
function buildScroller():void{
    trace("build Scroller");
    for (var item:uint = 0; item < my_total; item++ )  {
        var thumb_url = my_images[item].@THUMB;
        var thisOne:MovieClip = new MovieClip();

        //outline
        var blackBox:Sprite = new Sprite();
        blackBox.graphics.beginFill(0xFFFFFF);
        blackBox.graphics.drawRect( -1, -1, 142, 107);
        blackBox.alpha = thumbFadeOut;
        thisOne.addChild(blackBox);
        thisOne.blackBox = blackBox;

        thisOne.x = thisOne.myx = (140 + padding) * item;
        thisOne.itemNum = item;

        //image container
        var thisThumb:Sprite = new Sprite();
        //add image
        var ldr:Loader = new Loader();
        ldr.load(new URLRequest(thumb_url));

        //assign event listeners for Loader
        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
        ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        thisThumb.addChild(ldr);
        thisOne.addChild(thisThumb);

        //create listeners for this thumb
        thisOne.buttonMode = true;
        thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
        thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
        thisOne.addEventListener(MouseEvent.CLICK, callFull);

        //add item
        scroller.addChild(thisOne);
    }

    scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
    trace("termination of build scroller");
}

function overScrollerItem(e:MouseEvent):void {
    //trace("over" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
}
function outScrollerItem(e:MouseEvent):void {
    //trace("out" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
}
function callFull(e:MouseEvent):void {

    var full_loader:Loader = new Loader();
    var full_url = my_images[e.target.name].@FULL;
    full_loader.load(new URLRequest(full_url));
    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);


}

function fullLoaded(e:Event):void {
    full_mc = new MovieClip();
    addChild(full_mc);
    var my_loader:Loader = Loader(e.target.loader);
    full_mc.addChild(my_loader);


    my_loader.x = (stage.stageWidth - my_loader.width)/2;
    my_loader.y = (stage.stageHeight - my_loader.height)/2;

    my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded);
}



function completeHandler(e:Event):void {
    //trace("thumbnail complete "+e.target.loader.parent.parent.name);
    //size image into scroller
    resizeMe(e.target.loader.parent, 140, 105, true, true, false);
    Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
    trace("thumbnail error="+e);
}


//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
    if (centerHor) {
        mc.x = (maxW - mc.width) / 2;
    }
    if (centerVert){
        mc.y = (maxH - mc.height) / 2;
    }
}

function moveScrollerThumbs(e:Event):void {
    if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
        if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
        }
        else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
        }
        else {
            speed = 0;
        }
        scroller.x += speed;

        //scroller limits
        if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
            scroller.x = -scroller.width + stage.stageWidth - padding;
        }
        else if (scroller.x > padding) { //if scrolled to far right
            scroller.x = padding;
        }
    }
}

you can check from file

Answer 1

我下载了你的.rar（与你上面发布的代码示例略有不同）并且只做了最低限度的工作，我在新代码中添加了自己的标记为NOTE:的注释：

import caurina.transitions.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.display.Sprite;
import flash.utils.Dictionary;
import flash.display.MovieClip;
import flash.display.Loader;

var full_tween:Tween;
var full_mc:MovieClip = new MovieClip();
var my_images:XMLList;
var my_total:Number;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML(); 
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
    trace("xml loading complete");
    xmlData = new XML(e.target.data);
    //trace(xmlData.image);
    my_images = xmlData.image; // NOTE: e4x (the query language for XML) is case-sensitive. In your XML file, your elements are not capitalized, so I changed this to lowercase
    my_total = my_images.length();

    // NOTE: You were never calling buildScroller, so I added that once the XML has been loaded
    buildScroller();
}

var konum:Object = new Object();
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 10;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
var fullSizedImages:Dictionary = new Dictionary(); // NOTE: create a Dictionary to store the full-sized images
this.addChild(full_mc); // NOTE: placing the imageHolder behind the scroller
this.addChild(scroller);
scroller.y = scroller.x = padding;
konum.dikey = 450 ;
scroller.y = konum.dikey;

//build scroller from xml
function buildScroller():void{
    trace("build Scroller");
    for (var item:uint = 0; item < my_total; item++ )  {
        var thumb_url = my_images[item].@src;  // NOTE: your XML didn't actually have a property called thumb, I changed it to src here
        var thisOne:MovieClip = new MovieClip();

        //outline
        var blackBox:Sprite = new Sprite();
        blackBox.graphics.beginFill(0xFFFFFF);
        blackBox.graphics.drawRect( -1, -1, 142, 107);
        blackBox.alpha = thumbFadeOut;
        thisOne.addChild(blackBox);
        thisOne.blackBox = blackBox;

        thisOne.x = thisOne.myx = (140 + padding) * item;
        thisOne.itemNum = item;

        //image container
        var thisThumb:Sprite = new Sprite();
        //add image
        var ldr:Loader = new Loader();
        ldr.load(new URLRequest(thumb_url));

        //assign event listeners for Loader
        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
        ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        thisThumb.addChild(ldr);
        thisOne.addChild(thisThumb);

        //create listeners for this thumb
        thisOne.buttonMode = true;
        thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
        thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
        thisOne.addEventListener(MouseEvent.CLICK, callFull);
        thisOne.name = my_images[item].@title;  // NOTE: later on in, in your click handler, you're attempting to reference the name of the thumbnail, but you'd never set it.

        //add item
        scroller.addChild(thisOne);
    }

    scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
    trace("termination of build scroller");
}

function overScrollerItem(e:MouseEvent):void {
    //trace("over" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
}
function outScrollerItem(e:MouseEvent):void {
    //trace("out" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
}
function callFull(e:MouseEvent):void {
    if(fullSizedImages[e.currentTarget]) // NOTE: check to see if the image has already been loaded
    {
        // NOTE: if the image already exists, just pass it to the function that displays it
        displayFullImage(fullSizedImages[e.currentTarget]);
        return; // NOTE: don't continue with the rest of the function
    }
    var full_loader:Loader = new Loader();
    fullSizedImages[e.currentTarget]  = full_loader;
    var full_url = my_images.(@title == e.currentTarget.name).@url; // NOTE: here, you were trying to access an XML item via the target's name, you were also trying to access a property that didn't exist (FULL). I changed this line to look up the correct XML item via the currentTarget's name and I changed the property to url
    full_loader.load(new URLRequest(full_url));
    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);


}

function fullLoaded(e:Event):void {
    var my_loader:Loader = Loader(e.target.loader);
    my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded);

    // NOTE: refactored this portion into a separate function so it can be called if the loader already exists
    displayFullImage(my_loader);
}

function displayFullImage(loader:Loader):void{
    full_mc.removeChildren(); // NOTE: remove the item that already existed
    full_mc.addChild(loader);

    loader.x = (stage.stageWidth - loader.width)/2;
    loader.y = (stage.stageHeight - loader.height)/2;
}



function completeHandler(e:Event):void {
    //trace("thumbnail complete "+e.target.loader.parent.parent.name);
    //size image into scroller
    resizeMe(e.target.loader.parent, 140, 105, true, true, false);
    Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
    trace("thumbnail error="+e);
}


//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
    if (centerHor) {
        mc.x = (maxW - mc.width) / 2;
    }
    if (centerVert){
        mc.y = (maxH - mc.height) / 2;
    }
}

function moveScrollerThumbs(e:Event):void {
    if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
        if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
        }
        else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
        }
        else {
            speed = 0;
        }
        scroller.x += speed;

        //scroller limits
        if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
            scroller.x = -scroller.width + stage.stageWidth - padding;
        }
        else if (scroller.x > padding) { //if scrolled to far right
            scroller.x = padding;
        }
    }
}

即使在这些小修复之后，仍然存在一些问题。例如，某些图像太大，因此当它们在主窗口中加载时，它们会掩盖缩略图滚动条。

编辑：我已经更新了上面的代码，以便在显示新图像之前删除现有图像。请注意，再次，我已经完成了最低限度的工作，以实现您想要的。您一定要考虑优化此代码。例如，每次单击缩略图时都不应加载完整大小的图像。您应该存储已加载的图像，以便只需在显示列表中添加和删除它们。

第二次编辑：我已经向您展示了如何将已加载的图像存储在Dictionary。

中

AS3.0 xml照片库

1 个答案: