3 Replies Latest reply on Apr 25, 2011 12:43 PM by Trimakas1

    Flex 4 mobile custom button skin

    Trimakas1

      Some reason I have a border around my skins that look like the standard button that I skinned..my fxg has rounded corners and the standard is squared.. and you can see the squard off corners behind my custom skin..

       

      Freaking driving me crazy these buttons..

       

      Any ideas why??

       

      Ah ha! Here is what it looks like..

       

       

      buttons.jpg

       

      Below is one of my fxg graphics..

       

      <?xml version="1.0" encoding="utf-8" ?>
      <Graphic version="2.0" viewHeight="48" viewWidth="390" ai:appVersion="15.0.2.399" ATE:version="1.0.0" flm:version="1.0.0" d:id="1" d:using="" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008">
        <Library/>
        <Group ai:artboardActive="1" ai:artboardIndex="0" ai:seqID="1" d:layerType="page" d:pageHeight="49" d:pageWidth="391" d:type="layer" d:userLabel="Artboard 1">
          <Group ai:objID="88df000" ai:seqID="2" d:id="2" d:type="layer" d:userLabel="up_button">
            <Rect x="0.5" y="0.5" width="390" height="48" radiusX="13.2953" radiusY="11.9992" ai:objID="e5b3700" ai:seqID="3" flm:variant="1" d:id="3">
              <fill>
                <LinearGradient x="195" y="46.4912" scaleX="47.5325" rotation="270">
                  <GradientEntry ratio="0.17901" color="#414141"/>
                  <GradientEntry ratio="0.338451" color="#4A4A4A"/>
                  <GradientEntry ratio="0.54081" color="#5E5E5E"/>
                  <GradientEntry ratio="1" color="#A3A3A3"/>
                </LinearGradient>
              </fill>
              <stroke>
                <SolidColorStroke caps="none" joints="miter" miterLimit="10"/>
              </stroke>
            </Rect>
            <Group x="0.5" y="0.5" ai:objID="88d2400" ai:seqID="4">
              <Path y="21.835" winding="nonZero" ai:objID="e91f680" ai:seqID="5" flm:variant="2" d:id="4" data="M0 0 0 14.165C0 20.792 5.95264 26.165 13.2954 26.165L376.704 26.165C384.047 26.165 390 20.792 390 14.165L390 0.786133C344.14 5.70508 275.377 8.83203 198.498 8.83203 117.602 8.83203 45.6934 5.36914 0 0Z">
                <fill>
                  <LinearGradient x="195" y="24.6563" scaleX="47.5325" rotation="270">
                    <GradientEntry ratio="0.17901" color="#414141"/>
                    <GradientEntry ratio="0.338451" color="#4A4A4A"/>
                    <GradientEntry ratio="0.54081" color="#5E5E5E"/>
                    <GradientEntry ratio="1" color="#A3A3A3"/>
                  </LinearGradient>
                </fill>
              </Path>
              <Path alpha="0.8" winding="nonZero" ai:objID="e91f380" ai:seqID="6" flm:variant="3" d:id="5" data="M376.704 0 13.2954 0C5.95264 0 0 5.37305 0 12L0 21.835C45.6934 27.2041 117.602 30.667 198.498 30.667 275.377 30.667 344.14 27.54 390 22.6211L390 12C390 5.37305 384.047 0 376.704 0Z">
                <fill>
                  <LinearGradient x="195" y="30.5723" scaleX="31.7643" rotation="270">
                    <GradientEntry ratio="0" color="#414141"/>
                    <GradientEntry ratio="0" color="#4D4D4D"/>
                    <GradientEntry ratio="1" color="#FFFFFF"/>
                  </LinearGradient>
                </fill>
              </Path>
            </Group>
          </Group>
        </Group>
      </Graphic>

       

       

      Todd

        • 1. Re: Flex 4 mobile custom button skin
          Lee Burrows Level 4

          hi

           

          post the code for your button skin class - the problem is more than likely to be found there

          • 2. Re: Flex 4 mobile custom button skin
            Trimakas1 Level 1

            Cool.. here we go..

             

            ////////////////////////////////////////////////////////////////////////////////
            //
            //  ADOBE SYSTEMS INCORPORATED
            //  Copyright 2010 Adobe Systems Incorporated
            //  All Rights Reserved.
            //
            //  NOTICE: Adobe permits you to use, modify, and distribute this file
            //  in accordance with the terms of the license agreement accompanying it.
            //
            ////////////////////////////////////////////////////////////////////////////////

             

            package skins
            {
               
            import flash.display.DisplayObject;
            import flash.display.GradientType;
            import flash.geom.Matrix;

             

            import mx.states.SetProperty;
            import mx.states.State;
            import mx.utils.ColorUtil;

             

            import spark.skins.mobile.assets.Button_down;
            import spark.skins.mobile.assets.Button_up;
            import spark.skins.mobile.supportClasses.ButtonSkinBase;
            import assets.button_down;
            import assets.button_up;
               
            /*   
                ISSUES:
                - should we support textAlign

             

            */
            /**
            *  Actionscript based skin for mobile applications. The skin supports
            *  iconClass and labelPlacement. It uses a couple of FXG classes to
            *  implement the vector drawing. 
            *
            *  @langversion 3.0
            *  @playerversion Flash 10
            *  @playerversion AIR 2.5
            *  @productversion Flex 4.5
            */
            public class MyButton extends ButtonSkinBase
            {   
               
                //--------------------------------------------------------------------------
                //
                //  Constructor
                //
                //--------------------------------------------------------------------------
                public function MyButton()
                {
                    super();
                    upBorderSkin = button_up;
                    downBorderSkin = button_down;
                }
               
                //--------------------------------------------------------------------------
                //
                //  Variables
                //
                //--------------------------------------------------------------------------
                private var bgImg:DisplayObject;
               
                private var changeFXGSkin:Boolean = false;
                private var borderClass:Class;
               
                private static var matrix:Matrix = new Matrix();
               
                // Used for gradient background
                private static const alphas:Array = [1, 1, 1];
                private static const ratios:Array = [0, 127.5, 255];
               
                //--------------------------------------------------------------------------
                //
                //  Properties
                //
                //--------------------------------------------------------------------------
               
                /**
                 *  Class to use for the border in the up state.
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10
                 *  @playerversion AIR 2.5
                 *  @productversion Flex 4.5
                 *
                 *  @default Button_up
                 */ 
                protected var upBorderSkin:Class;
               
                /**
                 *  Class to use for the border in the up state.
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10
                 *  @playerversion AIR 2.5
                 *  @productversion Flex 4.5
                 *      
                 *  @default Button_down
                 */
                protected var downBorderSkin:Class;
               
                //--------------------------------------------------------------------------
                //
                //  Overridden methods
                //
                //--------------------------------------------------------------------------
               
                /**
                 *  @private
                 */
                override protected function commitCurrentState():void
                {  
                    super.commitCurrentState();
                   
                    if (currentState == "down")
                        borderClass = downBorderSkin;
                    else
                        borderClass = upBorderSkin;
                   
                    if (!(bgImg is borderClass))
                    {
                        changeFXGSkin = true;
                        invalidateDisplayList();
                    }
                }
                
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                {
                    // Size the FXG background  
                    if (changeFXGSkin)
                    {
                        changeFXGSkin = false;
                       
                        if (bgImg)
                        {
                            removeChild(bgImg);
                            bgImg = null;
                        }
                       
                        if (borderClass)
                        {
                            bgImg = new borderClass();
                            addChildAt(bgImg, 0);
                        }
                    }
                   
                    if (bgImg != null)
                    {
                        layoutBorder(bgImg, unscaledWidth, unscaledHeight);
                    }
                   
                    drawBackground(unscaledWidth, unscaledHeight);
                               
                    // The label and icon should be placed on top of the FXG skins
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                }
               
                /**
                 *  Position the background of the skin. Override this function to position of the background.
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10
                 *  @playerversion AIR 2.5
                 *  @productversion Flex 4.5
                 */
                protected function layoutBorder(bgImg:DisplayObject, unscaledWidth:Number, unscaledHeight:Number):void
                {
                    bgImg.x = bgImg.y = 0.5;
                    bgImg.width = unscaledWidth;
                    bgImg.height = unscaledHeight;
                }
               
                /**
                 *  Draws the background of the skin. Override this function to change the background.
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10
                 *  @playerversion AIR 2.5
                 *  @productversion Flex 4.5
                 *      
                 *  @default Button_down
                 */
                protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
                {
                    var colors:Array = [];
                   
                    graphics.clear();
                   
                    // Draw the gradient background
                    matrix.createGradientBox(unscaledWidth - 1, unscaledHeight - 1, Math.PI / 2, 0, 0);
                    var chromeColor:uint = getStyle("chromeColor");
                    colors[0] = ColorUtil.adjustBrightness2(chromeColor, 20);
                    colors[1] = chromeColor;
                    colors[2] = ColorUtil.adjustBrightness2(chromeColor, -20);
                   
                    graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
                   
                    // Draw the background rectangle within the border, so the corners of the rect don't
                    // spill over into the rounded corners of the Button
                    graphics.drawRect(1, 1, unscaledWidth - 1, unscaledHeight - 1);
                    graphics.endFill();
                }

             

            }
            }

            • 3. Re: Flex 4 mobile custom button skin
              Trimakas1 Level 1

              Wow... I fixed it myself.. too good..

               

              I'll put this out for anyone who needs it.. I commented out these two blocks of code..

               

              this background function at the very end of the skin

               

              /*    protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
                  {
                      var colors:Array = [];
                     
                      graphics.clear();
                     
                      // Draw the gradient background
                      matrix.createGradientBox(unscaledWidth - 1, unscaledHeight - 1, Math.PI / 2, 0, 0);
                      var chromeColor:uint = getStyle("chromeColor");
                      colors[0] = ColorUtil.adjustBrightness2(chromeColor, 20);
                      colors[1] = chromeColor;
                      colors[2] = ColorUtil.adjustBrightness2(chromeColor, -20);
                     
                      graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
                     
                      // Draw the background rectangle within the border, so the corners of the rect don't
                      // spill over into the rounded corners of the Button
                      graphics.drawRect(1, 1, unscaledWidth - 1, unscaledHeight - 1);
                      graphics.endFill();
                  }*/

               

              and all the references to it.. and this section around the border..

               

              /*    protected function layoutBorder(bgImg:DisplayObject, unscaledWidth:Number, unscaledHeight:Number):void
                  {
                      bgImg.x = bgImg.y = 0.5;
                      bgImg.width = unscaledWidth;
                      bgImg.height = unscaledHeight;
                  }*/