Upload
dane
View
44
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Using Flash & Flex Together. Jesse R. Warden Flex, Flash, & Flash Lite Consultant Universal Mind [email protected] Blog: 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 - PowerPoint PPT Presentation
Citation preview
www.universalmind.com
Using Flash & Flex Together
• Jesse R. Warden
• Flex, Flash, & Flash Lite Consultant
• Universal Mind
• Blog: www.jessewarden.com
www.universalmind.com
Dealio
• Why Flash & Flex?
• CSS
• Skinning
• Flash
www.universalmind.com
Why Flash & Flex?
• Both make SWFs
• Flex is not Flash
• Flash is not Flex
• Different Users
• Developers & Designers
www.universalmind.com
Flex Isn’t Flash
• Flex has no timeline
• Flex has no library
• Flex has no drawing tools
www.universalmind.com
Flash Isn’t Flex
• Flash has no MXML
• Flash has limited CSS
• Flash does not have the new components
www.universalmind.com
Developer vs. Designer
import Character;var a:Character = new Character();addChild(a);
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
www.universalmind.com
Flash Strengths
• Designer Tool
• Easy to integrate animation, sound, & video
• Timeline
• Drawing Tools
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
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
www.universalmind.com
Design Tools in Flex
• CSS
• Skinning
• Flash
www.universalmind.com
Flex CSS
• Master file
• Inline
• Applied
www.universalmind.com
CSS – Masta’ Blasta’Application{ modal-transparency: 0.5; background-color: #990000;}
Saved as index.css. Applied like:
<mx:Style source=“index.css” />
www.universalmind.com
CSS Inline<mx:Style> Label { font-size: 14px; font-weight: bold; }</mx:Style>
<mx:Label text=“Hey” />
www.universalmind.com
CSS Inline & Applied<mx:Style> .myHeader { font-size: 14px; font-weight: bold; }</mx:Style>
<mx:Label styleName=“myHeader” text=“Hey” />
www.universalmind.com
No CSS?<mx:Label text="Game Tools Online"
fontSize="18" color="#ffffff" fontFamily="Trebuchet MS" fontWeight="bold"/>
www.universalmind.com
CSS Global SelectorsAffect all components in the entire app
LinkButton
{
text-decoration: "underline";
}
LinkButton
www.universalmind.com
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";
}
www.universalmind.com
Skinning
• Filtered
• Programmatic
• Images
www.universalmind.com
WinAMP Skins - Same App, Different Style
www.universalmind.com
Skinning - Filters
• Built-in to MXML: Blur, Glow, Dropshadow
• Other filters available through ActionScript
www.universalmind.com
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>
www.universalmind.com
Skinning - Filters
www.universalmind.com
http://spbarber.com/blog/using-the-blurfilter-in-flex-15-from-jesse-warden/
www.universalmind.com
Freely licensed under Creative Commons - BY-SA-1.0
Source: http://thoughtattic.com/
www.universalmind.com
Skinning - Programmatic
• Override updateDisplayList
• Utilize a programmatic skin
www.universalmind.com
Skinning – Programmatic Base Classesclass MySkin extends ProgrammaticSkin
class MySkin extends Border
class MySkin extends RectangleBorder
www.universalmind.com
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);}
www.universalmind.com
CSS Skin ApplyingButton{ upSkin: ClassReference(“MySkin”); downSkin: ClassReference(“MySkin”);}
www.universalmind.com
Enter t3h Flash
• Animations
• Complex buttons & transitions
• Short videos / video elements
• Moving design elements
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?
www.universalmind.com
Sample Design
www.universalmind.com
Dissecting the DesignBackground? Definitely Flash. Load a SWF.
www.universalmind.com
Dissecting the DesignButtons? Custom component or SWF skin.
www.universalmind.com
Dissecting the DesignSide attachment (vertical blue line on left)? Load a SWF.
www.universalmind.com
Dissecting the DesignAnimating controls? Flex states & transitions.
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.
www.universalmind.com
The Font Decision
• Embedded font == no Saffron (FlashType)
• Use Flash, way more RAM (4 megs potentially)
• Other than TTF? Use Flash.
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";
}
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";
}
www.universalmind.com
No Anti-Aliasing?
• Windows XP ClearType gets disabled sometimes…
• Usually from filters
• cacheAsBitmap also sometimes affects it
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
www.universalmind.com
www.universalmind.com
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>
www.universalmind.com
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>
www.universalmind.com
Why Flash?
• Flash Design contribution == predictable viewing
• Programmers don’t care == predictable playback
• Not another VB6
www.universalmind.com
Why Flash?
• Designers can make easier to use apps
• Designers can make cooler looking apps
• Designers can showcase the brand
www.universalmind.com
Less of this…
www.universalmind.com
www.universalmind.com
…and more of this!
www.universalmind.com
www.universalmind.com
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)
www.universalmind.com
Conclusions
• New employment opportunities
• Flex Developers code
• Flash Designers lay the funk!
www.universalmind.com
Thank you! Questions?Jesse R. Warden
Load Skins at runtime (like WinAMP)http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtime.html