Archive

Archive for May, 2010

Degrafa and FlashBuilder Part II

May 16, 2010 4 comments

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.

Categories: Degrafa, Flex

Pro Tennis Returns to Grapevine, TX

May 11, 2010 Comments off

One a personal level, this is pretty exciting.  The Grapevine Tennis Classic Women’s $50K Pro Circuit event returns to the Hilton DFW Lakes again this year, July 5-13.  I was excited to be a volunteer at last year’s event and was working the court during the Dubois-Tetreault final.  What looked like a comfortable run to the championship for Dubois turned into Tetreault fighting off multiple championship points and coming from behind to win in three dramatic sets.  All with temps approaching 120 degrees on-court!

Check out the tournament blog here and please consider sponsorship or coming by to watch the tournament this year if you live in the area.  I hope to upgrade from volunteer to sponsor myself this year 🙂

Categories: Tennis