What are talking about?
 introduction to Degrafa
 some of the basics
 features & bene ts
 demos
 more demos
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();
graphics.beginFill(#666666,.5);
 ActionScript   graphics.drawCircle(0,0,100);
                graphics.endFill();


      ...
How do you work with it?
  What does it offer?
But, before we do...


Degrafa      Beta 3
degrafa.org
Draw to Anything*



                Surface
Base & Custom Shapes




    SVG
            T
Transforms
         (From multiple registration points.)




Rotate      Scale              Skew             Matrix
Layout


Percent        Constraints

100%
States


Success!            FAIL!
Fills & Strokes

                  </>
Filters


Drop Shadow     Glow    Etc.
Masking
Bindable Properties
Contributions by
      Jim Armstrong
         (aka The Algorithmist)


Splines, Text on a Path and More...
algorithmist.wo...
Demo: Composition
   & Binding
Complex Compositions
Dynamic Graphics
Skinning
Demo: Dynamic Graphics
      & Skinning
More with Less
Repeaters
Derive from other geometry
Demo: Repeaters
Do very complex things
  much more easily.
Decorators
Palettes
    hot/cool
        grey
interpolated
           ...
Stencils
Load From Remote URL


www.myurl.com/Circle.mxml
  www.myurl.com/grass.jpg
Demo: Decorators
Don’t forget, Advanced CSS
Advanced CSS
Demo: Advanced CSS
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...
So what does this mean?
Drawing is easy!
<Surface>

	 <GeometryGroup>

	   	   <Circle radius=quot;100quot;>
	   	   	 <fill>
	   	   	 	 <SolidFi...
Less External Assets
Dynamic Graphics for
         any Situation

 User Interface




                     Complex Designs
Data Visualization
 ...
Thanks!


 degrafa.org
Degrafa Beta 3 - 360|MAX
Upcoming SlideShare
Loading in...5
×

Degrafa Beta 3 - 360|MAX

4,661

Published on

This presentation was given at 360|MAX during the Adobe MAX conference. The presentation outlines new features in Degrafa Beta 3.

Published in: Technology, Art & Photos

Degrafa Beta 3 - 360|MAX

  1. 1. What are talking about? introduction to Degrafa some of the basics features & bene ts demos more demos
  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
  4. 4. Declarative Graphics Framework?
  5. 5. graphics.beginFill(#666666,.5); ActionScript graphics.drawCircle(0,0,100); graphics.endFill();
  6. 6. 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>
  7. 7. How do you work with it? What does it offer?
  8. 8. But, before we do... Degrafa Beta 3
  9. 9. degrafa.org
  10. 10. Draw to Anything* Surface
  11. 11. Base & Custom Shapes SVG T
  12. 12. Transforms (From multiple registration points.) Rotate Scale Skew Matrix
  13. 13. Layout Percent Constraints 100%
  14. 14. States Success! FAIL!
  15. 15. Fills & Strokes </>
  16. 16. Filters Drop Shadow Glow Etc.
  17. 17. Masking
  18. 18. Bindable Properties
  19. 19. Contributions by Jim Armstrong (aka The Algorithmist) Splines, Text on a Path and More... algorithmist.wordpress.com
  20. 20. Demo: Composition & Binding
  21. 21. Complex Compositions
  22. 22. Dynamic Graphics
  23. 23. Skinning
  24. 24. Demo: Dynamic Graphics & Skinning
  25. 25. More with Less
  26. 26. Repeaters
  27. 27. Derive from other geometry
  28. 28. Demo: Repeaters
  29. 29. Do very complex things much more easily.
  30. 30. Decorators
  31. 31. Palettes hot/cool grey interpolated ...
  32. 32. Stencils
  33. 33. Load From Remote URL www.myurl.com/Circle.mxml www.myurl.com/grass.jpg
  34. 34. Demo: Decorators
  35. 35. Don’t forget, Advanced CSS
  36. 36. Advanced CSS
  37. 37. Demo: Advanced CSS
  38. 38. What’s Next?
  39. 39. 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.
  40. 40. So what does this mean?
  41. 41. Drawing is easy! <Surface> <GeometryGroup> <Circle radius=quot;100quot;> <fill> <SolidFill alpha=quot;.5quot; color=quot;#62ABCDquot;/> </fill> </Circle> </GeometryGroup> </Surface>
  42. 42. Less External Assets
  43. 43. Dynamic Graphics for any Situation User Interface Complex Designs Data Visualization Or whatever...
  44. 44. 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.

×