1 Reply Latest reply on Nov 21, 2008 11:50 AM by Newsgroup_User

    A question for the gurus

    bmilesp Level 1
      Hello Everyone,

      I've been stuck on this for 4 days now, and want to open it up to everyone. I'm trying to make a List component with tweened scrolling effect(s). I've managed to animate the drawn listItems correctly. However, there is some incorrect y positioning going on in the added listItems when you click the arrow faster than the time it takes for the tween to complete, or if you drag the scrollbar. But if you click the arrow and wait for the tween to complete, it works as expected. You can see the example here.

      I've also managed to tween the added listItems, but in my example i've excluded it so i can illustrate more clearly the scrolling effect error- when you click the arrow before the listItem tween completes, or drag the scroll bar.

      Background:

      i've extended the List class and made my function overrides there. I've overridden two functions:

      moveRowVertically() and moveRowsAndColumns(), both of which are overridden from the ListBase class, where they are also called from the scrollVertically() method in the same class. My working change in the moveRowVertically is here (using Greensock's TweenMax class for tweening):

      override protected function moveRowVertically(i:int, numCols:int, moveBlockDistance:Number):void
      {
      var r:IListItemRenderer;
      var add_to_end_y:Number;
      for (var j:int = 0; j < numCols; j++)
      {
      r = listItems [j];

      add_to_end_y = (!isNaN(r.end_y))? r.end_y - r.y : 0;
      r.end_y = r.y + moveBlockDistance + add_to_end_y;
      TweenMax.to(r,0.5,{y:r.end_y,ease:Sine.easeOut, onComplete:r.flush_end_y});//
      }
      rowInfo
      .y += moveBlockDistance;
      }

      Notice the the new end_y property and flush_end_y method of listItems. I 'monkey patched' (thank you Amy :} ) the FlexSprite class and added the getter/setter for end_y there. i needed this end_y property to preserve the destination of each tweened row item, and when the tween is complete, i call the flush_end_y method, which just makes end_y=NaN:

      // monkey patched code in FlexSprite.as:
      public function flush_end_y():void{
      _end_y = NaN;
      }

      public function set end_y(val_y:Number):void{
      _end_y = val_y;
      }

      public function get end_y():Number{
      return _end_y;
      }


      Now, for makeRowsAndColumns. It is overridden in the List class, and I again override it in my extended List class. If you go into the List.as file and look at the makeRowsAndColumns function, you can find this line of code:

      item.move(xx, yy + cachedPaddingTop);

      this is where the listItem is added to the stage. I would put the TweenMax here if i want to animate the new listItems into place, but as you can see in the example, they already behave incorrectly so i'll add the tweening later.

      But the question is, where are the added listItems y value getting placed for the case of scrolling and clicking the arrow before the tweens end? I feel i have trace every possible value in the makeRowsANdColumns (and more in the ListBase scrollVertically method), and can't seem to find the incorrect y values.

      It almost seems like the y values are getting reversed somewhere (the added listItems when you scroll down appear at the top off the List area, and then appear at the bottom if you scroll up.

      I've learned that the makeRowsAndColumns method likes to recycle the ListItems for efficency's sake, and may be where the values are getting corrupted, or not reset correctly. You can also see that if you mouseover some of the listItems that are off the list area, that the highlighting appears in the correct area on the list. So again, where are these incorrect y values being placed? or, where does the actual recycling of the listItems occur?

      I hope some one can point me in the right direction! Thank you!
        • 1. Re: A question for the gurus
          Level 7
          "bmilesp" <webforumsuser@macromedia.com> wrote in message
          news:gg6rc8$9of$1@forums.macromedia.com...
          > Hello Everyone,
          >
          > I've been stuck on this for 4 days now, and want to open it up to
          > everyone.
          > I'm trying to make a List component with tweened scrolling effect(s).
          > I've
          > managed to animate the drawn listItems correctly. However, there is some
          > incorrect y positioning going on in the added listItems when you click the
          > arrow faster than the time it takes for the tween to complete, or if you
          > drag
          > the scrollbar. But if you click the arrow and wait for the tween to
          > complete,
          > it works as expected. You can see the
          > http://brandonplasters.com/examples/webula_hyperScroller.html.
          >
          > I've also managed to tween the added listItems, but in my example i've
          > excluded it so i can illustrate more clearly the scrolling effect error-
          > when
          > you click the arrow before the listItem tween completes, or drag the
          > scroll bar.
          >
          > Background:
          >
          > i've extended the List class and made my function overrides there. I've
          > overridden two functions:
          >
          > moveRowVertically() and moveRowsAndColumns(), both of which are overridden
          > from the ListBase class, where they are also called from the
          > scrollVertically()
          > method in the same class. My working change in the moveRowVertically is
          > here
          > (using Greensock's TweenMax class for tweening):
          >
          > override protected function moveRowVertically(i:int, numCols:int,
          > moveBlockDistance:Number):void
          > {
          > var r:IListItemRenderer;
          > var add_to_end_y:Number;
          > for (var j:int = 0; j < numCols; j++)
          > {
          > r = listItems [j];
          >
          > add_to_end_y = (!isNaN(r.end_y))? r.end_y - r.y : 0;
          > r.end_y = r.y + moveBlockDistance + add_to_end_y;
          > TweenMax.to(r,0.5,{y:r.end_y,ease:Sine.easeOut,
          > onComplete:r.flush_end_y});//
          > }
          > rowInfo
          .y += moveBlockDistance;
          > }
          >
          > Notice the the new end_y property and flush_end_y method of listItems. I
          > 'monkey patched' (thank you Amy :} ) the FlexSprite class and added the
          > getter/setter for end_y there. i needed this end_y property to preserve
          > the
          > destination of each tweened row item, and when the tween is complete, i
          > call
          > the flush_end_y method, which just makes end_y=NaN:
          >
          > // monkey patched code in FlexSprite.as:
          > public function flush_end_y():void{
          > _end_y = NaN;
          > }
          >
          > public function set end_y(val_y:Number):void{
          > _end_y = val_y;
          > }
          >
          > public function get end_y():Number{
          > return _end_y;
          > }
          >
          >
          > Now, for makeRowsAndColumns. It is overridden in the List class, and I
          > again
          > override it in my extended List class. If you go into the List.as file and
          > look
          > at the makeRowsAndColumns function, you can find this line of code:
          >
          > item.move(xx, yy + cachedPaddingTop);
          >
          > this is where the listItem is added to the stage. I would put the TweenMax
          > here if i want to animate the new listItems into place, but as you can see
          > in
          > the example, they already behave incorrectly so i'll add the tweening
          > later.
          >
          > But the question is, where are the added listItems y value getting placed
          > for
          > the case of scrolling and clicking the arrow before the tweens end? I feel
          > i
          > have trace every possible value in the makeRowsANdColumns (and more in the
          > ListBase scrollVertically method), and can't seem to find the incorrect y
          > values.
          >
          > It almost seems like the y values are getting reversed somewhere (the
          > added
          > listItems when you scroll down appear at the top off the List area, and
          > then
          > appear at the bottom if you scroll up.
          >
          > I've learned that the makeRowsAndColumns method likes to recycle the
          > ListItems
          > for efficency's sake, and may be where the values are getting corrupted,
          > or not
          > reset correctly. You can also see that if you mouseover some of the
          > listItems
          > that are off the list area, that the highlighting appears in the correct
          > area
          > on the list. So again, where are these incorrect y values being placed?
          > or,
          > where does the actual recycling of the listItems occur?
          >
          > I hope some one can point me in the right direction! Thank you!

          When I can't find something in a class I'm extending, I click the class name
          in the extends part of the class name, then hit F3. I then look in that
          class. If I don't see it, I click the name of the class _that_ is
          extending, etc. IIRC, this sort of stuff may be in DataGridBase.

          Also check out
          http://blogs.adobe.com/aharui/2008/03/smooth_scrolling_list.html