Using Flash & Flex Together Jesse R. Warden Flex, Flash, & Flash Lite Consultant Universal Mind Blog:

Dealio Why Flash & Flex? CSS Skinning Flash

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

Flex Isn’t Flash Flex has no timeline Flex has no library Flex has no drawing tools

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

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

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

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

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

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

Design Tools in Flex CSS Skinning Flash

Flex CSS Master file Inline Applied

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

CSS Inline Label { font-size: 14px; font-weight: bold; }

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

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

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

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

Skinning Filtered Programmatic Images

WinAMP Skins - Same App, Different Style

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

Skinning - Filters <mx:Box xmlns:mx=" xmlns:flash="flash.filters.*">

Skinning - Filters

Freely licensed under Creative Commons - BY-SA-1.0 Source:

Skinning - Programmatic Override updateDisplayList Utilize a programmatic skin

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

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); }

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

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

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?

Sample Design

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

Dissecting the Design Buttons? Custom component or SWF skin.

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

Dissecting the Design Animating controls? Flex states & transitions.

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

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

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

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

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

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

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

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}"/>

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

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

Less of this…

…and more of this!

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)

Conclusions New employment opportunities Flex Developers code Flash Designers lay the funk!

Thank you! Questions? Jesse R. Warden Load Skins at runtime (like WinAMP) e.html