1 Reply Latest reply on Feb 17, 2010 8:55 AM by saisri2k2

    Resize Effekt for Items in Tilelist for MouseOver

    KlausFriese Level 1

      Hi,

       

      I like to have a soft resize for a TileList when the mouse is over an item. The ItemRenderer contains an image and and label. When the mouse is over the item the image should be enlarged and the label is invisible.

      That works fine without the resize effect, but with Resize effect and fast mouse movement some items did not change their size back to original size.

       

      This is my ItemRenderer:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      borderStyle="none" backgroundColor="#707682"
      width="200" height="200" 
      mouseOver="doEnlarge(event)"
      mouseOut="doShrink(event)"
      horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Script>
      <![CDATA[
      
      public function doEnlarge( e:MouseEvent ):void {
      trace( "large ");
      text.visible = false;
      image.width = 190;
      image.height = 190;
      }
      
      public function doShrink( e:MouseEvent ):void {
      trace( "shrink ");
      image.width = 150;
      image.height = 150;
      text.visible = true;
      }
      ]]>
      </mx:Script>
      
      <mx:Image id="image" x="10" y="10" width="150" height="150" source="image.png" scaleContent="true" autoLoad="true" resizeEffect="resizeMe"/>
      <mx:Label id="text" x="10" y="168" text="Text Text Text" width="150"/>
      
      <mx:Resize id="resizeMe" duration="200" /> 
      </mx:Canvas>
      

       

      Any tipps? And: is this a good way to get this kind of resize effect or are there better ways?

       

      thanks

      Klaus

        • 1. Re: Resize Effekt for Items in Tilelist for MouseOver
          saisri2k2 Level 4

          You have to register for the evnts in the

           

          override public function set data(value:Object):void{

               this.addEventListener(MouseEvent.MOUSE_OVER,doEnlarge);

               this.addEventListener(MouseEvent.MOUSE_OUT,doShrink)

          }

           

          method(another method in the itemrenderer itself)... remove the event listeners from the canvas... if there is a way to get handle to the parent.. do an

          invalidateDisplayList(); (or) invalidateList(); calls after the resize/shrink method on the parent(obviously list)

           

          i would do

           

          public function resize(evt:MouseEvent):void{

                    ------your code --

               List(this.parent).invalidateList();

           

           

          }

           

          Hope it wil help u