4 Replies Latest reply on May 18, 2008 12:28 PM by Shelady

    3 buttons calling 6 boxes. Help in code.

    Shelady Level 1
      Hi,
      here is the code for 3 buttons. Each is calling for 2 boxes. There are 2 problems.
      1- First clicked button does not respond at all.
      2- After clicking one time they dont respond to the second click.
      Please help.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      >

      <mx:Script>
      <![CDATA[


      import flash.events.*;

      public function clickHandler():void
      {
      b1.addEventListener(MouseEvent.CLICK, change4Button);
      b2.addEventListener(MouseEvent.CLICK, change5Button);
      b3.addEventListener(MouseEvent.CLICK, change6Button);

      }

      public function change4Button(Event:MouseEvent):void
      {
      v1.visible="true";
      v4.visible="true";
      }
      public function change5Button(Event:MouseEvent):void
      {
      v2.visible="true";
      v5.visible="true";
      }
      public function change6Button(Event:MouseEvent):void
      {
      v3.visible="true";
      v6.visible="true";
      }

      ]]>
      </mx:Script>

      <mx:Button x="55" y="58" label="Button" click="(clickHandler())" id="b1"/>
      <mx:Button x="145" y="58" label="Button" click="{clickHandler()}" id="b2"/>
      <mx:Button x="239" y="58" label="Button" click="{clickHandler()}" id="b3"/>


      <mx:VBox backgroundColor="#00CCff" x="83" y="135" width="50" height="50" id="v1" visible="false"/>
      <mx:VBox backgroundColor="#ffCCff" x="83" y="135" width="50" height="50" id="v2" visible="false"/>
      <mx:VBox backgroundColor="#00CC00" x="83" y="135" width="50" height="50" id="v3" visible="false"/>
      <mx:VBox backgroundColor="#ffCCfd" x="393" y="135" width="50" height="50" id="v4" visible="false"/>
      <mx:VBox backgroundColor="#ffffff" x="393" y="135" width="50" height="50" id="v5" visible="false"/>
      <mx:VBox backgroundColor="#fcCfdc" x="393" y="135" width="50" height="50" id="v6" visible="false"/>



      </mx:Application>

        • 1. Re: 3 buttons calling 6 boxes. Help in code.
          slaingod Level 1
          Generally you would add your event listeners in a creationComplete for the Application/component itself.

          ie.

          <mx:Application ...
          creationComplete="onComp()" ...


          private function onComp():void {
          b1.addEventListener(MouseEvent.CLICK, change4Button);
          b2.addEventListener(MouseEvent.CLICK, change5Button);
          b3.addEventListener(MouseEvent.CLICK, change6Button);
          }

          This way the listeners only get added once, instead of multiple times, which might be your problem. Adding the eventListener is all that happens one the first click, which is why nothing happens. That should solve your issues.

          THe reason you first click doesn't do anything is because thats the click that adds the event listeners...they don't fire just because you are in the middle of one. Once you add an event listenr it will trigger the NEXT time the button is clicked. You would need to call the method directly (assuming you didn't change the clickHandler which you should):
          public function clickHandler(e:MousEvent):void
          {
          b1.addEventListener(MouseEvent.CLICK, change4Button);

          change4Button(e);


          b2.addEventListener(MouseEvent.CLICK, change5Button);

          change5Button(e);

          b3.addEventListener(MouseEvent.CLICK, change6Button);

          change6Button(e);

          }

          and you would need to change the click="clickHandler()" to click="clickHandler(event)"

          (Again this is just for tutorial purposes, you should set your event listeners in the creationComplete event generally, unless you have are trying to do something I don't understand.)
          • 2. Re: 3 buttons calling 6 boxes. Help in code.
            atta707 Level 2
            and for second time you'll need to hide currently visible boxes to show the the ones that you want to:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
            >

            <mx:Script>
            <![CDATA[


            import flash.events.*;

            public function clickHandler():void
            {
            b1.addEventListener(MouseEvent.CLICK, change4Button);
            b2.addEventListener(MouseEvent.CLICK, change5Button);
            b3.addEventListener(MouseEvent.CLICK, change6Button);

            }

            public function change4Button(Event:MouseEvent):void
            {
            v1.visible="true";
            v4.visible="true";

            v2.visible = false;
            v3.visible = false;
            v5.visible = false
            v6.visible = false;

            }
            public function change5Button(Event:MouseEvent):void
            {
            v2.visible="true";
            v5.visible="true";
            }
            public function change6Button(Event:MouseEvent):void
            {
            v3.visible="true";
            v6.visible="true";
            }

            ]]>
            </mx:Script>

            <mx:Button x="55" y="58" label="Button" click="(clickHandler())" id="b1"/>
            <mx:Button x="145" y="58" label="Button" click="{clickHandler()}" id="b2"/>
            <mx:Button x="239" y="58" label="Button" click="{clickHandler()}" id="b3"/>


            <mx:VBox backgroundColor="#00CCff" x="83" y="135" width="50" height="50" id="v1" visible="false"/>
            <mx:VBox backgroundColor="#ffCCff" x="83" y="135" width="50" height="50" id="v2" visible="false"/>
            <mx:VBox backgroundColor="#00CC00" x="83" y="135" width="50" height="50" id="v3" visible="false"/>
            <mx:VBox backgroundColor="#ffCCfd" x="393" y="135" width="50" height="50" id="v4" visible="false"/>
            <mx:VBox backgroundColor="#ffffff" x="393" y="135" width="50" height="50" id="v5" visible="false"/>
            <mx:VBox backgroundColor="#fcCfdc" x="393" y="135" width="50" height="50" id="v6" visible="false"/>



            </mx:Application>



            • 3. Re: 3 buttons calling 6 boxes. Help in code.
              VarioPegged Level 2
              I'll chime in here as well. Your id naming convention of the components lends itself to adding the components in repeaters or loops, but I didn't change the way you've declared those components. I used constants to be used in the for loop for simplicity, but you could set those dynamically in variables based on the number of children that are of a specific type (Button or VBox).

              Try and cut down on the functions and have only one that I think does what you might be looking to do.

              TS
              • 4. Re: 3 buttons calling 6 boxes. Help in code.
                Shelady Level 1
                genius.
                Thanks
                She.