Here is a continuation of our easy infinite scroller. The focus in part 2 is making the code more flexible and dynamic. Notice in the swf above that 4 items are moving at a time as opposed to just one. We are going to dig deeper into the “lob off” technique and show you how you can move and lob off more than one item at a time. By understanding how the distance we move affects how many clips get lobbed we can easily change the size of our assets without having to change a lot of code.
Watch the Video
What? You missed Part 1??? That’s ok… Easy Infinite Scroll Part 1
As far as code clean-up, instead of scattering meaningless numbers everywhere we create some variables that will be used multiple times in our functions.
Created distanceToScroll variable. This variable dictates how far the scroller moves and how far each clip in the parent_mc gets moved before the lob off.
Created lastItemX variable which is based on the width of the parent_mc. This variable is used to detect which clips get lobbed off. If a clip’s x position is beyond the width of the parent_mc (after the offset) then they get moved back. The distance they get moved back, is exactly the width of the parent. The video shows exactly how this works.
Here is the final code:
import com.greensock.*;
var startX:Number=parent_mc.x;
var distanceToScroll:Number = mask_mc.width;
var lastItemX:Number = parent_mc.width;
function scrollIt() {
TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay});
}
function resetDelay(){
TweenLite.delayedCall(2, reset);
}
function reset() {
//move all clips over to the right
for each (var mc in parent_mc) {
mc.x+=distanceToScroll;
if (mc.x >= lastItemX) {
//this clip is way too far over... send it back
mc.x-= lastItemX;
}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX
//scroll it again after 1 second
TweenLite.delayedCall(1, scrollIt);
}
btn.addEventListener(MouseEvent.CLICK, toggleMask)
function toggleMask(e:Event = null):void{
parent_mc.mask = (parent_mc.mask) ? null : mask_mc
}
toggleMask();
TweenLite.delayedCall(1, scrollIt);
Download Flash CS4 Source
