1. Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and CTO Ben Stucki, Software Engineer Atellis: http://www.atellis.comhttp://www.atellis.com Weblogs: http://www.rewindlife.com | http://www.benstucki.nethttp://www.rewindlife.comhttp://www.benstucki.net

2. About us Chafic Kazoun Founder and CTO Team Macromedia Member Email (chafic@rewindlife.com) Blog (http://www.rewindlife.com) Ben Stucki Software Engineer Flex Component Developer Email (mail@benstucki.net) Blog (http://www.benstucki.net) Atellis (http://www.atellis.com)

3. What We Will Cover Why is Flash Important? What’s Flex? Why Integrate Flex and Flash? Using CSS in Flex Using Flash Content in Flex Tips to Improve Workflow Our goal is to give you a starting point for applying Flash content to Flex applications.

4. What is Flex?

5. Flex Runtime is Flash Player Flex provides a framework for developing applications that run in Flash Player Flex SDK is free. No server required. Same Runtime (Flash Player 9) Same File Format (SWF) SWF Flex Compiler AS3MXML Flash AuthoringFlex Builder (and SDK) AS2 Flash Compiler LibraryCSS

6. Flex Builder Is Not Flash Authoring Flash AuthoringFlex Development  Lasso Tool  Rectangle Tool  Paint Bucket Tool Border Style  Corner Radius  BG Color 

7. Why Integrate Flex and Flash? Flex applications all look the same

8. Example of a Stylized Flex Application

9. Flex for Designers Flex is Component Based (Don’t Panic!)  To Design a Flex Application you need to modify the look of Flex components using CSS, Programmatic Skins, Graphical Skins, and Filters FromTo

10. What is Skinning? Programmatic Skinning Graphical Skinning

11. Using CSS in Flex Flex CSS can apply styles by Component or Class. Component { color: #FFFFFF; }.Class { background-color: #000000; }

12. CSS and Typography you could try something like Edwardian. Instead of using Arial, @font-face { src: url(“century_gothic_embed.swf”); fontFamily: "Century Gothic"; } @font-face { src: url(“Edwardian Script ITC.ttf”); font-family: “Edwardian”; } Component { font-family: “Edwardian”; }

13. Embedding Graphics Finally, the good stuff. Application { background-image: "assets/scary_woods.jpg"; }

14. Embedding Flash Library Content Flex CSS lets you access Flash library symbols individually. MovieOption { background-image: Embed(source="assets/library.swf", symbol="MovieOption_skin"); }

15. Before and After

16. Flash Workflow Developers and Designers need to work together to create the initial layout. You can still create a mockup in flash, or a graphics editing tool. Organize your library, developers like that. Symbols are going to be used individually to skin components.

17. Where to go from here http://www.adobe.com/devnet/flex/articles/flex_skins.html

18. About us Session notes will be posted to Ben’s blog. Ben Stucki Blog (http://www.benstucki.net)http://www.benstucki.net Email (mail@benstucki.net)mail@benstucki.net Chafic Kazoun Blog: (http://www.rewindlife.com)http://www.rewindlife.com Email: (chafic@rewindlife.com) We’re hiring Flex/.NET developers. Contact us if you’re interested.