flash and flex can hold hands techniques for integrating flash content and flex applications fitc -...
TRANSCRIPT
![Page 1: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/1.jpg)
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
![Page 2: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/2.jpg)
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)
![Page 3: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/3.jpg)
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.
![Page 4: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/4.jpg)
What is Flex?
![Page 5: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/5.jpg)
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
![Page 6: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/6.jpg)
Flex Builder Is Not Flash Authoring
Flash Authoring Flex Development
Lasso Tool
Rectangle Tool
Paint Bucket Tool
Border Style
Corner Radius
BG Color
![Page 7: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/7.jpg)
Why Integrate Flex and Flash?
Flex applications all look the same
![Page 8: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/8.jpg)
Example of a Stylized Flex Application
![Page 9: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/9.jpg)
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
![Page 10: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/10.jpg)
What is Skinning?
Programmatic Skinning
Graphical Skinning
![Page 11: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/11.jpg)
Using CSS in Flex
Flex CSS can apply styles by Component or Class.
Component {
color: #FFFFFF;
}
.Class {
background-color: #000000;
}
![Page 12: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/12.jpg)
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”;
}
![Page 13: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/13.jpg)
Embedding Graphics
Finally, the good stuff.
Application {
background-image: "assets/scary_woods.jpg";
}
![Page 14: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/14.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");
}
![Page 15: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/15.jpg)
Before and After
![Page 16: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/16.jpg)
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.
![Page 17: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/17.jpg)
Where to go from here
http://www.adobe.com/devnet/flex/articles/flex_skins.html
![Page 18: Flash and Flex Can Hold Hands Techniques for Integrating Flash Content and Flex Applications FiTC - Hollywood October 5, 2006 Chafic Kazoun, Founder and](https://reader030.vdocument.in/reader030/viewer/2022032606/56649eb35503460f94bbac4b/html5/thumbnails/18.jpg)
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.