Birdeye Visualization Flex

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

Monday, May 18, 2009

Who am I?

Who am I?

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Who am I?

Juan Sanchez EffectiveUI

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa: Declarative Graphics Framework

Degrafa Declarative Graphics Framework

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

What is Degrafa?

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

ActionScript

Degrafa MXML

Degrafa Monday, May 18, 2009

graphics.beginFill(#666666,.5); graphics.drawCircle(0,0,100); graphics.endFill();

<SolidFill color="#666" alpha=".5"/>

360|Flex Indianapolis

What is Degrafa?

Licensed under MIT and currently at version 3.1.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

Degrafa is powered by the Flex community.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

You’re not limited to just simple shapes and fills.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

Features

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What is Degrafa?

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

It’s a powerful framework

It’s a powerful framework

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

It’s a powerful framework

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

Real World Examples

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

Rich User Interfaces

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Rich User Interfaces

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Rich User Interfaces

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

Data Visualization

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Data Visualization

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Axiis, BirdEye & Flex Charts

Image via merhl.com

Image via birdeye.googlecode.com Image via Tom Gonzalez

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

Dynamic Graphics

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Dynamic Graphics

Herff-Jones eDesign and Autodesk Project Dragonfly both use the Degrafa engine to support user-generated graphical content.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Herff-Jones eDesign

Image via Herff-Jones eDesign website

Image via Autodesk Project Dragonfly website

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

Games

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Games

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Tetris, Tic-Tac-Toe & Pong

Image via FlexStuff.co.uk

Image via SwitchOnTheCode.com Image via website of Taras Novak

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

Mapping

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Mapping

Using Degrafa for textures, creating maps and things like map markers.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Map Creation, Textures & Markers

Image via website of Taras Novak

Image via website of Mike Huntington

Image via blog.sunild.com

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Real World Examples

And A Lot More...

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What’s Next?

What’s Next?

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What’s Next?

Working towards Degrafa 1.0 and Flex 4

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

What’s Next?

Integration with FXG and other use cases.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

Optimization is a major theme of Degrafa 1.0.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

Degrafa 1.0 Preview

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

Jason Hawryluk and Greg Dove are awesome!

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

Video Fill allows the use of a video as a fill.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

Advanced Curves includes work done by Jim Armstrong, etc.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

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

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

And a lot more...

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Degrafa 1.0 Preview

Degrafa 1.0 Samples

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Going beyond...

Going beyond...

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Going beyond...

Degrafa currently works with Flex 2, 3 and eventually Flex 4.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Going beyond...

Why should the power of Degrafa be limited to Flex?

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Going beyond...

How about Degrafa for Flash?

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Going beyond...

Using markup for drawing graphics makes sense.

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Going beyond...

More interestingly, why just the Flash Player?

Degrafa Monday, May 18, 2009

360|Flex Indianapolis

Thanks! degrafa.org @degrafa

Degrafa Monday, May 18, 2009

360|Flex Indianapolis