using flash & flex together jesse r. warden flex, flash, & flash lite consultant universal...

www.universalmind.com

Using Flash & Flex Together

• Jesse R. Warden

• Flex, Flash, & Flash Lite Consultant

• Universal Mind

• [email protected]

• Blog: www.jessewarden.com

mailto:[email protected]

http://www.jessewarden.com/


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:

<mx:Style source=“index.css” />


CSS Inline<mx:Style> Label { font-size: 14px; font-weight: bold; }</mx:Style>

<mx:Label text=“Hey” />


CSS Inline & Applied<mx:Style> .myHeader { font-size: 14px; font-weight: bold; }</mx:Style>

<mx:Label styleName=“myHeader” text=“Hey” />


No CSS?<mx:Label text="Game Tools Online"

fontSize="18" color="#ffffff" fontFamily="Trebuchet MS" fontWeight="bold"/>


CSS Global SelectorsAffect all components in the entire app

LinkButton

{

text-decoration: "underline";

}

LinkButton


CSS Custom Global SelectorsExtend 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";

}


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: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>


Skinning - Filters


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


Freely licensed under Creative Commons - BY-SA-1.0

Source: http://thoughtattic.com/

http://thoughtattic.com/




Skinning - Programmatic

• Override updateDisplayList

• Utilize a programmatic skin


Skinning – Programmatic Base Classesclass MySkin extends ProgrammaticSkin

class MySkin extends Border

class MySkin extends RectangleBorder


Skinning - Programmaticprotected 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 ApplyingButton{ 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 DesignBackground? Definitely Flash. Load a SWF.


Dissecting the DesignButtons? Custom component or SWF skin.


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


Dissecting the DesignAnimating 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 TTF@font-face

{

src: url("assets/fonts/EuropeExt-Bold.ttf");

fontFamily: "EuropeExt-Bold";

font-weight: "bold";

}

Button

{

font-family: "EuropeExt-Bold";

}


Embed SWF@font-face

{

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 + FlashFlash 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>


States & Transitions + FlashFlex 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>


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

[email protected]

Load Skins at runtime (like WinAMP)http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtime.html

mailto:[email protected]

http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtime.html

http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtime.html

using flash & flex together jesse r. warden flex, flash, & flash lite consultant universal...

Documents

comskinning filterswww

comwhy flash flex

flash flex togetherjesse

comflex strengthsform

graphics g

comskinning filtersbuilt

comflex isnt flashflex

px fontweight