1 Reply Latest reply on Jan 24, 2010 11:55 AM by Shongrunden

    Sequential fade-in of items in a list




      I've been trying for quite a while now to figure out how to do this, but with no luck. Hopefully someone can point me in the right direction.


      I have a list, and the list has a custom item renderer I put together based on a spark ItemRenderer component.  The item renderer is quite simple. It has an image, a couple of labels, and a couple of textarea fields.  I'd like to have each item renderer in the list transition sequentially from invisible to visible, providing a nice looking and smooth feel for items to populate the UI.  Unfortunately I cannot figure out how to do this.


      I thought I'd be able to set a transition up inside each item renderer that would play from alpha=0.0 to alpha=1.0 over a time frame, and delay the execution of each transition based on the item index in the list. This delay would ensure that the items sequentially become visible over a short time period.  But, having inspected rather rigorously virtually every property inherited or otherwise of an ItemRenderer object, I have yet to find any possible way to compute or query the item renderer's position in the list.  Is there a way?


      I did see that if I use a Halo ListItemRenderer object, I could then query the listData property since ListItemRenderer implements the IDropInListDataRenderer interface. However, if I change my item renderer to be based off a ListItemRenderer instead of a spark ItemRenderer, I get compiler errors telling me that I can't have a VBox outside of a fx:Delcarations block since VBox doesn't implement IUIComponent.  This error makes absolutely no sense to me since its quite clear from the inheritance tree that VBox in fact inherits from UIComponent, which in turn implements the IUIComponent interface.  If I can't put a VBox in my ListItemRenderer component, well... I guess I can't put ANY components at all in there, which kind of defeats the purpose of having an item renderer in the first place. What am I missing?


      So, if someone could possibly explain why the compiler thinks that VBox hasn't implemented IUIComponent, that would be awesome.


      Better yet, if someone could point me to a solution to sequentially fading in the items of a list, that would be more awesome.  This seems like a pretty standard gag that I'm sure lots of people have implemented before.


      Thanks for the help

        • 1. Re: Sequential fade-in of items in a list
          Shongrunden Adobe Employee

          I'm not sure about the VBox errors you are seeing.  If you could attach a small sample application that demonstrates the error I can take a look.


          As far as the fading in feature I think you are looking for the ItemRenderer.itemIndex property (this was added post beta2 so you might need to update your SDK build).  Attached is a sample application that demonstrates one way of doing this.  There are some things to note:


          - I turned off useVirtualLayout so every renderer gets created at startup time and the effect plays on each one.  You can see this by scrolling down while the items animate.


          - If you want to use this with a virtual layout I believe you want to just fade the renderers that are initially in view and will have to add some logic to figure that out.