Flash Camp - Degrafa & FXG

Skinning Flex
Degrafa & FXG


James Whittaker
Hello,
Front-end Architect
UX & UI focused
Adobe Community Expert (AIR)

blog: jameswhittaker.com
twitter: @jmwhittaker
@RefreshingApps
Challenges,
Halo - clunky
Non standard tricky CSS syntax
Heavy visuals
Scale 9 limitations
Dive into drawing API


                 “ time for a change captain..”
Degrafa,
Declarative Graphics Framework
Community driven
Open Source (MIT License)
Approaching 1.0 release


http://degrafa.org
What is Degrafa?
Create graphics via MXML
Easier than using drawing API directly
Reduce / eliminate external assets
Very powerful
Retain control & precision
Bindable properties

                  “not just   lls and strokes!   ”
Flash Camp - Degrafa & FXG
How does it work?
You need something to draw onto
Surface - extends UIComponent
or MXML component like:




or advanced CSS using CSSSkin
What can it do?
Draw shapes
 <degrafa:Circle radius="30" />



Fills - solid, gradient, bitmap, blends
 <degrafa:SolidFill color="#FF0000" />



Transformations
 <degrafa:RotateTransform registrationPoint="center" angle="45" />
Simple example,
Draw a red circle on screen:

    	   <degrafa:Surface>
    	   	 <degrafa:fills>
    	   	 	 <degrafa:SolidFill id="redFill" color="#FF0000"/>
    	   	 </degrafa:fills>
    	   	 <degrafa:GeometryGroup>
    	   	 	 <degrafa:Circle radius="50" fill="{redFill}"/>
    	   	 </degrafa:GeometryGroup>
    	   </degrafa:Surface>
De ne,
In CSS we set the skin class:


    .preItem {
    	 borderSkin: ClassReference("skins.PreItemPanel");
    }
Draw skin,
 <?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.degrafa.com/2007">

	   <fills>
	   	    <LinearGradientFill id="prePanelGrey" angle="90">
	   	    	    <GradientStop color="#C4C4C4" ratio="0" alpha="1"/>
	   	    	    <GradientStop color="#EEEEEC" ratio="0.4" alpha="1"/>
	   	    	    <GradientStop color="#E7E7E5" ratio="1" alpha="1"/>
	   	    </LinearGradientFill>
	   </fills>

	   <strokes>
	   	    <LinearGradientStroke id="highlightStroke" angle="90">
	   	    	     <GradientStop color="#FDFDFD" ratio="0" alpha="0.6"/>
	   	    	     <GradientStop color="#FDFDFD" ratio="0.3" alpha="0"/>
	   	    </LinearGradientStroke>
	   </strokes>

	   <geometry>
	   	    <RoundedRectangle fill="{prePanelGrey}" width="{skinWidth}" height="{skinHeight}" cornerRadius="15"/>
	   	    <RoundedRectangle width="{skinWidth-1}"
	   	    	     	   	    	      x="1"
	   	    	     	   	    	      y="1"
	   	    	     	   	    	      height="{skinHeight}"
	   	    	     	   	    	      cornerRadius="15"
	   	    	     	   	    	      stroke="{highlightStroke}"/>
	   </geometry>
Advanced CSS
Multiple backgrounds
More control like detailed gradients
   {
       backgroundColor:"#222222";
       backgroundImage:WALLOFTWEET,FCLOGO, BG;
       backgroundRepeat:no-repeat, no-repeat, repeat;
       backgroundPosition:"100% 100%", "100% 5", "top left";
       borderSkin:ClassReference("com.degrafa.skins.CSSSkin");
       asset-class:ClassReference("assets.EmbeddedAssets");	
   }



   {
   	   backgroundColor:"90deg #F0D834 #EBCA27 #F6EF6B";
   }
Demos,
Going forward,
Axiis - Data visualisation
Birdeye - Visual analytics

Becoming a ‘super set’ to FXG
Union, punch & join
Decouple from Flex - AS version
Fix bugs & optimisation
http://www.axiis.org   http://code.google.com/p/birdeye
Spark & Flex 4




             photo: http://www.flickr.com/photos/martinofranchi/3132140647/sizes/l/
