16 Replies Latest reply on May 1, 2009 12:39 AM by IlyaG

    How do I creat buttons in action script? Need lot of buttons...

    IlyaG Level 1

      Hi guys, I am trying to represent the pixels on my map with buttons. For this I build a class map and I am trying to create a 30x30 grid of buttons. But there seem to be a problem when I am trying to show the buttons, I saw in some examples that people were using the f1.controls.Button class, but I can't find it, all what I got is the mx.controls.Button, so I believe it is working different in here.

      Try to see if you can help me with this one.

       

      And another small question, why it shouts me with an error when I am doing this:

       

      private var slot:Button[30[30];

       

       

       

      Here Is my class, and what I was trying to do:

       

      package World

      {

       

      import mx.controls.Button;

       

       

      public class Map

      {

           private var slot:Button;

       

          

           public function Map()

           {

                var i:int;

                var j:int;

                for (i=0;i<30;i++)

                     for (j=0;j<30;j++)

                     {

                          slot[i][j]=new Button();

                          slot[i][j].width=30;

                          slot[i][j].hieght=30;

                          slot[i][j].left=40+i*30;

                          slot[i][j].top=2+j*30;

                          AddChild(slot[i][j]);

                     }

           }    

       

      }

      }

        • 1. Re: How do I creat buttons in action script? Need lot of buttons...
          ATIF FAROOQ Level 3

          hi,

             you should use array not button dataType

           

             here change

          private var slot:Button-> private var slot:Array=new Array()

           

          you are trying to use button data Type as array so that is the problem i think.you should use array data type instead of button as i show above

          • 2. Re: How do I creat buttons in action script? Need lot of buttons...
            IlyaG Level 1

            No, the problem is with the AddChield() function, its not working, it is not recognized by the compiler, I was trying to replace it with: mx.states.AddChild and it didnt helped...

            • 3. Re: How do I creat buttons in action script? Need lot of buttons...
              ATIF FAROOQ Level 3

              yes AddChild you are writing A capital in AddChild it should be addChild not AddChild

              • 4. Re: How do I creat buttons in action script? Need lot of buttons...
                IlyaG Level 1

                I just changed it and its not working....

                 

                Maby is some thing about the class I am importing...

                • 5. Re: How do I creat buttons in action script? Need lot of buttons...
                  m_hartnett Level 3

                  Your addChild is not targeting any object.

                   

                  You have a class object of a Map and it is a nonvisual object.

                  In here you are creating an array of buttons.

                  The buttons need to be added to some visual object to be seen by the user.

                   

                  When you addChild you need to add it to some kind of container like a VBox or HBox or Canvas or Grid ... etc.

                  1 person found this helpful
                  • 6. Re: How do I creat buttons in action script? Need lot of buttons...
                    IlyaG Level 1

                    So how can I do it if I wont to stay in my class?

                    • 7. Re: How do I creat buttons in action script? Need lot of buttons...
                      m_hartnett Level 3

                      There are a lot of ways to go about this but to get you started here is some code.

                       

                      I would eliminate the multi dim array and just add the button as an object to a canvas.

                      The top and left are style properties of the button and need to be set by the setStyle method.

                       

                      The class extends the Canvas object so that the addChild can target itself as the visual component.

                       

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

                           <mx:Application

                                xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

                                width="100%" height="100%" backgroundColor="#eaf1f6"

                                backgroundGradientAlphas="1.0,1.0"

                                xmlns:ns1="com.somaint.view.*">

                       

                                <mx:Script>

                                     <![CDATA[

                       

                       

                       

                                     ]]>

                                </mx:Script>

                                <ns1:MapButtonCanvas width="100%" height="100%">

                                </ns1:MapButtonCanvas>

                       

                      </mx:Application>

                       

                       

                      package com.somaint.view {

                           import mx.containers.Canvas;

                           import mx.controls.Button;

                       

                           public class MapButtonCanvas extends Canvas {

                                public function MapButtonCanvas(){

                                     var i:int;

                                     var j:int;

                       

                                     for (i=0;i<30;i++) {

                                          for (j=0;j<30;j++) {

                                               var btn:Button=new Button();

                                               btn.width=30;

                                               btn.height=30;

                                               btn.setStyle("left",40+i*30);

                                               btn.setStyle("top",2+j*30);

                                               this.addChild(btn);

                       

                                          }

                                     }    

                       

                       

                                }

                       

                           }

                      }

                      1 person found this helpful
                      • 8. Re: How do I creat buttons in action script? Need lot of buttons...
                        IlyaG Level 1

                        Great the compiler bugs are gone, but yet I have some errors, Its not showing the buttons on the screen when I am running the application.

                         

                        And I have few more questions for you:

                         

                        1) what is  it for:  <ns1:MapButtonCanvas width="100%" height="100%">

                                                 </ns1:MapButtonCanvas>

                         

                        2) if I would like to use another functions in the future that will interact with every button on the screen, how can I know witch it who?

                        • 9. Re: How do I creat buttons in action script? Need lot of buttons...
                          m_hartnett Level 3

                               The ns1:MapButtonCanvas is the alias to the package that contains the map button object and is defined in the application tag.

                          Look at the xmlns:ns1 in the tag below.  It is pointing to the package that has the MapButtonCanvas object. (ns stands for name space).

                           

                          <mx:Application

                                    xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

                                    width="100%" height="100%" backgroundColor="#eaf1f6"

                                    backgroundGradientAlphas="1.0,1.0"

                                    xmlns:ns1="com.somaint.view.*">

                           

                          Take a look at the actual MapButtonCanvas object and you can see that the package name is the same as the ns1 from above.

                           

                          package com.somaint.view {

                               import mx.containers.Canvas;

                               import mx.controls.Button;

                           

                           

                           

                               public class MapButtonCanvas extends Canvas {

                                    public function MapButtonCanvas(){

                           

                           

                          So the code below is saying to look in ns1(which is com.somaint.view) for the object MapButtonCanvas.

                          Your package names will be different and you will need to change the name in the Application tag and in the MapButtonCanvas object.

                          <ns1:MapButtonCanvas width="100%" height="100%">

                                    </ns1:MapButtonCanvas>

                           

                          As far as your buttons executing functions you will need to add a clicked event dispatcher to each button.

                           

                          Here is another version of the MapButton.  It is contained in a single application without breaking the map button out to its own component.

                          Compare the two and see how they are actually the same.  I added a name attribute and a click event listener to the button that displays the name at the bottom of the page.  The creationcompletehandler get executed after the application is created and builds the buttons

                           

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

                               <mx:Application

                                    xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

                                    width="100%" height="100%" backgroundColor="#eaf1f6"

                                    backgroundGradientAlphas="1.0,1.0"

                                    creationComplete="creationCompleteHandler()">

                           

                                    <mx:Script>

                                    <![CDATA[

                                         import mx.controls.Button;

                                         public function creationCompleteHandler():void{

                                         var i:int;

                                         var j:int;

                           

                                         for (i=0;i<30;i++) {

                                              for (j=0;j<30;j++) {

                                                   var btn:Button=new Button();

                                                   btn.width=30;

                                                   btn.height=30;

                                                   btn.setStyle("left",40+i*30);

                                                   btn.setStyle("top",2+j*30);

                                                   btnCanvas.addChild(btn);

                           

                           

                           

                                              }

                                         }

                                    }

                           

                                    private function clickButton(e:Event):void {

                           

                                         btnClickLbl.text = e.currentTarget.name;

                           

                                    }

                           

                           

                                    ]]>

                                    </mx:Script>

                          <mx:Canvas id="btnCanvas" width="100%" height="100%">

                          </mx:Canvas>

                          <mx:Label id="btnClickLbl" text="Label"/>

                           

                          </mx:Application>

                          • 10. Re: How do I creat buttons in action script? Need lot of buttons...
                            IlyaG Level 1

                            O.k now it does working, I can see all the buttons on the screen, but the name is not working, I added another line for the clickButton(e:Event), function Alert.show("Click") and it looks like the function is never been called, so I added another line in the body of creationCompleteHandler(),

                            after the loops btn.name="Testing" and non of the buttons got this name.

                             

                            So I think that it will be better to put all those buttons in some array, I just don't know how to do it.

                             

                            Now about the package that I was trying b4, I think that the reason I didn't sow the buttons was that the "this." call wasn't been attached probably, so I also would like to find how can I pass my canvas location for function.

                             

                            Tnx a lot, your been great helper so far, I hope you will be able to help me with this one as well.

                            • 11. Re: How do I creat buttons in action script? Need lot of buttons...
                              David_F57 Level 5

                              You need to add the event listener after the button is created

                               

                              btn.addEventListener(MouseEvent.CLICK, btnClickHandler);

                               

                               

                              hope this helps

                              • 12. Re: How do I creat buttons in action script? Need lot of buttons...
                                m_hartnett Level 3

                                I cut the wrong code so the name and listener did not get added.

                                I put it in the loop.  The name is composed of the words "mapBtn" plus the "i" number plus the "j" number.

                                You are creating 30 x 30 instances of a button that is why the 'new Button() is in the loop.

                                 

                                The creationCompleteHandler does not know what the instance of 'btn' is because that variable is created within the for/for loop.

                                After the button is added to the btnCanvas it now exists as a child of the canvas.

                                You would now need to address the button through the getChild methods of the canvas such as

                                btnCanvas.getChildAt(index number) or getChildByName(buttonName).

                                 

                                 

                                               for (i=0;i<30;i++) {

                                                    for (j=0;j<30;j++) {

                                                         var btn:Button=new Button();

                                                         btn.width=30;

                                                         btn.height=30;

                                                     

                                                         btn.addEventListener("clicked",clickButton);

                                                         btn.name = "mapBtn" + i + "_" + j;

                                 

                                                       

                                                         btn.setStyle("left",40+i*30);

                                                         btn.setStyle("top",2+j*30);

                                                         btnCanvas.addChild(btn);

                                 

                                 

                                 

                                                    }

                                               }

                                 

                                You should not create a separate array of the buttons because now your instances of the button would appear in two places...once in the array and once as a child of the canvas (or whatever container you choose).  This would be wasteful for memory.

                                 

                                All of your objects exist in packages.  You need to change the package name of the MapButtonCanvas object to be in line with the name of your package.  It looks like your package is World.  If you saved the MapButtonCanvas object to the package World then change the ns1 to point to that location.

                                 

                                If you want to pass a reference to the Map button object just pass it like:  Then add the button to the reference btnCanvas.

                                 

                                public class MapButton {

                                 

                                public function MapButton( btnCanvas:Canvas) {

                                • 13. Re: How do I creat buttons in action script? Need lot of buttons...
                                  IlyaG Level 1

                                  Alright I will show you what I got so far, and you try to tell me where did I got wrong.

                                   

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

                                  <mx:Application

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

                                  width="100%" height="100%" backgroundColor="#eaf1f6"

                                  backgroundGradientAlphas="1.0,1.0"

                                  xmlns:ns1="World.*"

                                  creationComplete="init()">

                                   

                                  <mx:Script>

                                  <![CDATA[

                                  import World.Map;

                                  import mx.controls.Alert;

                                  private function init():void

                                  {

                                  var myMap:Map=new Map();

                                  myMap.showMap(mapCanvas,clickButton);

                                  }

                                   

                                  private function clickButton(e:Event):void

                                  {

                                   

                                              Alert.show("I am alive");

                                              btnClickLbl.text = e.currentTarget.name;

                                  }

                                   

                                  ]]>

                                  </mx:Script>

                                  <mx:Canvas width="100%" height="100%" id="mapCanvas">

                                  </mx:Canvas>

                                  <mx:Label id="btnClickLbl" x="0" y="0" text="Non"/>

                                   

                                  <ns1:Map/>

                                  </mx:Application>

                                  ------------------------------------------------------------------------------------------ ---------------------------------

                                  package World

                                  {

                                  import mx.containers.Canvas;

                                  import mx.controls.Button;

                                   

                                  public class Map extends Canvas

                                  {

                                  private var slot:Button;

                                   

                                  public function Map()

                                  {

                                  }

                                   

                                  public function showMap(btnCanvas:Canvas,clickButton:Function):void

                                  {

                                   

                                  var i:int;

                                  var j:int;

                                  for (i=0;i<40;i++)

                                  for (j=0;j<26;j++)

                                  {

                                  slot = new Button();

                                  slot.width=30;

                                  slot.height=30;

                                  slot.setStyle("left",40+i*30);

                                                      slot.setStyle("top",2+j*30);

                                  slot.name=i+","+j;

                                  slot.addEventListener("clicked",clickButton);

                                  btnCanvas.addChild(slot);

                                   

                                  }

                                   

                                  }

                                   

                                  }

                                  }

                                  ------------------------------------------------------------------------------------------ -----------------------------------

                                  This application does shows the buttons, but without the names. It seems that the click event is not working.

                                   

                                  And if you can explain to me what can I do with <ns1:Map/> how does it helping me?

                                  • 14. Re: How do I creat buttons in action script? Need lot of buttons...
                                    m_hartnett Level 3

                                    The ns1 (which can actually be any unique name you want) is used to address a visual object).

                                     

                                    I think what you did not notice is that Map extends Canvas.  (public class Map extends Canvas { )

                                     

                                     

                                    That means it extends a visual component.

                                     

                                    If you want to use this object in your application then the application needs to know where it is at.

                                    If you have xmlns:ns1="com.somaint.view.* then that means the Map object (which extends the Canvas) is located in the package com.somaint.view.

                                     

                                    <ns1:Map width="100%" height="100%">

                                    </ns1:Map>

                                     

                                    I think you want to do is have Map extend object so you would need to take the 'extends Canvas' off the object definition.

                                    This means that it is going to be a nonvisual object.  In this case the ns1 is not necessary, just an import statement would be necessary.  (if all your objects are in the same package then an import statement would not be necessary)

                                     

                                    So now the canvas you will be adding the buttons to will be in the Application object.  If your Map extended a Canvas then the ns1:Map would be used in place of the Canvas definition in your Application.  Either way there needs to be a Canvas or some other container that will hold the buttons.  The canvas will be defined in the Application object or the Map object.  It is just a architecture decision.

                                     

                                    <mx:Canvas id="btnCanvas" width="100%" height="100%">

                                    </mx:Canvas>

                                     

                                    As far as your code goes

                                    1. Change your Map definition to not extend Canvas ( just define it as public Map { )

                                    2. Change the clicked to click in the event listener

                                    3.  If you want to show the name of the button on the button then that is the label attribute so add slot.label = slot.name.

                                    4. You might also want to use the slot.id in place of the name.  I use them both.

                                     

                                    • 15. Re: How do I creat buttons in action script? Need lot of buttons...
                                      ntsiii Level 3

                                      Also, consider using Repeater instead of manually using addChild.  It will save you a lot of code and has some nice features like optional recycling and automatic reference id array generation.

                                       

                                      Tracy

                                      • 16. Re: How do I creat buttons in action script? Need lot of buttons...
                                        IlyaG Level 1

                                        Hallelujah now this is working fine, I have my buttons grid and I got control over it, tnx a lot.

                                         

                                        For the next step I found another problem that I can't slove by my own, I asked it in a new post witch you can find here

                                        http://forums.adobe.com/thread/426991

                                         

                                        and thank you once again.