Degrafa
                       Declarative Graphics Framework

                       360|Flex Indianapolis
              ...
Who am I?




                       Who am I?




   Degrafa                         360|Flex Indianapolis

Monday, May 1...
Who am I?




                       Juan Sanchez
                       EffectiveUI




   Degrafa                        ...
Degrafa: Declarative Graphics Framework




                       Degrafa
                       Declarative Graphics Fra...
What is Degrafa?




                       What is Degrafa?




   Degrafa                                360|Flex Indian...
What is Degrafa?




                       Degrafa is an open source project for Flex 2 & 3 that
                       a...
What is Degrafa?




                                  graphics.beginFill(#666666,.5);
                   ActionScript   g...
What is Degrafa?




                       Licensed under MIT and currently at version 3.1.




   Degrafa               ...
What is Degrafa?




                       Degrafa is powered by the Flex community.




   Degrafa                      ...
What is Degrafa?




                       You’re not limited to just simple shapes and lls.




   Degrafa              ...
What is Degrafa?




                       Features




   Degrafa                        360|Flex Indianapolis

Monday, ...
What is Degrafa?




                       Just because Degrafa makes drawing graphics easier
                       does...
It’s a powerful framework




                       It’s a powerful framework




   Degrafa                             ...
It’s a powerful framework




                       Many companies have already adopted Degrafa to
                      ...
Real World Examples




                       Real World Examples




   Degrafa                                   360|Fl...
Real World Examples




                       Rich User Interfaces




   Degrafa                                    360|...
Rich User Interfaces




                       People are using Degrafa to skin everything from
                       co...
Rich User Interfaces




                       Degrafa is about more than user interfaces. It can be
                    ...
Real World Examples




                       Data Visualization




   Degrafa                                  360|Flex...
Data Visualization




                        Used in frameworks like Axiis and BirdEye or just to
                      ...
Axiis, BirdEye & Flex Charts




                                                                     Image via merhl.com
...
Real World Examples




                       Dynamic Graphics




   Degrafa                                360|Flex Ind...
Dynamic Graphics




                       Herff-Jones eDesign and Autodesk Project Dragon y
                       both u...
Herff-Jones eDesign




       Image via Herff-Jones eDesign website



                                              Image ...
Real World Examples




                       Games




   Degrafa                     360|Flex Indianapolis

Monday, May...
Games




                       How about Tetris, Tic-Tac-Toe and Pong ?




   Degrafa                                  ...
Tetris, Tic-Tac-Toe & Pong




                                                                                Image via F...
Real World Examples




                       Mapping




   Degrafa                       360|Flex Indianapolis

Monday,...
Mapping




                       Using Degrafa for textures, creating maps
                       and things like map ma...
Map Creation, Textures & Markers




                                                                                     ...
Real World Examples




                       And A Lot More...




   Degrafa                                 360|Flex I...
What’s Next?




                       What’s Next?




   Degrafa                            360|Flex Indianapolis

Mond...
What’s Next?




                       Working towards Degrafa 1.0 and Flex 4




   Degrafa                             ...
What’s Next?




                       Integration with FXG and other use cases.




   Degrafa                          ...
Degrafa 1.0 Preview




                       Optimization is a major theme of Degrafa 1.0.




   Degrafa               ...
Degrafa 1.0 Preview




                       Degrafa 1.0 Preview




   Degrafa                                   360|Fl...
Degrafa 1.0 Preview




                       Jason Hawryluk and Greg Dove are awesome!




   Degrafa                   ...
Degrafa 1.0 Preview




                       Decorators wrap geometry and allow for things like
                       d...
Degrafa 1.0 Preview




                       Video Fill allows the use of a video as a ll.




   Degrafa               ...
Degrafa 1.0 Preview




                       Raster Image Sequence allows the use of a sequence
                       o...
Degrafa 1.0 Preview




                       Elliptical Arc Advanced extends Elliptical Arc to add
                     ...
Degrafa 1.0 Preview




                       Super Shape 2D is an advanced geometry that
                       allows f...
Degrafa 1.0 Preview




                       Advanced Curves includes work done by Jim
                       Armstrong,...
Degrafa 1.0 Preview




                       New transforms like Perspective Transform for
                       manipu...
Degrafa 1.0 Preview




                       And a lot more...




   Degrafa                                 360|Flex I...
Degrafa 1.0 Preview




                       Degrafa 1.0 Samples




   Degrafa                                   360|Fl...
Going beyond...




                       Going beyond...




   Degrafa                               360|Flex Indianapo...
Going beyond...




                       Degrafa currently works with Flex 2, 3 and
                       eventually Fl...
Going beyond...




                       Why should the power of Degrafa be limited to Flex?




   Degrafa             ...
Going beyond...




                       How about Degrafa for Flash?




   Degrafa                                    ...
Going beyond...




                       Using markup for drawing graphics makes sense.




   Degrafa                  ...
Going beyond...




                       More interestingly, why just the Flash Player?




   Degrafa                  ...
Thanks!

                       degrafa.org
                       @degrafa



   Degrafa                           360|Fl...
Upcoming SlideShare
Loading in...5
×

Degrafa : 360|Flex Indianapolis

6,552

Published on

These are the sides from 360|Flex Indianapolis.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,552
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
62
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Degrafa : 360|Flex Indianapolis

  1. 1. Degrafa Declarative Graphics Framework 360|Flex Indianapolis May 18, 2009 Monday, May 18, 2009
  2. 2. Who am I? Who am I? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  3. 3. Who am I? Juan Sanchez EffectiveUI Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  4. 4. Degrafa: Declarative Graphics Framework Degrafa Declarative Graphics Framework Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  5. 5. What is Degrafa? What is Degrafa? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  6. 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. 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. 8. What is Degrafa? Licensed under MIT and currently at version 3.1. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  9. 9. What is Degrafa? Degrafa is powered by the Flex community. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  10. 10. What is Degrafa? You’re not limited to just simple shapes and lls. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  11. 11. What is Degrafa? Features Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  12. 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. 13. It’s a powerful framework It’s a powerful framework Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  14. 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. 15. Real World Examples Real World Examples Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  16. 16. Real World Examples Rich User Interfaces Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  17. 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. 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. 19. Real World Examples Data Visualization Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  20. 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. 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. 22. Real World Examples Dynamic Graphics Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  23. 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. 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. 25. Real World Examples Games Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  26. 26. Games How about Tetris, Tic-Tac-Toe and Pong ? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  27. 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. 28. Real World Examples Mapping Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  29. 29. Mapping Using Degrafa for textures, creating maps and things like map markers. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  30. 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. 31. Real World Examples And A Lot More... Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  32. 32. What’s Next? What’s Next? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  33. 33. What’s Next? Working towards Degrafa 1.0 and Flex 4 Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  34. 34. What’s Next? Integration with FXG and other use cases. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  35. 35. Degrafa 1.0 Preview Optimization is a major theme of Degrafa 1.0. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  36. 36. Degrafa 1.0 Preview Degrafa 1.0 Preview Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  37. 37. Degrafa 1.0 Preview Jason Hawryluk and Greg Dove are awesome! Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  38. 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. 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. 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. 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. 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. 43. Degrafa 1.0 Preview Advanced Curves includes work done by Jim Armstrong, etc. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  44. 44. Degrafa 1.0 Preview New transforms like Perspective Transform for manipulating geometry in “perspective”. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  45. 45. Degrafa 1.0 Preview And a lot more... Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  46. 46. Degrafa 1.0 Preview Degrafa 1.0 Samples Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  47. 47. Going beyond... Going beyond... Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  48. 48. Going beyond... Degrafa currently works with Flex 2, 3 and eventually Flex 4. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  49. 49. Going beyond... Why should the power of Degrafa be limited to Flex? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  50. 50. Going beyond... How about Degrafa for Flash? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  51. 51. Going beyond... Using markup for drawing graphics makes sense. Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  52. 52. Going beyond... More interestingly, why just the Flash Player? Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  53. 53. Thanks! degrafa.org @degrafa Degrafa 360|Flex Indianapolis Monday, May 18, 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×