using flash & flex together
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 PresentationTRANSCRIPT
![Page 1: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/1.jpg)
![Page 2: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/2.jpg)
www.universalmind.com
Using Flash & Flex Together
• Jesse R. Warden
• Flex, Flash, & Flash Lite Consultant
• Universal Mind
• Blog: www.jessewarden.com
![Page 3: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/3.jpg)
www.universalmind.com
Dealio
• Why Flash & Flex?
• CSS
• Skinning
• Flash
![Page 4: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/4.jpg)
www.universalmind.com
Why Flash & Flex?
• Both make SWFs
• Flex is not Flash
• Flash is not Flex
• Different Users
• Developers & Designers
![Page 5: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/5.jpg)
www.universalmind.com
Flex Isn’t Flash
• Flex has no timeline
• Flex has no library
• Flex has no drawing tools
![Page 6: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/6.jpg)
www.universalmind.com
Flash Isn’t Flex
• Flash has no MXML
• Flash has limited CSS
• Flash does not have the new components
![Page 7: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/7.jpg)
www.universalmind.com
Developer vs. Designer
import Character;var a:Character = new Character();addChild(a);
![Page 8: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/8.jpg)
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
![Page 9: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/9.jpg)
www.universalmind.com
Flash Strengths
• Designer Tool
• Easy to integrate animation, sound, & video
• Timeline
• Drawing Tools
![Page 10: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/10.jpg)
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
![Page 11: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/11.jpg)
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
![Page 12: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/12.jpg)
www.universalmind.com
Design Tools in Flex
• CSS
• Skinning
• Flash
![Page 13: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/13.jpg)
www.universalmind.com
Flex CSS
• Master file
• Inline
• Applied
![Page 14: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/14.jpg)
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” />
![Page 15: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/15.jpg)
www.universalmind.com
CSS Inline<mx:Style> Label { font-size: 14px; font-weight: bold; }</mx:Style>
<mx:Label text=“Hey” />
![Page 16: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/16.jpg)
www.universalmind.com
CSS Inline & Applied<mx:Style> .myHeader { font-size: 14px; font-weight: bold; }</mx:Style>
<mx:Label styleName=“myHeader” text=“Hey” />
![Page 17: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/17.jpg)
www.universalmind.com
No CSS?<mx:Label text="Game Tools Online"
fontSize="18" color="#ffffff" fontFamily="Trebuchet MS" fontWeight="bold"/>
![Page 18: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/18.jpg)
www.universalmind.com
CSS Global SelectorsAffect all components in the entire app
LinkButton
{
text-decoration: "underline";
}
LinkButton
![Page 19: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/19.jpg)
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";
}
![Page 20: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/20.jpg)
www.universalmind.com
Skinning
• Filtered
• Programmatic
• Images
![Page 21: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/21.jpg)
www.universalmind.com
WinAMP Skins - Same App, Different Style
![Page 22: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/22.jpg)
www.universalmind.com
Skinning - Filters
• Built-in to MXML: Blur, Glow, Dropshadow
• Other filters available through ActionScript
![Page 23: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/23.jpg)
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>
![Page 24: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/24.jpg)
www.universalmind.com
Skinning - Filters
![Page 25: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/25.jpg)
www.universalmind.com
http://spbarber.com/blog/using-the-blurfilter-in-flex-15-from-jesse-warden/
![Page 26: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/26.jpg)
www.universalmind.com
Freely licensed under Creative Commons - BY-SA-1.0
Source: http://thoughtattic.com/
![Page 27: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/27.jpg)
www.universalmind.com
Skinning - Programmatic
• Override updateDisplayList
• Utilize a programmatic skin
![Page 28: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/28.jpg)
www.universalmind.com
Skinning – Programmatic Base Classesclass MySkin extends ProgrammaticSkin
class MySkin extends Border
class MySkin extends RectangleBorder
![Page 29: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/29.jpg)
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);}
![Page 30: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/30.jpg)
www.universalmind.com
CSS Skin ApplyingButton{ upSkin: ClassReference(“MySkin”); downSkin: ClassReference(“MySkin”);}
![Page 31: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/31.jpg)
www.universalmind.com
Enter t3h Flash
• Animations
• Complex buttons & transitions
• Short videos / video elements
• Moving design elements
![Page 32: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/32.jpg)
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?
![Page 33: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/33.jpg)
www.universalmind.com
Sample Design
![Page 34: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/34.jpg)
www.universalmind.com
Dissecting the DesignBackground? Definitely Flash. Load a SWF.
![Page 35: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/35.jpg)
www.universalmind.com
Dissecting the DesignButtons? Custom component or SWF skin.
![Page 36: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/36.jpg)
www.universalmind.com
Dissecting the DesignSide attachment (vertical blue line on left)? Load a SWF.
![Page 37: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/37.jpg)
www.universalmind.com
Dissecting the DesignAnimating controls? Flex states & transitions.
![Page 38: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/38.jpg)
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.
![Page 39: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/39.jpg)
www.universalmind.com
The Font Decision
• Embedded font == no Saffron (FlashType)
• Use Flash, way more RAM (4 megs potentially)
• Other than TTF? Use Flash.
![Page 40: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/40.jpg)
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";
}
![Page 41: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/41.jpg)
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";
}
![Page 42: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/42.jpg)
www.universalmind.com
No Anti-Aliasing?
• Windows XP ClearType gets disabled sometimes…
• Usually from filters
• cacheAsBitmap also sometimes affects it
![Page 43: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/43.jpg)
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
![Page 44: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/44.jpg)
www.universalmind.com
![Page 45: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/45.jpg)
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>
![Page 46: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/46.jpg)
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>
![Page 47: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/47.jpg)
www.universalmind.com
Why Flash?
• Flash Design contribution == predictable viewing
• Programmers don’t care == predictable playback
• Not another VB6
![Page 48: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/48.jpg)
www.universalmind.com
Why Flash?
• Designers can make easier to use apps
• Designers can make cooler looking apps
• Designers can showcase the brand
![Page 49: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/49.jpg)
www.universalmind.com
Less of this…
![Page 50: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/50.jpg)
www.universalmind.com
![Page 51: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/51.jpg)
www.universalmind.com
…and more of this!
![Page 52: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/52.jpg)
www.universalmind.com
![Page 53: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/53.jpg)
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)
![Page 54: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/54.jpg)
www.universalmind.com
Conclusions
• New employment opportunities
• Flex Developers code
• Flash Designers lay the funk!
![Page 55: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/55.jpg)
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
![Page 56: Using Flash & Flex Together](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56814937550346895db678d3/html5/thumbnails/56.jpg)