Home/ Questions/Q 6228017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T09:18:58+00:00

I’ve just started playing about with skinning and am finding it harder than anything

  • 0

I’ve just started playing about with skinning and am finding it harder than anything else I’ve come across in Flex 4 Mobile. It needs to be done in actionscript as I am trying to skin a flex mobile button. Here is what I have so far: (It does very little, only changes the background color)

package skins {   
     import flash.display.GradientType;
     import flash.geom.Matrix;
     import mx.utils.ColorUtil;
     import spark.components.supportClasses.StyleableTextField;
     import spark.skins.mobile.ButtonSkin;
     import spark.skins.mobile.supportClasses.MobileSkin;

public class CustomButtonSkin extends ButtonSkin {

    public function CustomButtonSkin() {
        super();
        layoutPaddingLeft = 10;
        layoutPaddingRight = 10;
        layoutPaddingTop = 2;
        layoutPaddingBottom = 2;
        layoutCornerEllipseSize = 1;
    }

    private static var colorMatrix:Matrix = new Matrix();
    private static const CHROME_COLOR_ALPHAS:Array = [1, 1];
    private static const CHROME_COLOR_RATIOS:Array = [0, 127.5];        

    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
        super.drawBackground(unscaledWidth, unscaledHeight);        

        var chromeColor:uint = getStyle("chromeColor");

        if (currentState == "up") {
        graphics.beginFill(0x1C1C1C);
        }           
        else{
        var colors:Array = [];
        colorMatrix.createGradientBox(unscaledWidth, unscaledHeight,                        Math.PI / 2, 0, 0);
        colors[0] = 0xFFFFFF;//ColorUtil.adjustBrightness2(chromeColor, 70);
        colors[1] = 0xEEEEEE;//chromeColor;    
        graphics.beginGradientFill(GradientType.RADIAL, colors, CHROME_COLOR_ALPHAS, CHROME_COLOR_RATIOS, colorMatrix);          
        graphics.endFill();
        }
    }

   }
}

There doesn’t seem to be much in the way of documentation for skinning Flex mobile components purely in actionscript. How do we add a border for example? If anyone could post their custom flex mobile skins it would be hugely appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Specifically to draw a border, I would draw one manually using the graphics API.

    this.graphics.lineStyle(1, color, alpha, true); 
this.graphics.drawRect(0, 0, width, height);

    I have a bunch of blog posts/podcasts about building mobile skins / itemRenderers that may help you:

    • 0