juan sanchez - degrafa declarative graphics framework
DESCRIPTION
Degrafa is a declarative graphics framework for Flex that exposes the power of the Drawing API through MXML markup. Come learn about the latest features for creating graphics in Flex for any occasion, including data visualization, rich user interfaces, mapping, graphics editing and more. An overview of usage, latest features, benefits, use cases and samples will be discussed.TRANSCRIPT
DegrafaDeclarative Graphics Framework
360|Flex IndianapolisMay 18, 2009
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Who am I?
Who am I?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Juan SanchezEffectiveUI
Who am I?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
DegrafaDeclarative Graphics Framework
Degrafa: Declarative Graphics Framework
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
What is Degrafa?
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Degrafa is an open source project for Flex 2 & 3 that allows for the creation of graphics via markup.
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
ActionScriptgraphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();
Degrafa MXML
<Circle radius="100"> <fill> <SolidFill color="#666" alpha=".5"/> </fill></Circle>
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Licensed under MIT and currently at version 3.1.
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Degrafa is powered by the Flex community.
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
You’re not limited to just simple shapes and "lls.
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Features
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Just because Degrafa makes drawing graphics easier doesn’t mean you lose the precision and !exibility of doing things programmatically.
What is Degrafa?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
It’s a powerful framework
It’s a powerful framework
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Many companies have already adopted Degrafa to build some really robust Flex applications.
It’s a powerful framework
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Real World Examples
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Rich User Interfaces
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
People are using Degrafa to skin everything from components to entire applications.
Rich User Interfaces
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Degrafa is about more than user interfaces. It can be used for almost anything graphical.
Rich User Interfaces
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Data Visualization
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Used in frameworks like Axiis and BirdEye or just to beatify Flex Charting Components.
Data Visualization
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Image via merhl.com
Axiis, BirdEye & Flex Charts
Image via birdeye.googlecode.com
Image via Tom Gonzalez
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Dynamic Graphics
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Herff-Jones eDesign and Autodesk Project Dragon!y both use the Degrafa engine to supportuser-generated graphical content.
Dynamic Graphics
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Herff-Jones eDesign
Image via Herff-Jones eDesign website
Image via Autodesk Project Dragon#y website
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Games
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
How about Tetris, Tic-Tac-Toe and Pong ?
Games
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Tetris, Tic-Tac-Toe & Pong
Image via website of Taras Novak
Image via SwitchOnTheCode.com
Image via FlexStuff.co.uk
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Mapping
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Using Degrafa for textures, creating mapsand things like map markers.
Mapping
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Image via website of Taras Novak
Map Creation, Textures & Markers
Image via website of Mike Huntington
Image via blog.sunild.com
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
And A Lot More...
Real World Examples
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
What’s Next?
What’s Next?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Working towards Degrafa 1.0 and Flex 4
What’s Next?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Integration with FXG and other use cases.
What’s Next?
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Optimization is a major theme of Degrafa 1.0.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Degrafa 1.0 Preview
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Jason Hawryluk and Greg Dove are awesome!
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Decorators wrap geometry and allow for things like dashed lines, end caps, extrude, etc.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Video Fill allows the use of a video as a "ll.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Raster Image Sequence allows the use of a sequence of images as an animated "ll.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Elliptical Arc Advanced extends Elliptical Arc to add additional properties that allow for things like emulating a Conical Fill.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Super Shape 2D is an advanced geometry thatallows for thousands of shape variations by specifying a few properties.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Advanced Curves includes work done by Jim Armstrong, etc.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
New transforms like Perspective Transform for manipulating geometry in “perspective”.
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
And a lot more...
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Degrafa 1.0 Samples
Degrafa 1.0 Preview
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Going beyond...
Going beyond...
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Degrafa currently works with Flex 2, 3 andeventually Flex 4.
Going beyond...
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Why should the power of Degrafa be limited to Flex?
Going beyond...
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
How about Degrafa for Flash?
Going beyond...
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Using markup for drawing graphics makes sense.
Going beyond...
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
More interestingly, why just the Flash Player?
Going beyond...
Monday, May 18, 2009
Degrafa 360|Flex Indianapolis
Thanks!
degrafa.org@degrafa
Monday, May 18, 2009