This presentation was given at 360|MAX during the Adobe MAX conference. The presentation outlines new features in Degrafa Beta 3.

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

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

5. Declarative
Graphics
Framework?

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

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

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

9. But, before we do...
Degrafa Beta 3

10. degrafa.org

11. Draw to Anything*
Surface

12. Base & Custom Shapes
SVG
T

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

14. Layout
Percent Constraints
100%

15. States
Success! FAIL!

16. Fills & Strokes
</>

17. Filters
Drop Shadow Glow Etc.

18. Masking

19. Bindable Properties

20. Contributions by
Jim Armstrong
(aka The Algorithmist)
Splines, Text on a Path and More...
algorithmist.wordpress.com

21. Demo: Composition
& Binding

22. Complex Compositions

23. Dynamic Graphics

24. Skinning

25. Demo: Dynamic Graphics
& Skinning

26. More with Less

27. Repeaters

28. Derive from other geometry

29. Demo: Repeaters

30. Do very complex things
much more easily.

31. Decorators

32. Palettes
hot/cool
grey
interpolated
...

33. Stencils

34. Load From Remote URL
www.myurl.com/Circle.mxml
www.myurl.com/grass.jpg

35. Demo: Decorators

36. Don’t forget, Advanced CSS

37. Advanced CSS

38. Demo: Advanced CSS

39. What’s Next?

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

41. So what does this mean?

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

43. Less External Assets

44. Dynamic Graphics for
any Situation
User Interface
Complex Designs
Data Visualization
Or whatever...

45. Thanks!
degrafa.org