Lazy loading infinite scroll background in Flash CS5/ActionScript 3

The project I'm working on has a massive background image (800px wide by 2585px tall) that slowly scrolls upwards.

Before, I was using the code at: http://www.ilike2flash.com/2010/08/endless-scrolling-background-in-as3.html

I modified the code to scroll upwards, but in addition to having a weird intermittent bug that occasionally displays a pixel-tall blank line after the image and before looping the next, it really doesn't seem to handle dynamic loading well (I've tried using several different preloader scripts and it breaks all of them), something that may not have been an issue with the 开发者_JS百科initial implementation but is now that I'm using a monstrously huge image.

Thus, my question:

a. Is there another bit of free, Flash-based infinite scroll code floating around that has support for lazy-loading background objects (Say, the existing background chopped in 6)?

b. If not, any idea how I could modify the above link to do so?

Thanks! My AS3 is as follows:

stop();

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

//This adds 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 top. If the first and second 
//images goes past the top 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;
  }
}

howdy ændrew the link has about 15 lines of code. it creates two instances of the object, it then moves moves both 1px every frame and checks if the first clip is out of the view, at which point it moves the movieClip over to the edge of the other clip. There's not a lot of room for error... but if I had to point it out out, I'd say it's right here

if(s1.x < -s1.width){
  s1.x = s1.width;
}else if(s2.x < -s2.width){
  s2.x = s2.width;
}

should be: (notice the <= instead of <)

if(s1.x <= -s1.width){
  s1.x = s1.width;
}else if(s2.x <= -s2.width){
  s2.x = s2.width;
}

this removes the few pixels gap between the movieclips

As far as dealing with loading a big asset goes, just add the scroll function once it has loaded. you can look for a sample at http://drawlogic.com/2007/09/20/howto-using-loaders-in-as3/ but there are bunch of others.

As far as the "pixel-tall blank line after the image and before looping the next" this fix got rid of the gap for me...

if (s1.x <=  -  s1.width) { s1.x = s2.x + s2.width; }
else if (s2.x <= -s2.width) { s2.x = s1.x + s1.width; }

Notice that the x position of the background 1 is placed at the x position of background 2 plus it's width and vice versa.

im presuming that you are needing a round image width/height to get this to be working nicely as in the demo, flash doesnt tend to like rendering .5px gaps etc. you can always try pushing the image to the position of the other, just to make sure that things are butting correctly and hope that it renders better:

if(s1.x < -s1.width){
  s1.x = s2.x + s2.width;
}else if(s2.x < -s2.width){
  s2.x = s1.x + s1.width;
}

when it comes to lazy loading of backgrounds, you will need to be careful with it and check that the next section image has finished loading before you start scrolling to it, just remember to store the image source in a var somewhere (perhaps with a static "lazy loading" class?) so you arnt trying to call the url multiple times without need.

Try looking into Greensock's Blitmask. Using this you'll only need one repeatable image and blitmask is highly optimized, even for mobile phone's less powerful processors.