DougHughes.net

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.