1 / 17

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

About us. Chafic KazounFounder and CTOTeam Macromedia MemberEmail (chafic@rewindlife.com)Blog (http://www.rewindlife.com). Ben StuckiSoftware EngineerFlex Component DeveloperEmail (mail@benstucki.net)Blog (http://www.benstucki.net). Atellis (http://www.atellis.com). What We Will Cover .

Albert_Lan
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

    2. About us Chafic Kazoun Founder and CTO Team Macromedia Member Email (chafic@rewindlife.com) Blog (http://www.rewindlife.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 Flex needs FlashFlex needs Flash

    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) Flex Development Targets the Developer Workflow Declarative Markup Language (MXML) Object Oriented Development (AS3) Familiar Development Environment No Timeline, No Library, No Drawing Tools Learn AS3 now you’ll need it later Flash Authoring Targets the Media Designer Workflow Full drawing tools Animation through a timeline Coding in a more designer friendly environment Flex Development Targets the Developer Workflow Declarative Markup Language (MXML) Object Oriented Development (AS3) Familiar Development Environment No Timeline, No Library, No Drawing Tools Learn AS3 now you’ll need it later Flash Authoring Targets the Media Designer Workflow Full drawing tools Animation through a timeline Coding in a more designer friendly environment

    6. Flex Builder Is Not Flash Authoring Show Flex Builder Flash Pros get frustrated with the limits of Flex. Flex has more rules than flash. Application developers feel liberated by the freedom of Flex.Show Flex Builder Flash Pros get frustrated with the limits of Flex. Flex has more rules than flash. Application developers feel liberated by the freedom of Flex.

    7. Why Integrate Flex and Flash? Flex applications all look the same Flex applications have the same default look and feel with limited customization through CSS and configurable properties Companies want to differentiate their brand, services and products from competitors Designers can contribute content to an application (Graphics, Animations, Media, etc) to make it sexy and easy to use. Flex allows customization of application appearance through CSS, Skinning and Themes Industry user interface… ms… adobe ahead of the curve… still at the starting pointFlex applications have the same default look and feel with limited customization through CSS and configurable properties Companies want to differentiate their brand, services and products from competitors Designers can contribute content to an application (Graphics, Animations, Media, etc) to make it sexy and easy to use. Flex allows customization of application appearance through CSS, Skinning and Themes Industry user interface… ms… adobe ahead of the curve… still at the starting point

    8. Example of a Stylized Flex Application Style explorer. / skinning help docsStyle explorer. / skinning help docs

    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 Flex component are like MovieClips It makes developing applications faster Modify Existing Style Properties Using CSS CSS File Embedded Inline Skinning Using FlashFlex component are like MovieClips It makes developing applications faster Modify Existing Style Properties Using CSS CSS File Embedded Inline Skinning Using Flash

    10. What is Skinning? Programmatic Skinning

    11. Using CSS in Flex Flex CSS can apply styles by Component or Class.

    12. CSS and Typography Flex provides rich typography capabilities. Use them. Modifying Fonts – Font Gotchas XP ClearType gets disabled sometimes/use TTF or FlashFlex provides rich typography capabilities. Use them. Modifying Fonts – Font Gotchas XP ClearType gets disabled sometimes/use TTF or Flash

    13. Embedding Graphics Finally, the good stuff.

    14. Embedding Flash Library Content Flex CSS lets you access Flash library symbols individually.

    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

More Related