Degrafa and FlashBuilder Part II

Continuing from Part I of this series, there is still a bit more work to do in terms of project setup using the styles.css file from the standard Degrafa Template.  In the project settings, edit the Flex Compiler settings to ensure the Halo theme is used,

-locale en_US -theme=${flexlib}/themes/Halo/halo.swc

Next, insert the mx namespace into the styles.css file and reference the Application container and Button with mx|Application and mx|Button.  The fill woes continue here as using the cool Degrafa skinning of the Application container creates a conflict with ComplexFill.  We can get the Degrafa logo skinned into the application background with a quick hack … and I do mean hack 🙂

First, here is the styles.css file with some additional font changes and the new mx|Application styling.

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

/*------------------------------------------------------------------------------ Fonts */

@font-face
{
  src: url('../fonts/Myriad.swf');
  fontFamily: 'Myriad Pro';
  fontWeight: Regular;
}

@font-face
{
  src: url('../fonts/Myriad.swf');
  fontFamily: 'Myriad Pro Semibold';
  fontWeight: Semibold;
}

@font-face
{
  src: url("/Library/Fonts/Arial.ttf");
  fontFamily: 'Arial';
  fontWeight: Regular;
  embedAsCFF: false
}

/*------------------------------------------------------------------------------ Global */

global
{
  font-family: 'Myriad Pro';
  color: #CCCCCC;
  embedAsCFF: false
}

/*------------------------------------------------------------------------------ Text */

.point
{
  fontFamily:'Arial';
  fontSize: 14;
  color: #000000;
  fontWeight:	Semibold;
}

.title
{
  font-size: 24;
  text-align: right;
  color: #CCCCCC;
}

/*------------------------------------------------------------------------------ Application */

mx|Application
{
  background-color: #222222;
  borderSkin: ClassReference("DegrafaBackground")
}

/*------------------------------------------------------------------------------ Button */

mx|Button
{
  fill-colors:  #222222, #222222;
  border-color:	#666666;
  color: #CCCCCC;
  corner-radius: 0;
  text-roll-over-color:	#FFFFFF;
  highlight-alphas:	0,0;
  border-alpha:	1;
}

And, here is the DegrafaBackground.as file, aka quick hack for the border skin,

package
{
  import flash.display.Graphics;
  import mx.skins.ProgrammaticSkin;
  import mx.utils.ColorUtil;
  import flash.display.BitmapData;
  import flash.display.Bitmap;

  public class DegrafaBackground extends ProgrammaticSkin
  {
    [Embed(source='assets/images/degrafa-logo.png')]
    private var DegrafaImage:Class;  

    public function DegrafaBackground()
    {
        super();
    }

    override public function get measuredWidth():Number
    {
      return 8;
    }

    override public function get measuredHeight():Number
    {
      return 8;
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
	super.updateDisplayList(w, h);

        var g:Graphics       = graphics;
        var fillColors:Array = getStyle("backgroundGradientColors");
        var fillAlphas:Array = getStyle("backgroundGradientAlphas");

	if (!fillColors)
	{
	  var bgColor:uint = getStyle("backgroundColor");

	  if (isNaN(bgColor))
		bgColor = 0xFFFFFF;

	    fillColors = [];
            fillColors[0] = ColorUtil.adjustBrightness(bgColor, 15);
            fillColors[1] = ColorUtil.adjustBrightness(bgColor, -25);
	}

	if (!fillAlphas)
	  fillAlphas = [1, 1];

        g.clear();
        drawRoundRect(0, 0, w, h, 0, fillColors, fillAlphas, verticalGradientMatrix(0, 0, w, h));

        var backgroundImage:Bitmap       = new DegrafaImage();
        var backgroundBitmap:BitmapData  = new BitmapData( backgroundImage.width, backgroundImage.height, true, getStyle("backgroundColor") );
        backgroundBitmap.draw( backgroundImage );

        g.beginBitmapFill( backgroundBitmap );
        g.drawRect( 0, 0, backgroundImage.width, backgroundImage.height );
    }
  }
}

And, with that, I was able to get the AdvCubicBezier example up and running with the Degrafa logo skinned into the application background. With F4, Degrafa fills are bad news. Fortunately, splines and such do not involve fills, at least not the declarative type, so it’s clear sailing ahead for low-level Degrafa development.

If there is any interest, I’ll clean up the project and post a .zip to an FXP file for download.

Advertisement