The Alagad Technical Team Blog

Programmatic Drawing Bean

Published By: Matt LeGrand on Oct 15, 2009 at 11:00 PM
Categories: Flex

Continuing my rant about styles in the Adobe Flex world I'd like to review programmatic drawing of assets. Just for fun I'll be drawing jelly beans. First up I'll take a stab at drawing one with the regular ole drawing api. This may sound odd to our Flex audience but a long long time ago in a land before degrafa or fxg flash developers just drew out lines, squares and jelly beans using the drawing api. The nice thing about being familiar with the drawing api is it will serve you well when you switch over to doing an Action Script only project.

Drawing out a quick Jelly Bean:

package
{
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;
import flash.filters.GlowFilter;


public class JellyBean extends Sprite
{
protected var gloss:Sprite = new Sprite();


public function JellyBean()
{
  super();
  this.filters = [new GlowFilter(0x550000, .5, 25, 25, 2, 1, true), new DropShadowFilter(5, 90, 0x000000, .95, 15, 15, 1, 1)];
  this.addChild(gloss)
  gloss.filters = [new BlurFilter(8, 8)];
  drawBean()
}

protected function drawBean() : void
{
  var g:Graphics = this.graphics;

  g.clear();
  g.lineStyle(2, 0x440000, .25, false, 'normal', null, 'round' );
  g.beginGradientFill(GradientType.RADIAL, [0x880000, 0x550000], [1, 1], [75, 225],  null, 'pad', 'rgb', 0.75);
  g.moveTo(0, 50);
  g.curveTo(0, 75, 50, 75);
  g.curveTo(100, 75, 100, 50);
  g.curveTo(100, 20, 75, 25);
  g.curveTo(50, 35, 25, 25);
  g.curveTo(0, 25, 0, 50);
  g.endFill();

  g = gloss.graphics;
  g.clear();
  g.moveTo(7, 50);
  g.lineStyle(0, 0xFFFFFF, 0)
  g.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [.25,1], [0,255]);
  g.curveTo(8, 30, 25, 30);
  g.curveTo(5, 28, 20,30);
  g.curveTo(8,30, 2, 50);
  g.curveTo(5, 55, 7, 50);

g.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x660000], [.35,.35], [0,255]);
g.drawEllipse(10, 40, 65, 20)
}
}
}

 

If this were a Flex project you might extend the UIComponent and override the updateDisplay function to measure out the size of the bean a little better. It'd also be smart to make this a little more dynamic by adjusting the colors based on a public color value. 

I also wanted to compare drawing out a jelly bean in FXG. I won't post the Catalyst (http://labs.adobe.com/technologies/flashcatalyst/) generated code because it's over 11,000 lines of code. I'm guessing I should have optimized that a little bit. 

Lastly, I don't want to overlook the simplest styling method of just importing an image:
source="@Embed('alagad/jellyBean.png')".  So simple and yet so effective.


1 response to “Programmatic Drawing Bean”

thank you for this tutorial

Posted By: sharedtut on Jan 21, 2010 at 11:52 PM

Leave a Reply