Loading image twice via Actionscript3?

I'm trying to use the infinite scroll AS3 I discuss in this SO question. I'm developing this using the FlashCS5 IDE.

The absolutely last thing I need to do is load the large background image ("header_bg_vert.jpg") externally after the rest of the movie has loaded, instead of requiring the entirety of the animation to load beforehand (or preloading the header animation in).

My AS3 is below. The "infinite loop" works by placing two copies of the same seamless image end-to-end, then moving the second image to the front after it scrolls off screen -- currently, this code only displays one copy of the image. What's wrong with it? Also, is this the best way of accompli开发者_Python百科shing this?

Many thanks.

stop();

//load the bg image
var request:URLRequest = new URLRequest("header_bg_vert.jpg");
var s1:Loader = new Loader();
var s2:Loader = new Loader();

s1.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
s1.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

s2.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
s2.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);


function loadProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
trace("Loading: "+percentLoaded+"%");
}
function loadComplete(event:Event):void {
trace("Complete");
}

s1.load(request);
s2.load(request);

//The speed of the scroll movement.
var scrollSpeed:uint = 1;

//Originally, this added two instances of the movie clip onto the stage.
//var s1:ScrollBg = new ScrollBg();
//var s2:ScrollBg = new ScrollBg();

addChild(s1); 
addChild(s2);
setChildIndex(s1, 0);
setChildIndex(s2, 0);
//This positions the second movieclip next to the first one.
s1.y = 0;
s2.y = s1.height;

//Adds an event listener to the stage.
stage.addEventListener(Event.ENTER_FRAME, moveScroll); 

//This function moves both the images to left. If the first and second 
//images goes pass the left stage boundary then it gets moved to 
//the other side of the stage. 
function moveScroll(e:Event):void{
s1.y -= scrollSpeed;  
s2.y -= scrollSpeed;  

if(s1.y <= -s1.height){
s1.y = s1.height - scrollSpeed;
}else if(s2.y <= -s2.height){
s2.y = s2.height - scrollSpeed;
}
}

Apparently it displays both copies but on top of each other. It happens because flash player does not know how tall s1 is before it is loaded. You should position your images within loadComplete()

You can load the seemless image once and then use copyPixels() to make 2 copies of the image:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.net.URLRequest;

var bitmap1:Bitmap;
var bitmap2:Bitmap;

var loader:Loader = new Loader();
loader.load(new URLRequest("images/seemless.png"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);

function onLoaderProgress(e:ProgressEvent):void
{
    var percent:Number = Math.floor((e.bytesLoaded/e.bytesTotal)*100); 

}// end function

function onLoaderComplete(e:Event):void
{
    var bitmap:Bitmap = Bitmap(e.target.content);

    var bitmapData1:BitmapData = new BitmapData(bitmap.width, bitmap.height);
    var bitmapData2:BitmapData = new BitmapData(bitmap.width, bitmap.height);

    bitmapData1.copyPixels(bitmap.bitmapData,
                           bitmap.bitmapData.rect,
                           new Point(0,0));

    bitmapData2.copyPixels(bitmap.bitmapData,
                           bitmap.bitmapData.rect,
                           new Point(0,0));

    bitmap1 = new Bitmap(bitmapData1);
    var bitmapSprite1:Sprite = new Sprite();

    bitmapSprite1.addChild(bitmap1);

    bitmap2 = new Bitmap(bitmapData2);
    var bitmapSprite2:Sprite = new Sprite();
    bitmapSprite2.addChild(bitmap2);
    bitmap2.x = bitmap2.width;

    addChild(bitmapSprite1);
    addChild(bitmapSprite2);

    stage.addEventListener(MouseEvent.MOUSE_OVER, onStageMouseOver);
    stage.addEventListener(MouseEvent.MOUSE_OUT, onStageMouseOut);

}// end function

function onStageEnterFrame(e:Event):void
{
    var speed:Number = 10;

    if(stage.mouseX < stage.stageWidth/2)
    {
        bitmap1.x -= speed;
        bitmap2.x -= speed;

    }// end if

    if(stage.mouseX > stage.stageWidth/2)
    {
        bitmap1.x += speed;
        bitmap2.x += speed;

    }// end if

    if(bitmap1.x <= -(bitmap1.width))
    {
        bitmap1.x = bitmap1.width;

    }// end if

    if(bitmap2.x <= -(bitmap2.width))
    {
        bitmap2.x = bitmap2.width;

    }// end if

    if(bitmap1.x >= bitmap1.width)
    {
        bitmap1.x = -(bitmap1.width);

    }// end if

    if(bitmap2.x >= bitmap2.width)
    {
        bitmap2.x = -(bitmap2.width);

    }// end if

}// end function

function onStageMouseOver(e:MouseEvent):void
{
    stage.addEventListener(Event.ENTER_FRAME, onStageEnterFrame);

}// end function

function onStageMouseOut(e:MouseEvent):void
{
    if(stage.hasEventListener(Event.ENTER_FRAME))
    stage.removeEventListener(Event.ENTER_FRAME, onStageEnterFrame);

}// end function

I used mouse events to scroll the images as I wasn't sure what kind of scroller you were using, but it should be easy to modify it to fit your scenario.