Upload
juan-sanchez
View
12.416
Download
4
Embed Size (px)
DESCRIPTION
Presentation given at Flex Camp Orange County discussing the "Top 5" features of Degrafa.
Citation preview
What are we talking about?introduction to Degrafasome of the basicstop 5 featuressamplesfuture stuff?
What is Degrafa?
Degrafa is:a declarative graphics frameworkopen sourcelicensed under MITworks with Flex 2, 3 and Flex 4*community drivenfor designers & developersat version Beta 3.1
DeclarativeGraphics
Framework?
ActionScriptgraphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();
Degrafa MXML
<Circle radius="100"> <fill> <SolidFill color="#666" alpha=".5"/> </fill></Circle>
Geometry
SVG T
Geometry:draw to anything*bindable propertiesbase shapesauto shapessvg path dataraster & vector textcontributions by jim armstrong
Beyond Geometrystates"lls & strokestransformslayoutmasks"ltersextending
Demo: Degrafa Basics
Top 5 Featuresof Degrafa
(debatable)
VectorFill
What’s VectorFill?create a "ll using Degrafa markuptreat it just like a BitmapFillno external assetseasy to make changes
Demo: VectorFill
IGraphicSkin
Button
What’s IGraphicSkin do?create skins for componentsuses the new Degrafa statesskin chartscompletely customize your UI
Demo: IGraphicSkin
Repeaters
What are Repeaters?repeat any geometrymodify any property on each repetitiondo complex things with minimal code
Repeaters are great for:patternsdata visualizationartistic explorationsskinning
Demo: Repeaters
Advanced CSS
Advanced CSSdo much more via CSSgradient backgroundslayer graphicsmultiple backgroundsrounded cornersblends"lters?
Why Advanced CSS?customize your entire UI using just CSSexternal access for designerseasily repurpose complex styles
Demo: Advanced CSS
Decorators
Decoratorsexternally alters geometrypossible because of the Degrafa command stackget to the point-by-point dataeasy way to extend Degrafa without altering the source
Possibilities with Decorators?change angles to curvesdashed linesstart & end capsmultiple & shape bordersa ton of possibilities...group them together!
Demo: Decorators
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
Do really complex stuffwith minimal code.
Fine-grained control.
Endless Possibilities?
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.AutoShapesextenions
degrafa.org
Thanks!