Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Using Flash & Flex Together PowerPoint Presentation
Download Presentation
Using Flash & Flex Together

Using Flash & Flex Together

192 Vues Download Presentation
Télécharger la présentation

Using Flash & Flex Together

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Using Flash & Flex Together • Jesse R. Warden • Flex, Flash, & Flash Lite Consultant • Universal Mind • jesse@universalmind.com • Blog: www.jessewarden.com

  2. Dealio • Why Flash & Flex? • CSS • Skinning • Flash

  3. Why Flash & Flex? • Both make SWFs • Flex is not Flash • Flash is not Flex • Different Users • Developers & Designers

  4. Flex Isn’t Flash • Flex has no timeline • Flex has no library • Flex has no drawing tools

  5. Flash Isn’t Flex • Flash has no MXML • Flash has limited CSS • Flash does not have the new components

  6. Developer vs. Designer import Character; var a:Character = new Character(); addChild(a);

  7. Flex Strengths • Form based apps / wizards / heavy data entry • Easy coloring of components • Layout engine • Separation of code and controls • Programmers like it

  8. Flash Strengths • Designer Tool • Easy to integrate animation, sound, & video • Timeline • Drawing Tools

  9. Flex Without Flash • All apps look the frikin’ same • “Flex apps look like Flex apps” • Branding… what’s that? • No differentiation between competitors • Limited design == limited ease of use • Limited ease of use == less successful product

  10. Flex With Flash • Applications look the way your designers want • Better animations • Better integration & modifications of video and sound • Better user experience (assuming your IA rocks) • Less compromise

  11. Design Tools in Flex • CSS • Skinning • Flash

  12. Flex CSS • Master file • Inline • Applied

  13. CSS – Masta’ Blasta’ Application { modal-transparency: 0.5; background-color: #990000; } Saved as index.css. Applied like: <mx:Style source=“index.css” />

  14. CSS Inline <mx:Style> Label { font-size: 14px; font-weight: bold; } </mx:Style> <mx:Label text=“Hey” />

  15. CSS Inline & Applied <mx:Style> .myHeader { font-size: 14px; font-weight: bold; } </mx:Style> <mx:Label styleName=“myHeader” text=“Hey” />

  16. No CSS? <mx:Label text="Game Tools Online" fontSize="18" color="#ffffff" fontFamily="Trebuchet MS" fontWeight="bold"/>

  17. CSS Global Selectors Affect all components in the entire app LinkButton { text-decoration: "underline"; } LinkButton

  18. CSS Custom Global Selectors Extend to make easier & more flexible // saved as MyLinkButton.mxml <?xml version="1.0" encoding="utf-8"?> <mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml" /> MyLinkButton { text-decoration: "underline"; }

  19. Skinning • Filtered • Programmatic • Images

  20. WinAMP Skins - Same App, Different Style

  21. Skinning - Filters • Built-in to MXML: Blur, Glow, Dropshadow • Other filters available through ActionScript

  22. Skinning - Filters <mx:Blur blurXTo="5" target="{my_label}" /> <?xml version="1.0" encoding="utf-8"?> <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash="flash.filters.*"> <mx:filters> <mx:BevelFilter /> </mx:filters> </mx:Box>

  23. Skinning - Filters

  24. http://spbarber.com/blog/using-the-blurfilter-in-flex-15-from-jesse-warden/http://spbarber.com/blog/using-the-blurfilter-in-flex-15-from-jesse-warden/

  25. Freely licensed under Creative Commons - BY-SA-1.0 Source: http://thoughtattic.com/

  26. Skinning - Programmatic • Override updateDisplayList • Utilize a programmatic skin

  27. Skinning – Programmatic Base Classes class MySkin extends ProgrammaticSkin class MySkin extends Border class MySkin extends RectangleBorder

  28. Skinning - Programmatic protected override function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(); var g:Graphics = graphics; g.beginFill(0xFF0000); g.lineTo(300, 0); // ect. g.endFill(0); }

  29. CSS Skin Applying Button { upSkin: ClassReference(“MySkin”); downSkin: ClassReference(“MySkin”); }

  30. Enter t3h Flash • Animations • Complex buttons & transitions • Short videos / video elements • Moving design elements

  31. The Big D’s • When do you use Flash instead? • When do you use states & transitions vs. Flash? • When do you make your own component?

  32. Sample Design

  33. Dissecting the Design Background? Definitely Flash. Load a SWF.

  34. Dissecting the Design Buttons? Custom component or SWF skin.

  35. Dissecting the Design Side attachment (vertical blue line on left)? Load a SWF.

  36. Dissecting the Design Animating controls? Flex states & transitions.

  37. Dissecting the Design • Title? Embed a font. Saffron (FlashType) it if you are able. • Border? Embed / load a PNG. • Text? Color through CSS.

  38. The Font Decision • Embedded font == no Saffron (FlashType) • Use Flash, way more RAM (4 megs potentially) • Other than TTF? Use Flash.

  39. Embed TTF @font-face { src: url("assets/fonts/EuropeExt-Bold.ttf"); fontFamily: "EuropeExt-Bold"; font-weight: "bold"; } Button { font-family: "EuropeExt-Bold"; }

  40. Embed SWF @font-face { src: url("assets/fonts/EuropeExt-Bold.swf"); fontFamily: "EuropeExt-Bold"; font-weight: "bold"; } Button { font-family: "EuropeExt-Bold"; }

  41. No Anti-Aliasing? • Windows XP ClearType gets disabled sometimes… • Usually from filters • cacheAsBitmap also sometimes affects it

  42. States & Transitions + Flash • Some animations easiest to do in transitions • Some impossible • How do you know? • Experience. • Diffing animations vs. design vision

  43. States & Transitions + Flash Flash Animates better: use Flash, load SWF <mx:states> <mx:State name="main_state"> <mx:AddChild position="lastChild"> <mx:Image id="navHolder_anime" source="assets/swfs/nav_holder.swf" y="7" /> </mx:AddChild>

  44. States & Transitions + Flash Flex makes animation more flexible: use transitions <mx:Parallel target="{upload_pb}"> <mx:Fade alphaFrom="0" alphaTo="1" duration="{ANIME_SPEED}" /> <mx:Move xFrom="100” duration="{ANIME_SPEED}"/> <mx:Blur blurXFrom="{BLUR_AMOUNT}“ blurXTo="0“ duration="{ANIME_SPEED}"/> </mx:Parallel>

  45. Why Flash? • Flash Design contribution == predictable viewing • Programmers don’t care == predictable playback • Not another VB6

  46. Why Flash? • Designers can make easier to use apps • Designers can make cooler looking apps • Designers can showcase the brand

  47. Less of this…