Degrafa is an open source declarative graphics framework for Flex that allows developers and designers to create vector graphics and skins using XML markup. It provides features like vector fills, repeaters, advanced CSS support, and decorators that allow graphics to be extended without modifying source code. Degrafa aims to make drawing graphics easy with minimal code while providing fine-grained control and endless customization possibilities.

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

3. What is Degrafa?

4. 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

5. Declarative
Graphics
Framework?

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

7. Geometry
T
SVG

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

9. Beyond Geometry
states
lls & strokes
transforms
layout
masks
lters
extending

10. Demo: Degrafa Basics

11. Top 5 Features
of Degrafa
(debatable)

12. VectorFill

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

14. Demo: VectorFill

15. IGraphicSkin
Button

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

17. Demo: IGraphicSkin

18. Repeaters

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

20. Repeaters are great for:
patterns
data visualization
artistic explorations
skinning

21. Demo: Repeaters

22. Advanced CSS

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

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

25. Demo: Advanced CSS

26. Decorators

27. 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

28. Possibilities with Decorators?
change angles to curves
dashed lines
start & end caps
multiple & shape borders
a ton of possibilities...
group them together!

29. Demo: Decorators

30. So what does this mean?

31. Drawing is easy!
<Surface>
<GeometryGroup>
<Circle radius=quot;100quot;>
<fill>
<SolidFill alpha=quot;.5quot; color=quot;#62ABCDquot;/>
</fill>
</Circle>
</GeometryGroup>
</Surface>

32. Less External Assets

33. Do really complex stuff
with minimal code.

34. Fine-grained control.

35. Endless Possibilities?

36. What’s Next?

37. 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

38. Thanks!
degrafa.org