1 Reply Latest reply on Nov 8, 2011 5:27 PM by kraikit

    Flex Mobile: Fade in a list item when it's displayed/loaded

    VivD Level 1

      How can I make the images I display in a tiled list fade into view rather than appear in a flash? Right now with the code below the images show up directly when the view launches.



      <s:List id="galleryList" width="100%" height="100%" dataProvider="{photoGallery}" >


                   <s:TileLayout id="galleryLayout"

                                                         columnAlign="justifyUsingWidth" horizontalAlign="center" verticalAlign="middle"

                                                         paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>






                            <components:IconItemRenderer  iconDelay="0" iconField="photo_thumbnail_image_url"

                                                                                                          iconHeight="140" iconWidth="140" labelField=""

                                                                                                          paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" >







      I'd also prefer if the subsequent images that come into view when scrolled also fade in.

        • 1. Re: Flex Mobile: Fade in a list item when it's displayed/loaded
          kraikit Level 2

          I don't think there's any functionality built into IconItemRenderer for fading in the icons. You may be able to implement something like this by subclassing IconItemRenderer, overriding createIconDisplay() to start the icon alpha at 0 (i.e. transparent) and attach an event listener that will start an AnimateProperty on the alpha from 0 to 1 when the image has loaded.


          For fading in images as they scroll into view, this approach might incidentally work due to ItemRenderer virtualization but I suspect it will be a little unpredictable.


          -- Tom