5 Replies Latest reply on Apr 1, 2010 7:54 PM by La Bestia

    Rollover with the same ID

    La Bestia Level 1

      OK so I have this rollover working great on one image but when I want to use the same exact thin on the next image it says the ID is already in use. How do I make this work?

       

      <fx:Script>
              <![CDATA[
                  import spark.events.IndexChangeEvent;
                  private var myColorTransform:ColorTransform;
                 
                  //Rollover function
                  private function onImageMouseOver():void{
                  myColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 75, 0);
                  myFxImage.transform.colorTransform = myColorTransform;

       

                  }
                  private function onImageMouseOut():void{
                      myColorTransform = new ColorTransform();
                      myFxImage.transform.colorTransform = myColorTransform;
                 
                  }
                 
              ]]>
          </fx:Script>

       

      <mx:Image top="193" left="51" width="200" height="150" source="../bin-debug/images/image1.jpg" mouseOver="onImageMouseOver()" mouseOut="onImageMouseOut()" id="myFxImage"/>
          <mx:Image top="193" left="261" width="200" height="150" source="../bin-debug/images/image2.jpg" mouseOver="onImageMouseOver()" mouseOut="onImageMouseOut()" id="myFxImage"/>

        • 1. Re: Rollover with the same ID
          Flex harUI Adobe Employee

          Id's are variable names so they have to be unique.  Most folks key off the

          event.target

          • 2. Re: Rollover with the same ID
            La Bestia Level 1

            So I can say:

             

            event.target.transform.colorTransform = myColorTransform;

             

            instead of

             

            myFxImage.transform.colorTransform = myColorTransform;   ???

            • 3. Re: Rollover with the same ID
              msakrejda Level 4

              Yes. You'll need to pass the "magic" event Object to the onImageMouseOver method (and obviously take an Event parameter in the method definition).

              • 4. Re: Rollover with the same ID
                Peter deHaan Level 4

                Something like this:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               xmlns:mx="library://ns.adobe.com/flex/mx">
                    
                    <fx:Script>
                        <![CDATA[
                            import spark.events.IndexChangeEvent;
                            
                            private var myColorTransform:ColorTransform;
                            
                            //Rollover function
                            private function onImageMouseOver(evt:MouseEvent):void{
                                myColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 75, 0);
                                evt.currentTarget.transform.colorTransform = myColorTransform;
                            }
                            private function onImageMouseOut(evt:MouseEvent):void{
                                myColorTransform = new ColorTransform();
                                evt.currentTarget.transform.colorTransform = myColorTransform;
                            }
                        ]]>
                    </fx:Script>
                    
                    <mx:Image top="193" left="51" width="200" height="150"
                              source="http://helpexamples.com/flash/images/image1.jpg"
                              mouseOver="onImageMouseOver(event);"
                              mouseOut="onImageMouseOut(event);" id="myFxImage1" />
                    
                    <mx:Image top="193" left="261" width="200" height="150"
                              source="http://helpexamples.com/flash/images/image2.jpg"
                              mouseOver="onImageMouseOver(event);"
                              mouseOut="onImageMouseOut(event);" id="myFxImage2"/>
                    
                </s:Application>
                

                 

                Peter

                • 5. Re: Rollover with the same ID
                  La Bestia Level 1

                  Thanks to everyone for the quick responses. This just makes working in Flex all that much easier when there is a thriving community behind.