flash and flex can hold hands techniques for integrating flash content and flex applications fitc -...
TRANSCRIPT
Flash and Flex Can Hold HandsTechniques for Integrating Flash Content and Flex ApplicationsFiTC - HollywoodOctober 5, 2006
Chafic Kazoun, Founder and CTOBen Stucki, Software EngineerAtellis: http://www.atellis.comWeblogs: http://www.rewindlife.com | http://www.benstucki.net
About us
Chafic Kazoun
Founder and CTO
Team Macromedia Member
Email ([email protected])
Blog (http://www.rewindlife.com)
Ben Stucki
Software Engineer
Flex Component Developer
Email ([email protected])
Blog (http://www.benstucki.net)
Atellis (http://www.atellis.com)
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
AS3 MXML
Flash Authoring Flex Builder (and SDK)
AS2
Flash Compiler
Library CSS
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
From To
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 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”;
}
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
http://www.adobe.com/devnet/flex/articles/flex_skins.html
About us
Session notes will be posted to Ben’s blog.
Ben Stucki
Blog (http://www.benstucki.net)
Email ([email protected])
Chafic Kazoun
Blog: (http://www.rewindlife.com)
Email: ([email protected])
We’re hiring Flex/.NET developers. Contact us if you’re interested.