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: Weblogs: |

About us Chafic Kazoun Founder and CTO Team Macromedia Member Blog ( Ben Stucki Software Engineer Flex Component Developer Blog ( Atellis (

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.

What is Flex?

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

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

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

Example of a Stylized Flex Application

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

What is Skinning? Programmatic Skinning Graphical Skinning

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

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

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

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

Before and After

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.

Where to go from here

About us Session notes will be posted to Ben’s blog. Ben Stucki Blog ( Chafic Kazoun Blog: ( We’re hiring Flex/.NET developers. Contact us if you’re interested.