Using Flash & Flex Together

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

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

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

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

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

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

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

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

10. 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. 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. Design Tools in Flex • CSS • Skinning • Flash

13. Flex CSS • Master file • Inline • Applied

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

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

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

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

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

19. 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"; }

20. Skinning • Filtered • Programmatic • Images

21. WinAMP Skins - Same App, Different Style

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

23. 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>

24. Skinning - Filters

25. 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/

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

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

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

29. 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. CSS Skin Applying Button { upSkin: ClassReference(“MySkin”); downSkin: ClassReference(“MySkin”); }

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

32. 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. Sample Design

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

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

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

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

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

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

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

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

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

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

45. 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>

46. 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>

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

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

49. Less of this…