Spark & Flex 4,
New component architecture
Skin separate to behaviour
Extended States model
Metadata key to new architecture
Use of FXG for visual creation
What is FXG?
Declarative graphical tag library
XML based
Primitives, text, transformation
Interchange format - Catalyst & CS
Mirrors FP10 rendering model
Simple example,
Draw a red circle on screen:
	   <s:Graphic>
	   	 <s:Group>
	   	 	 <s:Ellipse width="100" height="100">
	   	 	 	 <s:fill>
	   	 	 	 	 <mx:SolidColor color="#FF0000" />
	   	 	 	 </s:fill>
	   	 	 </s:Ellipse>
	   	 </s:Group>
	   </s:Graphic>
What skin?
Associate component with skin (CSS):
Button {
	 skinClass: ClassReference('spark.skins.default.ButtonSkin")	
}




or inline:

<s:Button skinClass="skins.PreButton" label="Button"/>
New CSS,
Multiple style classes
<s:Button styleName="styleOne styleTwo" label="Button"/>


Descendant selectors:
Panel Button { color:#FF0000; }


Pseudo (states) selectors :
Button:up { color:#FF0000; }
CSS Namespaces,
Watch your namespaces
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

/* Use S namespace for Spark component */
s|Button { skinClass: ClassReference('skins.PreSkin') }

/* Use MX namespace for Halo component */
mx|Label { color:#FF0000; }
Skin parts,
Components identify the
Required or optional skin part elements
States,
Extended from MXML.
Better for skin development
 	   <s:states>
	    	   <s:State name="up"/>
	    	   <s:State name="over"/>
	    	   <s:State name="down"/>	 	
	    </s:states>




<s:GradientEntry color="#858585" color.over="#F7F7F7" ratio="0" alpha="0"/>
HostComponent,
Metadata link to component
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>




To get properties of skin’s host
No code hinting in IDE yet
<SolidColor color="{hostComponent.backgroundColor as uint}" />
Draw skin,
<s:Rect id="mainFill"
	   	    	   top="1"
	   	    	   right="1"
	   	    	   left="1"
	   	    	   bottom="1"
	   	    	   radiusX="15"
	   	    	   radiusY="15">
	   	    <s:fill>
	   	    	   <s:LinearGradient rotation="90">
	   	    	   <s:GradientEntry color="#858585" ratio="0" alpha="0.5" alpha.selectedOver="0.9"/>
	   	    	   <s:GradientEntry color="#858585" ratio="0.4" alpha="0.15" alpha.selectedOver="0.45"/>
	   	    	   <s:GradientEntry color="#858585" ratio="0.8" alpha="0" alpha.selectedOver="0.1"/>
	   	    	   </s:LinearGradient>
	   	    </s:fill>
	   	    <s:stroke>
	   	    	   <s:LinearGradientStroke rotation="90">
	   	    	   	    <s:GradientEntry color="#676767" ratio="0" alpha="1"/>
	   	    	   	    <s:GradientEntry color="#676767" ratio="0.5" alpha="0"/>
	   	    	   </s:LinearGradientStroke>
	   	    </s:stroke>
</s:Rect>
Demo,
Degrafa - Flex 3   FXG - Flex 4
Halo & Spark,
Can co-exist
Use CSS Namespace
Skin Halo by extending SparkSkin
Halo navigators must have Halo
container as child
Round up,
Degrafa
easy to use, renders well,
data visualisation extensions
Not fully integrated, still beta
FXG
Catalyst & CS Suite will aide creation
integrated with FP10
lacking some extra of Degrafa
Homework,
Presentation material and code
http://jameswhittaker.com
Thank you,
Hopefully you’ve learnt a little!
Visit RefreshingApps.com for some AIR!
Come and grab a Moo card opps sorry!
Useful stuff,
Axiis
http://www.axiis.org
Birdeye
http://code.google.com/p/birdeye
Degrafa
http://www.degrafa.org

Flex 4 Developer docs
http://opensource.adobe.com/wiki/display/ exsdk/Developer+Documentation
This presentation is released under Creative Commons Attribution-
               Share Alike 2.0 UK: England & Wales
1 von 35

Recomendados

Degrafa Overview von
Degrafa OverviewDegrafa Overview
Degrafa OverviewBill White
1.1K views17 Folien
Degrafa Top 5 Features von
Degrafa Top 5 FeaturesDegrafa Top 5 Features
Degrafa Top 5 FeaturesJuan Sanchez
1.4K views38 Folien
Tools For Creating Wow Experiences In Flex von
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexPek Pongpaet
1.5K views39 Folien
Degrafa Beta 3 - 360|MAX von
Degrafa Beta 3 - 360|MAXDegrafa Beta 3 - 360|MAX
Degrafa Beta 3 - 360|MAXJuan Sanchez
793 views45 Folien
The Great CALayer Tour von
The Great CALayer TourThe Great CALayer Tour
The Great CALayer TourScott Gardner
1.4K views18 Folien
Visual Experience 360 Flex von
Visual Experience 360 FlexVisual Experience 360 Flex
Visual Experience 360 FlexJuan Sanchez
1.3K views32 Folien

Más contenido relacionado

Similar a Flash Camp - Degrafa & FXG

Presentation html5 css3 by thibaut von
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibautThibaut Baillet
1.4K views20 Folien
CSS3 Takes on the World von
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
1.5K views54 Folien
IconFonts von
IconFontsIconFonts
IconFontsSara Cannon
9.7K views69 Folien
Svcc 2013-d3 von
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3Oswald Campesato
1.2K views44 Folien
SVCC 2013 D3.js Presentation (10/05/2013) von
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
2.1K views44 Folien
Drawing a Circle Three Ways: Generating Graphics for the Web von
Drawing a Circle Three Ways: Generating Graphics for the WebDrawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary
126 views38 Folien

Similar a Flash Camp - Degrafa & FXG(20)

Presentation html5 css3 by thibaut von Thibaut Baillet
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet1.4K views
SVCC 2013 D3.js Presentation (10/05/2013) von Oswald Campesato
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
Oswald Campesato2.1K views
Drawing a Circle Three Ways: Generating Graphics for the Web von Cloudinary
Drawing a Circle Three Ways: Generating Graphics for the WebDrawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the Web
Cloudinary 126 views
I Can't Believe It's Not Flash von Thomas Fuchs
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs25K views
Styling components with JavaScript von bensmithett
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
bensmithett11.2K views
GOTO Berlin - You can use CSS for that von Rachel Andrew
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Rachel Andrew1.3K views
STC Summit 2015 Hypergraphics for visual-first help von Dave Gardiner
STC Summit 2015 Hypergraphics for visual-first helpSTC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first help
Dave Gardiner926 views
@Agawish creating a stunning ui with oracle adf faces, using sass von Amr Gawish
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sass
Amr Gawish2.7K views
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event von Robert Nyman
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman15.1K views
CSS Less framework overview, Pros and Cons von Sanjoy Kr. Paul
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Sanjoy Kr. Paul78 views
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo... von Guillaume Kossi
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Guillaume Kossi1.6K views
Accessible Salesforce von Shannon Hale
Accessible SalesforceAccessible Salesforce
Accessible Salesforce
Shannon Hale2.7K views
QConSP 2015 - Dicas de Performance para Aplicações Web von Fabio Akita
QConSP 2015 - Dicas de Performance para Aplicações WebQConSP 2015 - Dicas de Performance para Aplicações Web
QConSP 2015 - Dicas de Performance para Aplicações Web
Fabio Akita4.1K views
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4 von Erin M. Kidwell
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell799 views

Último

Future of AR - Facebook Presentation von
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentationssuserb54b561
22 views27 Folien
Vertical User Stories von
Vertical User StoriesVertical User Stories
Vertical User StoriesMoisés Armani Ramírez
17 views16 Folien
Kyo - Functional Scala 2023.pdf von
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
418 views92 Folien
Igniting Next Level Productivity with AI-Infused Data Integration Workflows von
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Safe Software
317 views86 Folien
virtual reality.pptx von
virtual reality.pptxvirtual reality.pptx
virtual reality.pptxG036GaikwadSnehal
18 views15 Folien
Microsoft Power Platform.pptx von
Microsoft Power Platform.pptxMicrosoft Power Platform.pptx
Microsoft Power Platform.pptxUni Systems S.M.S.A.
61 views38 Folien

Último(20)

Future of AR - Facebook Presentation von ssuserb54b561
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
ssuserb54b56122 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows von Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software317 views
"Running students' code in isolation. The hard way", Yurii Holiuk von Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays24 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf von Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... von TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc72 views
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe von Simone Puorto
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe
Simone Puorto13 views
"Node.js Development in 2024: trends and tools", Nikita Galkin von Fwdays
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
Fwdays17 views
Business Analyst Series 2023 - Week 3 Session 5 von DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10345 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive von Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive

Flash Camp - Degrafa & FXG

  • 1. Skinning Flex Degrafa & FXG James Whittaker
  • 2. Hello, Front-end Architect UX & UI focused Adobe Community Expert (AIR) blog: jameswhittaker.com twitter: @jmwhittaker
  • 4. Challenges, Halo - clunky Non standard tricky CSS syntax Heavy visuals Scale 9 limitations Dive into drawing API “ time for a change captain..”
  • 5. Degrafa, Declarative Graphics Framework Community driven Open Source (MIT License) Approaching 1.0 release http://degrafa.org
  • 6. What is Degrafa? Create graphics via MXML Easier than using drawing API directly Reduce / eliminate external assets Very powerful Retain control & precision Bindable properties “not just lls and strokes! ”
  • 8. How does it work? You need something to draw onto Surface - extends UIComponent or MXML component like: or advanced CSS using CSSSkin
  • 9. What can it do? Draw shapes <degrafa:Circle radius="30" /> Fills - solid, gradient, bitmap, blends <degrafa:SolidFill color="#FF0000" /> Transformations <degrafa:RotateTransform registrationPoint="center" angle="45" />
  • 10. Simple example, Draw a red circle on screen: <degrafa:Surface> <degrafa:fills> <degrafa:SolidFill id="redFill" color="#FF0000"/> </degrafa:fills> <degrafa:GeometryGroup> <degrafa:Circle radius="50" fill="{redFill}"/> </degrafa:GeometryGroup> </degrafa:Surface>
  • 11. De ne, In CSS we set the skin class: .preItem { borderSkin: ClassReference("skins.PreItemPanel"); }
  • 12. Draw skin, <?xml version="1.0" encoding="utf-8"?> <GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.degrafa.com/2007"> <fills> <LinearGradientFill id="prePanelGrey" angle="90"> <GradientStop color="#C4C4C4" ratio="0" alpha="1"/> <GradientStop color="#EEEEEC" ratio="0.4" alpha="1"/> <GradientStop color="#E7E7E5" ratio="1" alpha="1"/> </LinearGradientFill> </fills> <strokes> <LinearGradientStroke id="highlightStroke" angle="90"> <GradientStop color="#FDFDFD" ratio="0" alpha="0.6"/> <GradientStop color="#FDFDFD" ratio="0.3" alpha="0"/> </LinearGradientStroke> </strokes> <geometry> <RoundedRectangle fill="{prePanelGrey}" width="{skinWidth}" height="{skinHeight}" cornerRadius="15"/> <RoundedRectangle width="{skinWidth-1}" x="1" y="1" height="{skinHeight}" cornerRadius="15" stroke="{highlightStroke}"/> </geometry>
  • 13. Advanced CSS Multiple backgrounds More control like detailed gradients { backgroundColor:"#222222"; backgroundImage:WALLOFTWEET,FCLOGO, BG; backgroundRepeat:no-repeat, no-repeat, repeat; backgroundPosition:"100% 100%", "100% 5", "top left"; borderSkin:ClassReference("com.degrafa.skins.CSSSkin"); asset-class:ClassReference("assets.EmbeddedAssets"); } { backgroundColor:"90deg #F0D834 #EBCA27 #F6EF6B"; }
  • 15. Going forward, Axiis - Data visualisation Birdeye - Visual analytics Becoming a ‘super set’ to FXG Union, punch & join Decouple from Flex - AS version Fix bugs & optimisation
  • 16. http://www.axiis.org http://code.google.com/p/birdeye
  • 17. Spark & Flex 4 photo: http://www.flickr.com/photos/martinofranchi/3132140647/sizes/l/
  • 18. Spark & Flex 4, New component architecture Skin separate to behaviour Extended States model Metadata key to new architecture Use of FXG for visual creation
  • 19. What is FXG? Declarative graphical tag library XML based Primitives, text, transformation Interchange format - Catalyst & CS Mirrors FP10 rendering model
  • 20. Simple example, Draw a red circle on screen: <s:Graphic> <s:Group> <s:Ellipse width="100" height="100"> <s:fill> <mx:SolidColor color="#FF0000" /> </s:fill> </s:Ellipse> </s:Group> </s:Graphic>
  • 21. What skin? Associate component with skin (CSS): Button { skinClass: ClassReference('spark.skins.default.ButtonSkin") } or inline: <s:Button skinClass="skins.PreButton" label="Button"/>
  • 22. New CSS, Multiple style classes <s:Button styleName="styleOne styleTwo" label="Button"/> Descendant selectors: Panel Button { color:#FF0000; } Pseudo (states) selectors : Button:up { color:#FF0000; }
  • 23. CSS Namespaces, Watch your namespaces @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; /* Use S namespace for Spark component */ s|Button { skinClass: ClassReference('skins.PreSkin') } /* Use MX namespace for Halo component */ mx|Label { color:#FF0000; }
  • 24. Skin parts, Components identify the Required or optional skin part elements
  • 25. States, Extended from MXML. Better for skin development <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> </s:states> <s:GradientEntry color="#858585" color.over="#F7F7F7" ratio="0" alpha="0"/>
  • 26. HostComponent, Metadata link to component <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> To get properties of skin’s host No code hinting in IDE yet <SolidColor color="{hostComponent.backgroundColor as uint}" />
  • 27. Draw skin, <s:Rect id="mainFill" top="1" right="1" left="1" bottom="1" radiusX="15" radiusY="15"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="#858585" ratio="0" alpha="0.5" alpha.selectedOver="0.9"/> <s:GradientEntry color="#858585" ratio="0.4" alpha="0.15" alpha.selectedOver="0.45"/> <s:GradientEntry color="#858585" ratio="0.8" alpha="0" alpha.selectedOver="0.1"/> </s:LinearGradient> </s:fill> <s:stroke> <s:LinearGradientStroke rotation="90"> <s:GradientEntry color="#676767" ratio="0" alpha="1"/> <s:GradientEntry color="#676767" ratio="0.5" alpha="0"/> </s:LinearGradientStroke> </s:stroke> </s:Rect>
  • 28. Demo,
  • 29. Degrafa - Flex 3 FXG - Flex 4
  • 30. Halo & Spark, Can co-exist Use CSS Namespace Skin Halo by extending SparkSkin Halo navigators must have Halo container as child
  • 31. Round up, Degrafa easy to use, renders well, data visualisation extensions Not fully integrated, still beta FXG Catalyst & CS Suite will aide creation integrated with FP10 lacking some extra of Degrafa
  • 32. Homework, Presentation material and code http://jameswhittaker.com
  • 33. Thank you, Hopefully you’ve learnt a little! Visit RefreshingApps.com for some AIR! Come and grab a Moo card opps sorry!
  • 34. Useful stuff, Axiis http://www.axiis.org Birdeye http://code.google.com/p/birdeye Degrafa http://www.degrafa.org Flex 4 Developer docs http://opensource.adobe.com/wiki/display/ exsdk/Developer+Documentation
  • 35. This presentation is released under Creative Commons Attribution- Share Alike 2.0 UK: England & Wales