2 Replies Latest reply on Jul 26, 2009 1:08 PM by christophsk

    Image highlight on mouseover - how?

    christophsk

      I have a layout with thumbnail images (.jpg). On mouseover,

      I would like the effect that they briefly highlight.

       

      I've seen this sort of thing in the NY Times and it is very

      effective.

       

      Any ideas/pointers out there?

       

      Much thanks, Chris

        • 1. Re: Image highlight on mouseover - how?
          ShardulSingh Level 3

          Hi,

           

          I don't know which kind of highlight you want but I am sure you can acheive this

          by using the filters.I am giving you a small demo of Tilelist with the code hope

          it will try to fullfill you requirement. You can use various filters for highlighting

          your Image.Below is the code for the same.

           

           

          Main Application

           

           

           

           

           

          <?xml version="1.0"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

           

           

          <mx:Script>

           

          <![CDATA[

          import mx.collections.ArrayCollection;

           

          [Bindable]

           

          private var arrayCollection:ArrayCollection=new

           

          ArrayCollection([{imgPath : "assets/img1.jpg"},

           

          {imgPath :"assets/img2.jpg"},

           

          {imgPath :assets/img3.jpg"},

           

          {imgPath :"assets/img4.jpg"},

           

          {imgPath :"assets/img5.jpg"},

           

          {imgPath :"assets/img6.jpg"},

           

          {imgPath :"assets/img7.jpg"},

           

          ]);

          ]]>

           

           

          </mx:Script>

           

          <mx:TileList dataProvider="{arrayCollection}"

           

          itemRenderer="TileListItemRenderer"/>

          </mx:Application>

           

           

          TileListItemRenderer

           

           

           

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
              width="100%" height="100%">


          <mx:Script>
          <![CDATA[
              override public function set data(value:Object):void
              {
               super.data = value;
              }
             
              private function highlightImage():void
              {
                  var glowFilter: GlowFilter = new GlowFilter();
                  if(img.filters.length == 0)
                  {  
                      glowFilter.color = 0xFF0000;
                      glowFilter.alpha = 1;
                      glowFilter.blurX = 10;
                      glowFilter.blurY = 10;
                      glowFilter.quality = BitmapFilterQuality.HIGH;
                      img.filters = [glowFilter];
                  }
              }
             
              private function unHighlightImage():void
              {
                   img.filters = null;
              }        
          ]]>
          </mx:Script>

              <mx:VBox horizontalAlign="center" verticalAlign="middle"
                  width="180" height="80"
                  paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"
                  rollOver="highlightImage()"
                  rollOut="unHighlightImage()">
                 
                  <mx:Image id="img" source="{data.imgPath}" maintainAspectRatio="false"
                      width="170" height="70" useHandCursor="true" buttonMode="true"/>
              </mx:VBox>
          </mx:Canvas>

           

           

           

          with Regards,

           

          Shardul Singh Bartwal

           

           

          • 2. Re: Image highlight on mouseover - how?
            christophsk Level 1

            Thanks, I'll give it a try.

            I saw this interesting highlighting - it was as if a search light

            quickly panned the image. Very impressive.