4 Replies Latest reply on Sep 29, 2010 2:51 PM by Scaljeri

    extend Image and define rollover effect

    Scaljeri

      Hi All

       

      I have a couple of images which should do something on the rollOver event

       

      So, I thought I create my own class and extend Image, here is what I can think of

       

      package eu.mysite.utils

      {

         import mx.controls.Image;

         import mx.controls.Alert ;

       

         public class RollOverImage extends Image

          {

             public var rollOver:String = "this._rollOver()" ;

             public function RollOverImage()

             {

                super() ;

             }

       

       

             public function _rollOver():void {

                     mx.controls.Alert.show("ROLLOVER") ;

             }

          }

      }

       

      And the mxml

       

      <utils:RollOverImage id="img1" source="..." />

       

      My RollOverImage doesn't do nothing (I want to see the Alert) when the mouse moves over the image.

       

      ANy suggestions ?

       

      cheers

        • 1. Re: extend Image and define rollover effect
          BhaskerChari Level 4

          Hi,

           

          Replace your as file code with the below one then it will work fine...

           

           

          package eu.mysite.utils
          {
             import flash.events.MouseEvent;
            
             import mx.controls.Alert;
             import mx.controls.Image;;
             public class RollOverImage extends Image
             {
               public function RollOverImage()
               {
                     super() ;
                     this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollOver);
               }
              
               public function onMouseRollOver(event:MouseEvent):void
               {
             mx.controls.Alert.show("ROLLOVER") ;
               }

              }

          }

           

           

          Thanks,

          Bhasker

          • 2. Re: extend Image and define rollover effect
            Scaljeri Level 1

            thanks a lot!

             

            One last question

             

            What do I have to add to this class if I want to use it like

             

            <utils:RollOverImage specialOption="true" SomeOtherValue="1" ......>

             

            I thought adding public properties was the trick but isn't, like

             

            ....

            public class RollOverImage extends Image

            {

                 public var makeSpecial:String ;

                 public var SomeOtherValue:int ;

             

                 .....

            }

             

            Any suggestions ?

            • 3. Re: extend Image and define rollover effect
              BhaskerChari Level 4

              Hi,

               

              You can write set/get methods to acheive that..

               

               

              package eu.mysite.utils
              {
                 import flash.events.MouseEvent;
                
                 import mx.controls.Alert;
                 import mx.controls.Image;;
                 public class RollOverImage extends Image
                 {

               

                   public var _specialOption:Boolean;

                   public var _someOtherValue:String;


                   public function RollOverImage()
                   {
                         super() ;
                         this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollOver);
                   }

                  

                   public function set specialOption(bool:Boolean):void
                   {
                        _specialOption = bool;

                   }

               

                   public function get specialOption():Boolean
                   {
                       return  _specialOption;

                   }  

               

                   public function set specialOption(data:String):void
                   {
                        _someOtherValue = data;

                   }

               

                   public function get specialOption():String
                   {
                        return _someOtherValue;

                   }      
                  
                   public function onMouseRollOver(event:MouseEvent):void
                   {
                      mx.controls.Alert.show("ROLLOVER") ;
                   }

                  }

              }

               

               

              Thanks,

              Bhasker

              1 person found this helpful
              • 4. Re: extend Image and define rollover effect
                Scaljeri Level 1

                great, thanks again!!!

                 

                cheers