Animate List component

Question

hello everyone,
I've been working with Flex 3 for over a year and really want
to get into customizing components the best way possible, so i've
been digging into the classes. my first task is to create a smooth
tween when scrolling a List component instead of the default
"jumping" motion. So i decided to extend the list and do some
function overriding:
override protected function moveRowVertically(i:int,
numCols:int, moveBlockDistance:Number):void
var r:IListItemRenderer;
trace(String(listItems
[j]));
for (var j:int = 0; j < numCols; j++)
r = listItems[j];
prev_y
= r.y + moveBlockDistance;
//trace(r.y +" "+(r.y+ moveBlockDistance)+" "+prev_y);
TweenMax.to(r,0.5,{y:(r.y +
moveBlockDistance),ease:Sine.easeOut});
//r.move(r.x, r.y + moveBlockDistance);
rowInfo
.y += moveBlockDistance;
I've found moveRowVertically to be the method that actually
does the vertical row movement (called from the scrollVertically
method in the ListBase class). As you can see, i've added the
TweenMax where the object's move method was. This works
normally when the tween time is set to 0 sec, the List scroll
effect is the same as the stock component. But when TweenMax.to is
changed to 0.5 sec, the animation behaves strangely. I believe this
is partly because when a new object appears in the list it is
immediately added to the list, so the method that controls the
addChild needs to have the TweenMax animation also applied to. But
also, there is another problem, when you click the scroll arrow
before the TweenMax animation is complete, this function uses the
current y poisition (in the middle of the animation) as opposed to
the end y position- when the animation is complete. This is why the
TweenMax positions the items correctly when the TweenMax duration
is set to 0.
I
have an example here.
When you click the scroll arrow and wait for the animation to
complete, it works as the code expects. But when you click too fast
or scroll the scrollbar thumb, you can see the unexpected behavior.
SO what I believe needs to be added to the code is an array
that stores the end y coordinate and have the class use that
instead of the current y coordinate. I believe the best way to do
this is to store the end y coordinate in the listItems
[j] array so that i could call: TweenMax.to(r.end_y +
moveBlockDistance),ease:Sine.easeOut}); and all would be fine (for
the objects in the display, hopefully). But i cannot find the
original as file where the listItems property is (aka:
listContent.listItems as defined in the listItems get and set
methods in ListBase.as). Here i could extend this and define a
custom property. But a more important question is this: is it
possible to define a custom property on the fly, so i wouldn't have
to extend the listContent object (therefore, extending ListBase,
then List... on down the line)?
thank you all for your help!

Answer 1

Ok I found out that it works fine in IE but not in FirefoX
HOWEVER it does work fine in Firefox from another computer! I tried
clearing out the cache but NOTHING...chan ANYONE PLEASE HELP
ME???