degrafa beta 3 - 360|max
Post on 22-Nov-2014
7.548 Views
Preview:
DESCRIPTION
TRANSCRIPT
What are talking about?introduction to Degrafasome of the basicsfeatures & bene!tsdemosmore demos
What is Degrafa?
Degrafa is:a declarative graphics frameworkopen sourcelicensed under MITworks with Flex 2, 3 and Flex 4*community drivenfor designers & developers
DeclarativeGraphics
Framework?
ActionScriptgraphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();
ActionScriptgraphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();
Degrafa MXML
<Circle radius="100"> <fill> <SolidFill color="#666" alpha=".5"/> </fill></Circle>
How do you work with it?What does it offer?
But, before we do...
Beta 3Degrafa
degrafa.org
Draw to Anything*
Surface
Base & Custom Shapes
SVG T
Transforms(From multiple registration points.)
Rotate Scale Skew Matrix
Layout
Percent
100%
Constraints
States
Success! FAIL!
Fills & Strokes
</>
Filters
Drop Shadow Glow Etc.
Masking
Bindable Properties
Contributions byJim Armstrong
(aka The Algorithmist)
Splines, Text on a Path and More...
algorithmist.wordpress.com
Demo: Composition& Binding
Complex Compositions
Dynamic Graphics
Skinning
Demo: Dynamic Graphics& Skinning
More with Less
Repeaters
Derive from other geometry
Demo: Repeaters
Do very complex thingsmuch more easily.
Decorators
Palettes
hot/cool grey
interpolated...
Stencils
Load From Remote URL
www.myurl.com/Circle.mxmlwww.myurl.com/grass.jpg
Demo: Decorators
Don’t forget, Advanced CSS
Advanced CSS
Demo: Advanced CSS
What’s Next?
What’s Next:feature set is de!nedtime to re!ne and !nish these features!x bugs and optimizeVectorTextText on a Pathunion, punch, join, etc.
So what does this mean?
Drawing is easy!<Surface>
<GeometryGroup>
<Circle radius="100"> <fill> <SolidFill alpha=".5" color="#62ABCD"/> </fill> </Circle>
</GeometryGroup>
</Surface>
Less External Assets
Dynamic Graphics forany Situation
Complex Designs
User Interface
Data Visualization Or whatever...
degrafa.org
Thanks!
top related