Your SlideShare is downloading. ×
0
What are we talking about?
 introduction to Degrafa
 some of the basics
 top 5 features
 samples
 future stuff?
What is Degrafa?
Degrafa is:
 a declarative graphics framework
 open source
 licensed under MIT
 works with Flex 2, 3 and Flex 4*
 communit...
Declarative
  Graphics
Framework?
graphics.beginFill(#666666,.5);
 ActionScript   graphics.drawCircle(0,0,100);
                graphics.endFill();


      ...
Geometry


           T
SVG
Geometry:
 draw to anything*
 bindable properties
 base shapes
 auto shapes
 svg path data
 raster & vector text
 contribu...
Beyond Geometry
 states
   lls & strokes
 transforms
 layout
 masks
   lters
 extending
Demo: Degrafa Basics
Top 5 Features
  of Degrafa
     (debatable)
VectorFill
What’s VectorFill?
 create a ll using Degrafa markup
 treat it just like a BitmapFill
 no external assets
 easy to make ch...
Demo: VectorFill
IGraphicSkin


   Button
What’s IGraphicSkin do?
 create skins for components
 uses the new Degrafa states
 skin charts
 completely customize your ...
Demo: IGraphicSkin
Repeaters
What are Repeaters?
 repeat any geometry
 modify any property on each repetition
 do complex things with minimal code
Repeaters are great for:
 patterns
 data visualization
 artistic explorations
 skinning
Demo: Repeaters
Advanced CSS
Advanced CSS
 do much more via CSS
 gradient backgrounds
 layer graphics
 multiple backgrounds
 rounded corners
 blends
  ...
Why Advanced CSS?
 customize your entire UI using just CSS
 external access for designers
 easily repurpose complex styles
Demo: Advanced CSS
Decorators
Decorators
 externally alters geometry
 possible because of the Degrafa
 command stack
 get to the point-by-point data
 ea...
Possibilities with Decorators?
 change angles to curves
 dashed lines
 start & end caps
 multiple & shape borders
 a ton o...
Demo: Decorators
So what does this mean?
Drawing is easy!
<Surface>

	 <GeometryGroup>

	   	   <Circle radius=quot;100quot;>
	   	   	 <fill>
	   	   	 	 <SolidFi...
Less External Assets
Do really complex stuff
 with minimal code.
Fine-grained control.
Endless Possibilities?
What’s Next?
What’s Next:
 feature set is de ned
 time to re ne and nish these features
   x bugs and optimize
 VectorText
 Text on a P...
Thanks!


 degrafa.org
Degrafa Top 5 Features
Upcoming SlideShare
Loading in...5
×

Degrafa Top 5 Features

7,957

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
7,957
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

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

×