2014-02-07 62 views
0

嗨我有关于xml动态照片库的问题。图库有2个部分。第一个滚动面板(带鼠标控制),第二个是电影面板,大图片显示时点击缩略图从滚动当试图测试电影时,在播放器中看不到任何东西。没有编译器错误或其他任何东西。 如果任何人可以检查代码,我会很高兴:)thx帮助任何遗憾浪费你的时间。AS3.0 xml照片库

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][email protected]; 
     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][email protected]; 
    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

+0

欢迎来到stackoverflow!你的代码是有帮助的,但是你能否也描述一下你已经看过的东西? –

回答

0

我下载了.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][email protected]; // 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][email protected]; // 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)[email protected]; // 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; 
     } 
    } 
} 

即使在这些小的修复之后,仍然存在一些问题。例如,某些图像太大,因此当它们加载到主窗口时,它们会覆盖缩略图卷轴。

编辑: 我已经更新了上面的代码,以在显示新图像之前删除现有图像。请注意,我已经完成了最低限度的工作来完成你想要的任务。你一定要考虑优化这段代码。例如,每次单击缩略图时,都不应该加载全尺寸图像。您应该存储已经加载的图像,以便您可以将它们从显示列表中添加或删除。

SECOND EDIT: 我向您展示了如何将已经加载的图像存储在Dictionary中。

+0

thx很多。你很有帮助 – posetcayiii

+0

还有一件事我可以在新的大图片打开时卸载大图片吗? – posetcayiii

+0

我已经更新了代码,请注意我关于不反复加载图片的建议。 – Marcela