What are talking about?
introduction to Degrafa
some of the basics
features & bene ts
demos
more demos

What is Degrafa?

Degrafa is:
a declarative graphics framework
open source
licensed under MIT
works with Flex 2, 3 and Flex 4*
community driven
for designers & developers

Declarative
Graphics
Framework?

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

graphics.beginFill(#666666,.5);
ActionScript graphics.drawCircle(0,0,100);
graphics.endFill();
<Circle radius=\"100\">
<fill>
<SolidFill
Degrafa MXML color=\"#666\"
alpha=\".5\"/>
</fill>
</Circle>

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

But, before we do...
Degrafa Beta 3

degrafa.org

Draw to Anything*
Surface

Base & Custom Shapes
SVG
T

Transforms
(From multiple registration points.)
Rotate Scale Skew Matrix

Layout
Percent Constraints
100%

States
Success! FAIL!

Fills & Strokes
</>

Filters
Drop Shadow Glow Etc.

Masking

Bindable Properties

Contributions by
Jim 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 things
much more easily.

Decorators

Palettes
hot/cool
grey
interpolated
...

Stencils

Load From Remote URL
www.myurl.com/Circle.mxml
www.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 ned
time to re ne and nish these features
x bugs and optimize
VectorText
Text on a Path
union, 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 for
any Situation
User Interface
Complex Designs
Data Visualization
Or whatever...

Thanks!
degrafa.org