2 Replies Latest reply on Aug 29, 2010 8:51 PM by sh.cn

    How to create a component having irregular shape?

    sh.cn

      Components such as button have a rectangle shape. But it is not suitable allways. Would someone give a sample. Spark component having irregular shape is welcome. Thanks ahead.

        • 1. Re: How to create a component having irregular shape?
          Shongrunden Adobe Employee

          You can create a custom Button skin that uses graphics that aren't necessarily square by using a Path and mouseEnabledWhereTransparent=false.  For example here is a custom button skin that looks like a diamond:

           

          CustomButtonSkin.mxml:

          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                       minWidth="21" minHeight="21" alpha.disabled="0.5"
                       mouseEnabledWhereTransparent="false">
             
              <fx:Metadata>
                  <![CDATA[
                      [HostComponent("spark.components.Button")]
                  ]]>
              </fx:Metadata>
             
              <s:states>
                  <s:State name="up" />
                  <s:State name="over" />
                  <s:State name="down" />
                  <s:State name="disabled" />
              </s:states>
             
              <s:Path data="M 50 0 L 0 50 L 50 100 L 100 50 L 50 0" top="0" left="0" right="0" bottom="0">
                  <s:fill>
                      <s:SolidColor color="red" alpha="1" alpha.over="0.8" alpha.down="0.5" />
                  </s:fill>
              </s:Path>
             
              <s:Label id="labelDisplay"
                       textAlign="center"
                       verticalAlign="middle"
                       horizontalCenter="0" verticalCenter="1" />
             
          </s:SparkSkin>

           

          Main.mxml:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">

           

              <s:Button label="diamond button" skinClass="CustomButtonSkin" />
             
          </s:Application>

          • 2. Re: How to create a component having irregular shape?
            sh.cn Level 1

            mouseEnabledWhereTransparent="false"

            I see. Thanks.