2 Replies Latest reply on Sep 4, 2009 2:44 PM by Andrew Rosewarn

    Using buttons as images

    Marlene

      I have 5 flex symbols that I am using as buttons in Flex. Is there a system (kinda like the button toggle) that allows me to click on one button and have the other four symbols alpha change to .5? I know how to code it but it seems extremely redundant.

      public function buttonManager():void {

           button1.alpha=.5;

          button2.alpha=.5;

          button3.alpha=.5;

          button4.alpha=.5;

          button5.alpha=.5;

           event.currentTarget.alpha=1;

        

       

       

      Can I put the names of the symbols in an Array and then use a for loop.               `                   

        • 1. Re: Using buttons as images
          Andrew Rosewarn Level 3

          Hi Marlene

           

          Yea you;d wanna do something like this.

           

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

           

          <mx:Script>

          <![CDATA[

          import mx.controls.Button;

           

          private var buttons:Array;

           

          private function init():void {

          buttons = new Array(btn1,btn2,btn3,btn4,btn5)

          }

           

          private function buttonManager(event:MouseEvent):void {

          for each (var button:Button in buttons) {

          button.alpha = .5;

          }

          event.target.alpha = 1;

          }

          ]]>

          </mx:Script>

           

          <mx:Button id="btn1" x="59" y="161" label="Button" click="buttonManager(event)"/>

          <mx:Button id="btn2"  x="132" y="161" label="Button" click="buttonManager(event)"/>

          <mx:Button id="btn3" x="205" y="161" label="Button" click="buttonManager(event)"/>

          <mx:Button id="btn4" x="278" y="161" label="Button" click="buttonManager(event)"/>

          <mx:Button id="btn5" x="351" y="161" label="Button" click="buttonManager(event)"/>

           

          </mx:Application>

           

          It would probably be better if you could put your buttons into a container and the when looping use the containers .getChildren() method.  That way you wouldn;t have to create and array and would work as you added more and more buttons.

           

          I think this would be better

           

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

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

           

          <mx:Script>

          <![CDATA[

          import mx.controls.Button;

           

          private var buttons:Array;

           

           

          private function buttonManager(event:MouseEvent):void {

          for each (var button:Button in hBox.getChildren()) {

          button.alpha = .5;

          }

          event.target.alpha = 1;

          }

          ]]>

          </mx:Script>

          <mx:HBox x="59" y="233" width="100%" id="hBox">

          <mx:Button  label="Button" click="buttonManager(event)"/>

          <mx:Button  label="Button" click="buttonManager(event)"/>

          <mx:Button label="Button" click="buttonManager(event)"/>

          <mx:Button  label="Button" click="buttonManager(event)"/>

          <mx:Button label="Button" click="buttonManager(event)"/>

          </mx:HBox>

           

          </mx:Application>

           

          Andrew

          • 2. Re: Using buttons as images
            Andrew Rosewarn Level 3

            And then to finish it off you should really create a custom component with this functionallity inside it which would be much more reusable

             

            Andrew