Degrafa is a declarative graphics framework for Flex that exposes the power of the Drawing API through MXML markup. Come learn about the latest features for creating graphics in Flex for any occasion, including data visualization, rich user interfaces, mapping, graphics editing and more. An overview of usage, latest features, benefits, use cases and samples will be discussed.

1. Degrafa
Declarative Graphics Framework
360|Flex Indianapolis
May 18, 2009
Monday, May 18, 2009

2. Who am I?
Who am I?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

3. Who am I?
Juan Sanchez
EffectiveUI
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

4. Degrafa: Declarative Graphics Framework
Degrafa
Declarative Graphics Framework
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

5. What is Degrafa?
What is Degrafa?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

6. What is Degrafa?
Degrafa is an open source project for Flex 2 & 3 that
allows for the creation of graphics via markup.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

7. What is Degrafa?
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>
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

8. What is Degrafa?
Licensed under MIT and currently at version 3.1.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

9. What is Degrafa?
Degrafa is powered by the Flex community.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

10. What is Degrafa?
You’re not limited to just simple shapes and lls.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

11. What is Degrafa?
Features
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

12. What is Degrafa?
Just because Degrafa makes drawing graphics easier
doesn’t mean you lose the precision and exibility of
doing things programmatically.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

13. It’s a powerful framework
It’s a powerful framework
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

14. It’s a powerful framework
Many companies have already adopted Degrafa to
build some really robust Flex applications.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

15. Real World Examples
Real World Examples
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

16. Real World Examples
Rich User Interfaces
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

17. Rich User Interfaces
People are using Degrafa to skin everything from
components to entire applications.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

18. Rich User Interfaces
Degrafa is about more than user interfaces. It can be
used for almost anything graphical.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

19. Real World Examples
Data Visualization
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

20. Data Visualization
Used in frameworks like Axiis and BirdEye or just to
beatify Flex Charting Components.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

21. Axiis, BirdEye & Flex Charts
Image via merhl.com
Image via birdeye.googlecode.com
Image via Tom Gonzalez
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

22. Real World Examples
Dynamic Graphics
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

23. Dynamic Graphics
Herff-Jones eDesign and Autodesk Project Dragon y
both use the Degrafa engine to support
user-generated graphical content.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

24. Herff-Jones eDesign
Image via Herff-Jones eDesign website
Image via Autodesk Project Dragon y website
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

25. Real World Examples
Games
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

26. Games
How about Tetris, Tic-Tac-Toe and Pong ?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

27. Tetris, Tic-Tac-Toe & Pong
Image via FlexStuff.co.uk
Image via SwitchOnTheCode.com
Image via website of Taras Novak
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

28. Real World Examples
Mapping
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

29. Mapping
Using Degrafa for textures, creating maps
and things like map markers.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

30. Map Creation, Textures & Markers
Image via website of Taras Novak
Image via website of Mike Huntington
Image via blog.sunild.com
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

31. Real World Examples
And A Lot More...
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

32. What’s Next?
What’s Next?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

33. What’s Next?
Working towards Degrafa 1.0 and Flex 4
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

34. What’s Next?
Integration with FXG and other use cases.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

35. Degrafa 1.0 Preview
Optimization is a major theme of Degrafa 1.0.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

36. Degrafa 1.0 Preview
Degrafa 1.0 Preview
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

37. Degrafa 1.0 Preview
Jason Hawryluk and Greg Dove are awesome!
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

38. Degrafa 1.0 Preview
Decorators wrap geometry and allow for things like
dashed lines, end caps, extrude, etc.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

39. Degrafa 1.0 Preview
Video Fill allows the use of a video as a ll.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

40. Degrafa 1.0 Preview
Raster Image Sequence allows the use of a sequence
of images as an animated ll.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

41. Degrafa 1.0 Preview
Elliptical Arc Advanced extends Elliptical Arc to add
additional properties that allow for things like
emulating a Conical Fill.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

42. Degrafa 1.0 Preview
Super Shape 2D is an advanced geometry that
allows for thousands of shape variations by specifying
a few properties.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

43. Degrafa 1.0 Preview
Advanced Curves includes work done by Jim
Armstrong, etc.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

44. Degrafa 1.0 Preview
New transforms like Perspective Transform for
manipulating geometry in “perspective”.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

45. Degrafa 1.0 Preview
And a lot more...
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

46. Degrafa 1.0 Preview
Degrafa 1.0 Samples
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

47. Going beyond...
Going beyond...
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

48. Going beyond...
Degrafa currently works with Flex 2, 3 and
eventually Flex 4.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

49. Going beyond...
Why should the power of Degrafa be limited to Flex?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

50. Going beyond...
How about Degrafa for Flash?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

51. Going beyond...
Using markup for drawing graphics makes sense.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

52. Going beyond...
More interestingly, why just the Flash Player?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

53. Thanks!
degrafa.org
@degrafa
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009