What are we talking about?introduction to Degrafasome of the basicstop 5 featuressamplesfuture stuff?

What is Degrafa?

Degrafa is:a declarative graphics frameworkopen sourcelicensed under MITworks with Flex 2, 3 and Flex 4*community drivenfor designers & developersat version Beta 3.1

DeclarativeGraphics

Framework?

ActionScriptgraphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();

Degrafa MXML

<Circle radius="100"> <fill> <SolidFill color="#666" alpha=".5"/> </fill></Circle>

Geometry

SVG T

Geometry:draw to anything*bindable propertiesbase shapesauto shapessvg path dataraster & vector textcontributions by jim armstrong

Beyond Geometrystates"lls & strokestransformslayoutmasks"ltersextending

Demo: Degrafa Basics

Top 5 Featuresof Degrafa

(debatable)

VectorFill

What’s VectorFill?create a "ll using Degrafa markuptreat it just like a BitmapFillno external assetseasy to make changes

Demo: VectorFill

IGraphicSkin

Button

What’s IGraphicSkin do?create skins for componentsuses the new Degrafa statesskin chartscompletely customize your UI

Demo: IGraphicSkin

Repeaters

What are Repeaters?repeat any geometrymodify any property on each repetitiondo complex things with minimal code

Repeaters are great for:patternsdata visualizationartistic explorationsskinning

Demo: Repeaters

Advanced CSS

Advanced CSSdo much more via CSSgradient backgroundslayer graphicsmultiple backgroundsrounded cornersblends"lters?

Why Advanced CSS?customize your entire UI using just CSSexternal access for designerseasily repurpose complex styles

Demo: Advanced CSS

Decorators

Decoratorsexternally alters geometrypossible because of the Degrafa command stackget to the point-by-point dataeasy way to extend Degrafa without altering the source

Possibilities with Decorators?change angles to curvesdashed linesstart & end capsmultiple & shape bordersa ton of possibilities...group them together!

Demo: Decorators

So what does this mean?

Drawing is easy!<Surface>

<GeometryGroup>

<Circle radius="100"> <fill> <SolidFill alpha=".5" color="#62ABCD"/> </fill> </Circle>

</GeometryGroup>

</Surface>

Less External Assets

Do really complex stuffwith minimal code.

Fine-grained control.

Endless Possibilities?

What’s Next?

What’s Next:feature set is de"nedtime to re"ne and "nish these features"x bugs and optimizeVectorTextText on a Pathunion, punch, join, etc.AutoShapesextenions

degrafa.org

Thanks!