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/...rScroller.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[i][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[i].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!

"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/...rScroller.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[i][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[i].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/0...ling_list.html