0 Replies Latest reply on Mar 31, 2008 9:31 PM by jemmyw

    button skin with mask no roll over

    jemmyw
      Hi. I'm having a problem with a custom skin class that I hope someone can give me a pointer about. I've created a class that does some drawing and I'm setting it as the button skin with ClassReference. The skin works fine, and I've had it working fine as a sprite, a programmatic skin and a UIComponent, except for one point. The skin draws some stuff, then it creates a mask for itself. If the mask isn't applied then everything works fine. If the mask is applied then the button won't respond to rollovers over the skin, only over the text of the button.

      Here is the latest iteration of my code. if I take out the addChild(s); mask = s; then it works.

      <code>
      public class BlueButtonSkin extends Sprite implements IProgrammaticSkin, IFlexDisplayObject {
      private var _width:Number;
      private var _height:Number;

      public function BlueButtonSkin() {
      super();
      this.filters = [new DropShadowFilter(2, 118, 0, 0.65, 1, 1, 0.1, 1, true)];
      }

      public function validateDisplayList():void {
      updateDisplayList(_width, _height);
      }

      public function validateNow():void {
      validateDisplayList();
      }

      protected function updateDisplayList(w:Number, h:Number):void {
      graphics.clear();
      DrawingUtil.drawTwoToneBackground(graphics, 0, 0, w, h, 0x4AB2EA, 0x009CEB, 1, 1, 0, true);
      graphics.lineStyle(1, 0x228CC0);
      graphics.drawRoundRect(0, 0, w, h, 10, 10);

      if(mask) {
      removeChild(mask);
      mask = null;
      }

      var s:FlexShape = new FlexShape();
      var g:Graphics = s.graphics;

      g.lineStyle(0, 0, 0);
      g.beginFill(0);
      g.drawRoundRect(-0.5, -0.5, w+1, h+1, 10, 10);
      g.endFill();

      addChild(s);
      mask = s;
      }

      public function get measuredWidth():Number { return width; }
      public function get measuredHeight():Number { return height; }

      public function setActualSize(w:Number, h:Number):void {
      _width = w; _height = h;
      validateNow();
      }

      public function move(x:Number, y:Number):void {
      this.x = x; this.y = y;
      }
      }
      </code>