Degrafa Top 5 Features

8,299 views
8,205 views

Published on

Presentation given at Flex Camp Orange County discussing the "Top 5" features of Degrafa.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,299
On SlideShare
0
From Embeds
0
Number of Embeds
5,476
Actions
Shares
0
Downloads
57
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Degrafa Top 5 Features

  1. 1. What are we talking about? introduction to Degrafa some of the basics top 5 features samples future stuff?
  2. 2. What is Degrafa?
  3. 3. 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
  4. 4. Declarative Graphics Framework?
  5. 5. 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>
  6. 6. Geometry T SVG
  7. 7. Geometry: draw to anything* bindable properties base shapes auto shapes svg path data raster & vector text contributions by jim armstrong
  8. 8. Beyond Geometry states lls & strokes transforms layout masks lters extending
  9. 9. Demo: Degrafa Basics
  10. 10. Top 5 Features of Degrafa (debatable)
  11. 11. VectorFill
  12. 12. What’s VectorFill? create a ll using Degrafa markup treat it just like a BitmapFill no external assets easy to make changes
  13. 13. Demo: VectorFill
  14. 14. IGraphicSkin Button
  15. 15. What’s IGraphicSkin do? create skins for components uses the new Degrafa states skin charts completely customize your UI
  16. 16. Demo: IGraphicSkin
  17. 17. Repeaters
  18. 18. What are Repeaters? repeat any geometry modify any property on each repetition do complex things with minimal code
  19. 19. Repeaters are great for: patterns data visualization artistic explorations skinning
  20. 20. Demo: Repeaters
  21. 21. Advanced CSS
  22. 22. Advanced CSS do much more via CSS gradient backgrounds layer graphics multiple backgrounds rounded corners blends lters?
  23. 23. Why Advanced CSS? customize your entire UI using just CSS external access for designers easily repurpose complex styles
  24. 24. Demo: Advanced CSS
  25. 25. Decorators
  26. 26. 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
  27. 27. Possibilities with Decorators? change angles to curves dashed lines start & end caps multiple & shape borders a ton of possibilities... group them together!
  28. 28. Demo: Decorators
  29. 29. So what does this mean?
  30. 30. Drawing is easy! <Surface> <GeometryGroup> <Circle radius=quot;100quot;> <fill> <SolidFill alpha=quot;.5quot; color=quot;#62ABCDquot;/> </fill> </Circle> </GeometryGroup> </Surface>
  31. 31. Less External Assets
  32. 32. Do really complex stuff with minimal code.
  33. 33. Fine-grained control.
  34. 34. Endless Possibilities?
  35. 35. What’s Next?
  36. 36. 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
  37. 37. Thanks! degrafa.org

×