0 Replies Latest reply on Nov 18, 2008 1:14 PM by bmilesp

    animate List component

    bmilesp Level 1
      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!