Thursday, January 7, 2010

Smooth scrolling of a horizontallist

So I tried various makes of horizontal scrolling a horizontallist.  I followed these examples, yet either my canvas never added the hlist (because the canvas initialized after I added the hlist, so the hlist was garbage collected before it's parent was initialized), or the scroll bar never moved the list (although I came close to rewriting the scrollhandler function.  Suffice it to say, finally my hack involved adding the hlist to my canvas through a calllater(addHList), and then having external buttons be able to scroll my hlist left and right a designated amount based not on the scroll bar of the parent canvas, but on the x coordinate of my hlist.  Simple enough!  I don't need to worry about overriding the location of the scroll bar, and now i can use something like tweenmax to handle the transitioning of the horizontal lists position, so i get scrolling, and external buttons to move my hlist, and i get all the benefits of an hlist (which has as many columns as i need because i set its columncount = dataprovider.length.  if anyone wants to see code, let me know and i'll post an update.

 private function scrollHorizontalList(e:Event):void{
                var dir:String = e.currentTarget.name;
                var end:int;
                var pos:int = hList.x;
                var max:int = hList.dataProvider.length;
                var myTween:TweenMax;
                trace(dir);
                if(dir == "rButton"){
                    end = pos + colWidth;
                    if(!TweenMax.isTweening(hList)){
                        //if(hList.x-colWidth*colsToScroll)
                        myTween = new TweenMax(hList,1,{x: hList.x - colWidth*colsToScroll, ease:Cubic.easeInOut});
                        myTween.play();
                        hListScroll+=colsToScroll;
                    }
                } else if (dir == "lButton") {
                    end = pos - colWidth;
                    if(!TweenMax.isTweening(hList)){
                        myTween = new TweenMax(hList,1,{x: hList.x + colWidth*colsToScroll, ease:Cubic.easeInOut});
                        myTween.play();
                        hListScroll-=colsToScroll;
                    }
                }
                lButton.enabled = (hListScroll > 0)?true:false;
                rButton.enabled = (hListScroll < max-colsToScroll)?true:false;
            }

2 comments:

  1. This is exactly what I have been looking for the last several days. Do you have a working example, or can you post the complete code?

    Thanks!

    ReplyDelete
  2. Unfortunately, due to the nature of client projects, I can only help with a sanitized version of the code. Pretty much, I'm just showing a canvas inside of another canvas (and this is only going to work as an ugly hack for a small/limited number of items to render - say under 50), but pretty much, I'm just moving the x location of that object, and using tweening to make it move. I'm not really moving a scroll list by buttons (although that would be much better), I'm just moving the entire component over x pixels.

    ReplyDelete