Question

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

Answer 1

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