Your SlideShare is downloading. ×
Degrafa Top 5 Features
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Degrafa Top 5 Features


Published on

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

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

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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