What are we talking about?
introduction to Degrafa
some of the basics
top 5 features
samples
future stuff?

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
at version Beta 3.1

Declarative
Graphics
Framework?

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>

Geometry
T
SVG

Geometry:
draw to anything*
bindable properties
base shapes
auto shapes
svg path data
raster & vector text
contributions by jim armstrong

Beyond Geometry
states
lls & strokes
transforms
layout
masks
lters
extending

Demo: Degrafa Basics

Top 5 Features
of Degrafa
(debatable)

VectorFill

What’s VectorFill?
create a ll using Degrafa markup
treat it just like a BitmapFill
no external assets
easy to make changes

Demo: VectorFill

IGraphicSkin
Button

What’s IGraphicSkin do?
create skins for components
uses the new Degrafa states
skin charts
completely customize your UI

Demo: IGraphicSkin

Repeaters

What are Repeaters?
repeat any geometry
modify any property on each repetition
do complex things with minimal code

Repeaters are great for:
patterns
data visualization
artistic explorations
skinning

Demo: Repeaters

Advanced CSS

Advanced CSS
do much more via CSS
gradient backgrounds
layer graphics
multiple backgrounds
rounded corners
blends
lters?

Why Advanced CSS?
customize your entire UI using just CSS
external access for designers
easily repurpose complex styles

Demo: Advanced CSS

Decorators

Decorators
externally alters geometry
possible because of the Degrafa
command stack
get to the point-by-point data
easy way to extend Degrafa without
altering the source

Possibilities with Decorators?
change angles to curves
dashed lines
start & end caps
multiple & shape borders
a 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 stuff
with minimal code.

Fine-grained control.

Endless Possibilities?

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.
AutoShapes
extenions

Thanks!
degrafa.org