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.
Juan Sanchez - Degrafa Declarative Graphics Framework
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