5 Replies Latest reply on Aug 6, 2009 7:05 AM by Louder6Pounder

    making a custom shape a button

    Louder6Pounder Level 1

      Hi people

       

      I have this graphic:

       

      Untitled.png

       

      which is 4 rectangles as you can see.  I would like to make them 4 buttons without the clipping problem.  Does anyone know how to do this?

       

      Thanks alot

        • 1. Re: making a custom shape a button
          ShardulSingh Level 3

          Hi,

           

          I thing you should make a componet which will having the four buttons.You can check this one component which I have made just as an example.

          Here you have to make the height and with of the buttons according to the images which you are having.

          You can check the code from below.Pls let me know if you have any issue.

           

           

          MainApplication

           

           

           

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

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

          <mx:VBox width="500" height="400" horizontalAlign="center" verticalAlign="middle">

          <com:CustomButtonComponent/>

          </mx:VBox>

          </mx:Application>

           

           

           

          CustomButtonComponent

           

           

           

           

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

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF">

          <mx:Script>

          <![CDATA[

          [Embed(source="assets/leftBtn.png")]

          [Bindable]

          private var leftImg:Class;

           

          [Embed(source="assets/rightBtn.png")]

          [Bindable]

          private var rightImg:Class;

           

          [Embed(source="assets/bottomBtn.png")]

          [Bindable]

          private var bottomImg:Class;

           

          [Embed(source="assets/topBtn.png")]

          [Bindable]

          private var topImg:Class;

          ]]>

          </mx:Script>

          <mx:VBox paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">

           

          <mx:HBox horizontalAlign="center" width="100%">

          <mx:Button id="topBtn" width="100" height="50" icon="{topImg}"/>

          </mx:HBox>

           

          <mx:HBox width="100%">

          <mx:Button id="leftBtn" width="50" height="100" icon="{leftImg}"/>

          <mx:Spacer width="100"/>

          <mx:Button id="rightBtn" width="50" height="100" icon="{rightImg}"/>

          </mx:HBox>

           

          <mx:HBox horizontalAlign="center" width="100%">

          <mx:Button id="bottomBtn" width="100" height="50" icon="{bottomImg}"/>

          </mx:HBox>

          </mx:VBox>

          </mx:Canvas>

           

           

           

           

          with Regards,

           

          Shardul Singh Bartwal

          1 person found this helpful
          • 2. Re: making a custom shape a button
            Gregory Lafrance Level 6

            One thing you may need is to make the background of the images transparent.

             

            If this post answers your question or helps, please mark it as such.

            1 person found this helpful
            • 3. Re: making a custom shape a button
              Louder6Pounder Level 1

              yeah thats what i was going to do Greg, but would it still fire a click event on the transparent?  Cos if it does that then where the rectangles overlap it will cause problems if a user clicks there.

              • 4. Re: making a custom shape a button
                Gregory Lafrance Level 6

                Actually, now that I think of it, I would have five images, one for the ring, and four for the buttons.

                 

                Then use a Canvas and use absolute positioning to place the buttons precisely on the ring.

                 

                The triangle buttons can be transparent, and as long as a click is detected on the triangle, you're all set.

                 

                I also would not use HBox and VBox as the sample code of the other poster provided. It's okay, but not in this case. This will be a simple component where absolute positioning in a Canvas makes more sense.

                 

                If this post answers your question or helps, please mark it as such.

                • 5. Re: making a custom shape a button
                  Louder6Pounder Level 1

                  cheers greg, Legend as always.  Also thanks to the first poster for there help too!