0 Replies Latest reply on Apr 21, 2010 6:59 AM by jimmyoneshot

    Custom Tilelist Component With Special Effects

    jimmyoneshot Level 1

      I am trying to create a custom tilelist component which incorporates some special visual effects I need for my app. What I'm trying to do is replace the blue themed rollover color which shows when each item is rolled over with an effect which applies the glow effect to each hovered over items image and label and also converts the image to color whilst the item is hovered over (the tilelist itself is converted to greyscale upon application complete). At the moment I have it set so the blue them is completely removed but I want to instead alter the rolover them e to how I've described above. Here's what I mean below, which I made using static images and text (the social item is being hovered over in that picture), followed by the code for my custom tilelist so far:-

       

      http://i223.photobucket.com/albums/dd147/jimmyoneshot/theicons.jpg

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:itemRenderer>
          <mx:Component>
           <mx:Canvas width="125" height="145">
            <mx:Image source="{data.icon}" height="64" width="64" top="10" horizontalCenter="0"/>
            <mx:Label text="{data.label}" bottom="1" horizontalCenter="0" color="#FFFFFF" fontWeight="bold" fontSize="12"/> 
           </mx:Canvas>    
          </mx:Component>
          </mx:itemRenderer>
           
      <mx:Script>
       <![CDATA[
        import mx.core.EdgeMetrics;
        import mx.core.IFlexDisplayObject;
        import mx.skins.halo.ListDropIndicator;
        import mx.events.DragEvent;
        import mx.controls.listClasses.IListItemRenderer;
        use namespace mx_internal;
       
        override protected function drawSelectionIndicator(
          indicator:Sprite, x:Number, y:Number,
          width:Number, height:Number, color:uint,
          itemRenderer:IListItemRenderer):void
        {
        
        }
       
       
        // Remove the Selection indicator
        override protected function drawHighlightIndicator(
         indicator:Sprite, x:Number, y:Number,
         width:Number, height:Number, color:uint,
         itemRenderer:IListItemRenderer):void
        {
        
        }
       
        ]]> 
       </mx:Script>
      </mx:TileList>