Home > Degrafa, Flex > Degrafa and FlashBuilder Part II

Degrafa and FlashBuilder Part II

May 16, 2010

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.

Advertisements
Categories: Degrafa, Flex
  1. May 17, 2010 at 2:29 am

    That’s pretty cool to see, I wasn’t aware that sort of trickery was possible. Good example for a lot of techniques.

    Is this more efficient than using just the new Spark skin elements, or pretty on par?

    • May 17, 2010 at 6:21 am

      This was some pathetic hacking to get the current version of Degrafa working (with limitations) with Flash Builder. I really prefer using Spark components and the new Spark skins. I won’t be able to exercise that preference until Degrafa is formally released for F4.

  2. May 23, 2010 at 1:57 pm

    fyi, I’ve just updated a branch of Degrafa that overcomes the issues with Fills.
    http://code.google.com/p/degrafa/source/detail?r=637

    See instructions in the readme.txt for additional compiler args

    Or there is a download of this preliminary version here :
    http://code.google.com/p/degrafa/downloads/list

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: