2 Replies Latest reply on Jun 10, 2010 9:37 PM by Shubhra Bhushan

    Set Corner radius in Programmatic skin

    Shubhra Bhushan Level 1

      Hi Folks,

       

      I created a skin to show on Button mousedown.I want to give corner raduis and border thickness also as skin attributes because I gave them to the button in the normal way but they are not working on mousedown when I chose to give skin on it.

       

      Following is the code of the skin:

       

      package
      {
          import flash.display.Graphics;
          import flash.geom.Matrix;
          import flash.geom.Rectangle;
         
          import mx.graphics.GradientEntry;
          import mx.graphics.LinearGradient;
          import mx.skins.ProgrammaticSkin;
         
          public class MousedownSkin extends ProgrammaticSkin
          {
              private var _cornerRadius:Number;
             
              public function MousedownSkin()
              {
                  super();
                  _cornerRadius = 2;
                 
              }
              override protected function updateDisplayList(w:Number, h:Number):void
              {           
                  var bgColor1:Number;
                  var bgColor2:Number;
                 
                  if (getStyle("cornerradius"))
                      _cornerRadius = getStyle("cornerradius");
                 
                  if (name == "downSkin")
                  {
                      bgColor1 = 0x6e6e6e;
                      bgColor2 = 0x595959;           
                  }

       

                  var g:Graphics = graphics;
                  g.clear();

       

                  var fill:LinearGradient = new LinearGradient();
                  var g1:GradientEntry = new GradientEntry(bgColor1, 1.0, 1.0);
                  var g2:GradientEntry = new GradientEntry(bgColor2, 1.0, 1.0);
                 
             
                  fill.entries = [g1,g2];
                  fill.angle = 90;           
                  g.moveTo(0,0);
                  fill.begin(g, new Rectangle(0,0,w,h));
                  g.lineTo(w,0);
                  g.lineTo(w,h);
                  g.lineTo(0,h);
                  g.lineTo(0,0);
                  fill.end(g);           
                 
              }
             
          }
      }

       

      Following is the main.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                              creationComplete="init()" backgroundColor="white">
          <mx:Script>
              <![CDATA[
                  private function init():void{
                  }
              ]]>
          </mx:Script>
          <mx:Style>
              .newButton
              {
                  border-skin: ClassReference(null);
                  fill-alphas: 1.0,1.0;
                  fill-colors: #D7D7D7, #AEAEAE, #FEFEFE, #DBDBDB;
                  theme-color: #6e6e6e;
                  down-skin:ClassReference('MousedownSkin');
                  border-thickness: 0;                       
              }
          </mx:Style>

       

          <mx:Button id="btn" label="Test Button" styleName="newButton" x="20" y="20" cornerRadius="6"/>

       

      </mx:WindowedApplication>

        • 1. Re: Set Corner radius in Programmatic skin
          Shubhra Bhushan Level 1

          Any Help Guys? I'm stuck up with this issue and gotto give the release urgently

          • 2. Re: Set Corner radius in Programmatic skin
            Shubhra Bhushan Level 1

            Guys I solves it myself. Now I;m giving ProgrammaticSkin with Corner radius. The button border disappeared once I imlemented this skin class for all my buttons

            Here goes the code of the skin class:

             

            package
            {
                import flash.display.GradientType;
                import flash.display.Graphics;   
                import mx.skins.ProgrammaticSkin;
               
                public class MousedownSkin extends ProgrammaticSkin
                {
                    private var _cornerRadius:Number;
                   
                    public function MousedownSkin()
                    {
                        super();
                        _cornerRadius = 2;
                       
                    }
                    override protected function updateDisplayList(w:Number, h:Number):void
                    {                       
                        var bgColor1:Number;
                        var bgColor2:Number;
                       
                        var obj:* = getStyle("cornerRadius");
                        if (obj != null)
                            _cornerRadius = obj;                      

             

                        var g:Graphics = graphics;
                        g.clear();           
                        g.moveTo(0,0);                       
                       
                        switch (name)
                        {
                            case "downSkin":
                                bgColor1 = 0x6e6e6e;                               
                                bgColor2 = 0x595959;
                                g.beginGradientFill(GradientType.LINEAR, [bgColor1, bgColor2], [1,1], [0,255]);
                                break;
                           
                            case "upSkin":
                                bgColor1 = 0xd7d7d7;                               
                                bgColor2 = 0xaeaeae;
                                g.beginGradientFill(GradientType.LINEAR, [bgColor1, bgColor2], [1,1], [0,255]);
                                break;
                           
                            case "overSkin":
                                bgColor1 = 0xfefefe;                               
                                bgColor2 = 0xdbdbdb;
                                g.beginGradientFill(GradientType.LINEAR, [bgColor1, bgColor2], [1,1], [0,255]);
                                break;
                           
                            default:
                                break;
                        }

                        drawRoundRect(0,0,w,h,_cornerRadius);
                        g.endFill();
                       
                    }
                   
                }
            }