Juan Sanchez - Degrafa Declarative Graphics Framework
Post on 13-Jan-2015
1076 Views
Preview:
DESCRIPTION
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
top related