Can Flex and Flash Get Along by CoolPresentations

VIEWS: 248 PAGES: 18

									Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications

Chafic Kazoun, Founder and CTO Ben Stucki, Software Engineer Atellis: Weblogs: |

About us

Chafic Kazoun Founder and CTO Team Macromedia Member Email ( Blog (

Ben Stucki Software Engineer Flex Component Developer Email ( 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)

Flash Authoring Library AS2

Flex Builder (and SDK) AS3 MXML CSS

Flash Compiler

Flex Compiler


Flex Builder Is Not Flash Authoring

Flash Authoring

Flex 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



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

Instead of using Arial,

you could try something like Edwardian.
@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”; }

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 ( Email ( Chafic Kazoun Blog: ( Email: (

We’re hiring Flex/.NET developers. Contact us if you’re interested.

To top