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

3. www.universalmind.com Dealio Why Flash & Flex? CSS Skinning Flash

4. www.universalmind.com Why Flash & Flex? Both make SWFs Flex is not Flash Flash is not Flex Different Users Developers & Designers

5. www.universalmind.com Flex Isn’t Flash Flex has no timeline Flex has no library Flex has no drawing tools

6. www.universalmind.com Flash Isn’t Flex Flash has no MXML Flash has limited CSS Flash does not have the new components

7. www.universalmind.com Developer vs. Designer import Character; var a:Character = new Character(); addChild(a);

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

9. www.universalmind.com Flash Strengths Designer Tool Easy to integrate animation, sound, & video Timeline Drawing Tools

10. www.universalmind.com 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

11. www.universalmind.com 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

12. www.universalmind.com Design Tools in Flex CSS Skinning Flash

13. www.universalmind.com Flex CSS Master file Inline Applied

14. www.universalmind.com CSS – Masta’ Blasta’ Application { modal-transparency: 0.5; background-color: #990000; } Saved as index.css. Applied like:

15. www.universalmind.com CSS Inline Label { font-size: 14px; font-weight: bold; }

16. www.universalmind.com CSS Inline & Applied.myHeader { font-size: 14px; font-weight: bold; }

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

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

19. www.universalmind.com CSS Custom Global Selectors Extend to make easier & more flexible // saved as MyLinkButton.mxml MyLinkButton { text-decoration: "underline"; }

20. www.universalmind.com Skinning Filtered Programmatic Images

21. www.universalmind.com WinAMP Skins - Same App, Different Style

22. www.universalmind.com Skinning - Filters Built-in to MXML: Blur, Glow, Dropshadow Other filters available through ActionScript

23. www.universalmind.com Skinning - Filters <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash="flash.filters.*">

24. www.universalmind.com Skinning - Filters

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

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

27. www.universalmind.com Skinning - Programmatic Override updateDisplayList Utilize a programmatic skin

28. www.universalmind.com Skinning – Programmatic Base Classes class MySkin extends ProgrammaticSkin class MySkin extends Border class MySkin extends RectangleBorder

29. www.universalmind.com 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); }

30. www.universalmind.com CSS Skin Applying Button { upSkin: ClassReference(“MySkin”); downSkin: ClassReference(“MySkin”); }

31. www.universalmind.com Enter t3h Flash Animations Complex buttons & transitions Short videos / video elements Moving design elements

32. www.universalmind.com 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?

33. www.universalmind.com Sample Design

34. www.universalmind.com Dissecting the Design Background? Definitely Flash. Load a SWF.

35. www.universalmind.com Dissecting the Design Buttons? Custom component or SWF skin.

36. www.universalmind.com Dissecting the Design Side attachment (vertical blue line on left)? Load a SWF.

37. www.universalmind.com Dissecting the Design Animating controls? Flex states & transitions.

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

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

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

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

42. www.universalmind.com No Anti-Aliasing? Windows XP ClearType gets disabled sometimes… Usually from filters cacheAsBitmap also sometimes affects it

43. www.universalmind.com States & Transitions + Flash Some animations easiest to do in transitions Some impossible How do you know? Experience. Diffing animations vs. design vision

44. www.universalmind.com

45. States & Transitions + Flash Flash Animates better: use Flash, load SWF

46. www.universalmind.com States & Transitions + Flash Flex makes animation more flexible: use transitions <mx:Move xFrom="100” duration="{ANIME_SPEED}"/> <mx:Blur blurXFrom="{BLUR_AMOUNT}“ blurXTo="0“ duration="{ANIME_SPEED}"/>

47. www.universalmind.com Why Flash? Flash Design contribution == predictable viewing Programmers don’t care == predictable playback Not another VB6

48. www.universalmind.com Why Flash? Designers can make easier to use apps Designers can make cooler looking apps Designers can showcase the brand

49. www.universalmind.com Less of this…

50. www.universalmind.com

51. …and more of this!

52. www.universalmind.com

53. Conclusions Flash makes Flex better Through sound, animation, and video More design control Saffron font engine (FlashType) Better design == more usable app More usable app == more bling for teh w1n! (more money)

54. www.universalmind.com Conclusions New employment opportunities Flex Developers code Flash Designers lay the funk!

55. www.universalmind.com Thank you! Questions? Jesse R. Warden jesse@universalmind.com Load Skins at runtime (like WinAMP) http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtim e.html