Degrafa : 360|Flex Indianapolis

DegrafaDeclarative Graphics Framework

360|Flex IndianapolisMay 18, 2009

Monday, May 18, 2009

Degrafa 360|Flex Indianapolis

Who am I?

Who am I?



Juan SanchezEffectiveUI

Who am I?



DegrafaDeclarative Graphics Framework

Degrafa: Declarative Graphics Framework



What is Degrafa?

What is Degrafa?



Degrafa is an open source project for Flex 2 & 3 that allows for the creation of graphics via markup.

What is Degrafa?



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?



Licensed under MIT and currently at version 3.1.

What is Degrafa?



Degrafa is powered by the Flex community.

What is Degrafa?



You’re not limited to just simple shapes and "lls.

What is Degrafa?



Features

What is Degrafa?



Just because Degrafa makes drawing graphics easier doesn’t mean you lose the precision and !exibility of doing things programmatically.

What is Degrafa?



It’s a powerful framework




Many companies have already adopted Degrafa to build some really robust Flex applications.




Real World Examples

Real World Examples



Rich User Interfaces

Real World Examples



People are using Degrafa to skin everything from components to entire applications.




Degrafa is about more than user interfaces. It can be used for almost anything graphical.




Data Visualization

Real World Examples



Used in frameworks like Axiis and BirdEye or just to beatify Flex Charting Components.

Data Visualization



Image via merhl.com

Axiis, BirdEye & Flex Charts

Image via birdeye.googlecode.com

Image via Tom Gonzalez



Dynamic Graphics

Real World Examples



Herff-Jones eDesign and Autodesk Project Dragon!y both use the Degrafa engine to supportuser-generated graphical content.

Dynamic Graphics



Herff-Jones eDesign

Image via Herff-Jones eDesign website

Image via Autodesk Project Dragon#y website



Games

Real World Examples



How about Tetris, Tic-Tac-Toe and Pong ?

Games



Tetris, Tic-Tac-Toe & Pong

Image via website of Taras Novak

Image via SwitchOnTheCode.com

Image via FlexStuff.co.uk



Mapping

Real World Examples



Using Degrafa for textures, creating mapsand things like map markers.

Mapping



Image via website of Taras Novak

Map Creation, Textures & Markers

Image via website of Mike Huntington

Image via blog.sunild.com



And A Lot More...

Real World Examples



What’s Next?

What’s Next?



Working towards Degrafa 1.0 and Flex 4

What’s Next?



Integration with FXG and other use cases.

What’s Next?



Optimization is a major theme of Degrafa 1.0.

Degrafa 1.0 Preview



Degrafa 1.0 Preview

Degrafa 1.0 Preview



Jason Hawryluk and Greg Dove are awesome!

Degrafa 1.0 Preview



Decorators wrap geometry and allow for things like dashed lines, end caps, extrude, etc.

Degrafa 1.0 Preview



Video Fill allows the use of a video as a "ll.

Degrafa 1.0 Preview



Raster Image Sequence allows the use of a sequence of images as an animated "ll.

Degrafa 1.0 Preview



Elliptical Arc Advanced extends Elliptical Arc to add additional properties that allow for things like emulating a Conical Fill.

Degrafa 1.0 Preview



Super Shape 2D is an advanced geometry thatallows for thousands of shape variations by specifying a few properties.

Degrafa 1.0 Preview



Advanced Curves includes work done by Jim Armstrong, etc.

Degrafa 1.0 Preview



New transforms like Perspective Transform for manipulating geometry in “perspective”.

Degrafa 1.0 Preview



And a lot more...

Degrafa 1.0 Preview



Degrafa 1.0 Samples

Degrafa 1.0 Preview



Going beyond...

Going beyond...



Degrafa currently works with Flex 2, 3 andeventually Flex 4.

Going beyond...



Why should the power of Degrafa be limited to Flex?

Going beyond...



How about Degrafa for Flash?

Going beyond...



Using markup for drawing graphics makes sense.

Going beyond...



More interestingly, why just the Flash Player?

Going beyond...



Thanks!

degrafa.org@degrafa


Degrafa : 360|Flex Indianapolis

Technology

Transcript of Degrafa : 360|Flex Indianapolis