What are talking about?introduction to Degrafasome of the basicsfeatures & bene!tsdemosmore demos

What is Degrafa?

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

DeclarativeGraphics

Framework?

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

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

Degrafa MXML

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

How do you work with it?What does it offer?

But, before we do...

Beta 3Degrafa

degrafa.org

Draw to Anything*

Surface

Base & Custom Shapes

SVG T

Transforms(From multiple registration points.)

Rotate Scale Skew Matrix

Layout

Percent

100%

Constraints

States

Success! FAIL!

Fills & Strokes

</>

Filters

Drop Shadow Glow Etc.

Masking

Bindable Properties

Contributions byJim Armstrong

(aka The Algorithmist)

Splines, Text on a Path and More...

algorithmist.wordpress.com

Demo: Composition& Binding

Complex Compositions

Dynamic Graphics

Skinning

Demo: Dynamic Graphics& Skinning

More with Less

Repeaters

Derive from other geometry

Demo: Repeaters

Do very complex thingsmuch more easily.

Decorators

Palettes

hot/cool grey

interpolated...

Stencils

Load From Remote URL

www.myurl.com/Circle.mxmlwww.myurl.com/grass.jpg

Demo: Decorators

Don’t forget, Advanced CSS

Advanced CSS

Demo: Advanced CSS

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.

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

Dynamic Graphics forany Situation

Complex Designs

User Interface

Data Visualization Or whatever...

degrafa.org

Thanks!