Degrafa
Declarative Graphics Framework
360|Flex Indianapolis
May 18, 2009
Monday, May 18, 2009

Who am I?
Who am I?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Who am I?
Juan Sanchez
EffectiveUI
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa: Declarative Graphics Framework
Degrafa
Declarative Graphics Framework
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
What is Degrafa?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
Degrafa is an open source project for Flex 2 & 3 that
allows for the creation of graphics via markup.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
graphics.beginFill(#666666,.5);
ActionScript graphics.drawCircle(0,0,100);
graphics.endFill();
<Circle radius=\"100\">
<fill>
<SolidFill
Degrafa MXML color=\"#666\"
alpha=\".5\"/>
</fill>
</Circle>
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
Licensed under MIT and currently at version 3.1.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
Degrafa is powered by the Flex community.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
You’re not limited to just simple shapes and lls.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
Features
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What is Degrafa?
Just because Degrafa makes drawing graphics easier
doesn’t mean you lose the precision and exibility of
doing things programmatically.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

It’s a powerful framework
It’s a powerful framework
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

It’s a powerful framework
Many companies have already adopted Degrafa to
build some really robust Flex applications.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
Real World Examples
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
Rich User Interfaces
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Rich User Interfaces
People are using Degrafa to skin everything from
components to entire applications.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Rich User Interfaces
Degrafa is about more than user interfaces. It can be
used for almost anything graphical.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
Data Visualization
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Data Visualization
Used in frameworks like Axiis and BirdEye or just to
beatify Flex Charting Components.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Axiis, BirdEye & Flex Charts
Image via merhl.com
Image via birdeye.googlecode.com
Image via Tom Gonzalez
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
Dynamic Graphics
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Dynamic Graphics
Herff-Jones eDesign and Autodesk Project Dragon y
both use the Degrafa engine to support
user-generated graphical content.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Herff-Jones eDesign
Image via Herff-Jones eDesign website
Image via Autodesk Project Dragon y website
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
Games
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Games
How about Tetris, Tic-Tac-Toe and Pong ?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Tetris, Tic-Tac-Toe & Pong
Image via FlexStuff.co.uk
Image via SwitchOnTheCode.com
Image via website of Taras Novak
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
Mapping
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Mapping
Using Degrafa for textures, creating maps
and things like map markers.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Map Creation, Textures & Markers
Image via website of Taras Novak
Image via website of Mike Huntington
Image via blog.sunild.com
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Real World Examples
And A Lot More...
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What’s Next?
What’s Next?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What’s Next?
Working towards Degrafa 1.0 and Flex 4
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

What’s Next?
Integration with FXG and other use cases.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Optimization is a major theme of Degrafa 1.0.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Degrafa 1.0 Preview
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Jason Hawryluk and Greg Dove are awesome!
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Decorators wrap geometry and allow for things like
dashed lines, end caps, extrude, etc.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Video Fill allows the use of a video as a ll.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Raster Image Sequence allows the use of a sequence
of images as an animated ll.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Elliptical Arc Advanced extends Elliptical Arc to add
additional properties that allow for things like
emulating a Conical Fill.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Super Shape 2D is an advanced geometry that
allows for thousands of shape variations by specifying
a few properties.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Advanced Curves includes work done by Jim
Armstrong, etc.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
New transforms like Perspective Transform for
manipulating geometry in “perspective”.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
And a lot more...
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Degrafa 1.0 Preview
Degrafa 1.0 Samples
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Going beyond...
Going beyond...
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Going beyond...
Degrafa currently works with Flex 2, 3 and
eventually Flex 4.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Going beyond...
Why should the power of Degrafa be limited to Flex?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Going beyond...
How about Degrafa for Flash?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Going beyond...
Using markup for drawing graphics makes sense.
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Going beyond...
More interestingly, why just the Flash Player?
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009

Thanks!
degrafa.org
@degrafa
Degrafa 360|Flex Indianapolis
Monday, May 18, 2009