Getting Complex Designs into Flex - FITC 2011

COMPLEX DESIGNS IN FLEX

COMPLEX DESIGNS IN FLEX ‣ Jesse Warden

COMPLEX DESIGNS IN FLEX ‣ Jesse Warden ‣ Partner at Web App Solution

COMPLEX DESIGNS IN FLEX ‣ Jesse Warden ‣ Partner at Web App Solution ‣ Flex & Flash Consultant

COMPLEX DESIGNS IN FLEX ‣ Jesse Warden ‣ Partner at Web App Solution ‣ Flex & Flash Consultant ‣ FITC 2011

CANADA & FITC ROX

CANADA & FITC ROX ‣ Celebs & Industry Contributors

WHO AM I?

WHO AM I? ‣ Jesse Warden

WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution

WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day...

WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day... ‣ ...product work (+beer) at night.

WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day... ‣ ...product work (+beer) at night. ‣ Consultant by day...

WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day... ‣ ...product work (+beer) at night. ‣ Consultant by day... ‣ ...entrepreneur (more beer) at night.

JESSE WARDEN

JESSE WARDEN ‣ passionateabout technology bettering the world

JESSE WARDEN ‣ passionateabout technology bettering the world ‣ think positive

JESSE WARDEN ‣ passionateabout technology bettering the world ‣ think positive ‣ like meeting new people

clients

clients ‣ Enterprise | Agency

clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS

clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup

clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup ‣ Intuit = Flex Training/Consulting

clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup ‣ Intuit = Flex Training/Consulting ‣ Disney = huge Flash website

clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup ‣ Intuit = Flex Training/Consulting ‣ Disney = huge Flash website ‣ HBOGO.com = Flex video product

WHAT? ‣ That design in that app

WHAT? ‣ That design in that app ‣ Technical Design Fundamentals

WHAT? ‣ That design in that app ‣ Technical Design Fundamentals ‣ Philosophies, Methodologies, & Tools

WHAT? ‣ That design in that app ‣ Technical Design Fundamentals ‣ Philosophies, Methodologies, & Tools ‣ Workﬂows

WHAT DO YOU GET?

WHAT DO YOU GET? ‣ Learn effective Production Art

WHAT DO YOU GET? ‣ Learn effective Production Art ‣ Understand when to use certain techniques

WHAT DO YOU GET? ‣ Learn effective Production Art ‣ Understand when to use certain techniques ‣ Make Your Software Better

TANGIBLES

TANGIBLES ‣ How to get designs into Flex & Flash

TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options

TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options ‣ What Tool, Where

TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options ‣ What Tool, Where ‣ challenges with Illustrator & Catalyst

TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options ‣ What Tool, Where ‣ challenges with Illustrator & Catalyst ‣ engage designers in Agile SCRUM

WHY? ‣ it’s hard

WHY? ‣ it’s hard ‣ complex

WHY? ‣ it’s hard ‣ complex ‣ tricks & caveats

WHY? ‣ it’s hard ‣ complex ‣ tricks & caveats ‣ good design == proven ROI

INSPIRATION

INSPIRATION ‣ Continuallyhired as a Flex consultant for design skills

INSPIRATION ‣ Continuallyhired as a Flex consultant for design skills ‣ disagreewith the Illustrator/Catalyst direction

INSPIRATION ‣ Continuallyhired as a Flex consultant for design skills ‣ disagreewith the Illustrator/Catalyst direction ‣ Encounterengineers who don’t know the basics

NOMENCLATURE

NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD)

NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG)

NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG) ‣ Illustrator make’s Ay-Eyez (AI)

NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG) ‣ Illustrator make’s Ay-Eyez (AI) ‣ Flash IDE make’s Flahz (FLA)

NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG) ‣ Illustrator make’s Ay-Eyez (AI) ‣ Flash IDE make’s Flahz (FLA) ‣ Catalyst & Flash Builder 4.5 make’s Eff-X-Peez (FXP)

COMMON USE CASES

COMMON USE CASES ‣ Photoshop PSD into Flex

COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex

COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex ‣ Illustrator AI into Flex

COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex ‣ Illustrator AI into Flex ‣ Flash FLA into Flex

COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex ‣ Illustrator AI into Flex ‣ Flash FLA into Flex ‣ Common FXP

WHY? LANGUAGE

WHY? LANGUAGE ‣ Designers Lingo

WHY? LANGUAGE ‣ Designers Lingo ‣ Designers have camps

WHY? LANGUAGE ‣ Designers Lingo ‣ Designers have camps ‣ preferred tools/methodologies

TARGETS

TARGETS ‣ Flash

TARGETS ‣ Flash ‣ Flex

TARGETS ‣ Flash ‣ Flex ‣ AS3

HOW? ‣ Production Art Process

HOW? ‣ Production Art Process ‣ Design

HOW? ‣ Production Art Process ‣ Design ‣ Conversion

HOW? ‣ Production Art Process ‣ Design ‣ Conversion ‣ Implementation

DESIGN

DESIGN ‣ Planning & Execution

DESIGN ‣ Planning & Execution ‣ UI/UX/Design Patterns

DESIGN ‣ Planning & Execution ‣ UI/UX/Design Patterns ‣ Design UI Elements

DESIGN ‣ Planning & Execution ‣ UI/UX/Design Patterns ‣ Design UI Elements ‣ Flex & Flash Capabilities

PLANNING & EXECUTION

PLANNING & EXECUTION ‣ Design expectations

PLANNING & EXECUTION ‣ Design expectations ‣ Do they know Flash?

PLANNING & EXECUTION ‣ Design expectations ‣ Do they know Flash? ‣ Do they know Flex?

PLANNING & EXECUTION ‣ Design expectations ‣ Do they know Flash? ‣ Do they know Flex? ‣ Format: Bitmap or Vector?

TARGET PLATFORM

TARGET PLATFORM ‣ Web

TARGET PLATFORM ‣ Web ‣ Desktop

TARGET PLATFORM ‣ Web ‣ Desktop ‣ Mobile

WELL EQUIPPED

WELL EQUIPPED ‣ Files been “prepped”?

WELL EQUIPPED ‣ Files been “prepped”? ‣ Layer effects been ﬂattened?

WELL EQUIPPED ‣ Files been “prepped”? ‣ Layer effects been ﬂattened? ‣ Smart Object-i-ﬁed?

WELL EQUIPPED ‣ Files been “prepped”? ‣ Layer effects been ﬂattened? ‣ Smart Object-i-ﬁed? ‣ Fonts?

DESIGN FUNDAMENTALS

DESIGN FUNDAMENTALS ‣ Raster vs. Vector

DESIGN FUNDAMENTALS ‣ Raster vs. Vector ‣ Deployment Formats

DESIGN FUNDAMENTALS ‣ Raster vs. Vector ‣ Deployment Formats ‣ Container Formats

DESIGN FUNDAMENTALS ‣ Raster vs. Vector ‣ Deployment Formats ‣ Container Formats ‣ SWF Format

BITMAP/RASTER

BITMAP/RASTER ‣ Pixels, little blocks of color

BITMAP/RASTER ‣ Pixels, little blocks of color ‣ Realism

BITMAP/RASTER ‣ Pixels, little blocks of color ‣ Realism ‣ Old (iOS blits, OSX vector)

BITMAP/RASTER

BITMAP/RASTER ‣ High RAM usage

BITMAP/RASTER ‣ High RAM usage ‣ High in ﬁle-size

BITMAP/RASTER ‣ High RAM usage ‣ High in ﬁle-size ‣ Low CPU

BITMAP/RASTER ‣ High RAM usage ‣ High in ﬁle-size ‣ Low CPU ‣ Don’t Scale in Size

BITMAP/RASTER ‣ High RAM usage ‣ High in ﬁle-size ‣ Low CPU ‣ Don’t Scale in Size ‣ Easily Hardware Accelerated

VECTORS

VECTORS ‣ Low RAM

VECTORS ‣ Low RAM ‣ Low ﬁle-size (usually)

VECTORS ‣ Low RAM ‣ Low ﬁle-size (usually) ‣ High CPU

VECTORS ‣ Low RAM ‣ Low ﬁle-size (usually) ‣ High CPU ‣ Scale Size

DEPLOYMENT FORMATS

DEPLOYMENT FORMATS ‣ JPEG

DEPLOYMENT FORMATS ‣ JPEG ‣ PNG

DEPLOYMENT FORMATS ‣ JPEG ‣ PNG ‣ SWF

JPEG ‣ Lossy Compression

JPEG ‣ Lossy Compression ‣ Photographs

JPEG ‣ Lossy Compression ‣ Photographs ‣ Realism

JPEG ‣ Lossy Compression ‣ Photographs ‣ Realism ‣ Bad for text, graphical shapes

JPEG ‣ Lossy Compression ‣ Photographs ‣ Realism ‣ Bad for text, graphical shapes ‣ 24 bit

WHY JPEG?

WHY JPEG? ‣ Compression artifacts noticeable when scaled

PNG ‣ Lossless Compression

PNG ‣ Lossless Compression ‣ 32 bit

PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel

PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel ‣ Fireworks metadata

PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel ‣ Fireworks metadata ‣ Big

PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel ‣ Fireworks metadata ‣ Big ‣ Betterfor shapes, text, shape graphics

SWF ‣ Flash Player format

SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit

SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering

SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering ‣ JPEG compression with Alpha

SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering ‣ JPEG compression with Alpha ‣ Graphical & Font Engine

SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering ‣ JPEG compression with Alpha ‣ Graphical & Font Engine ‣ Color Calibration

ALIASING & ANTI-ALIASING

ALIASING & ANTI-ALIASING ‣ Stair Stepping

ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster

ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster ‣ Anti-Aliasing looks better, but slower

ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster ‣ Anti-Aliasing looks better, but slower ‣ Anti-Aliasing hard to read with small text sizes

ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster ‣ Anti-Aliasing looks better, but slower ‣ Anti-Aliasing hard to read with small text sizes ‣ Anti-Aliasing + sub-pixel rendering built into Flash Player

ALIASING & ANTI-ALIASING

ALIASING & ANTI-ALIASING ‣ stage.quality

ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU

ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU ‣ bitmap/video.smoothing

ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU ‣ bitmap/video.smoothing ‣ scaling

ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU ‣ bitmap/video.smoothing ‣ scaling ‣ stroke quality

STAGE.QUALITY

STAGE.QUALITY ‣ LOW

STAGE.QUALITY ‣ LOW ‣ MED

STAGE.QUALITY ‣ LOW ‣ MED ‣ HIGH

STAGE.QUALITY ‣ LOW ‣ MED ‣ HIGH ‣ BESTESTTESTSSETEESTSTSST

STAGE.QUALITY ‣ LOW ‣ MED ‣ HIGH ‣ BESTESTTESTSSETEESTSTSST ‣ [bitmap quality FLA]

LOSSY VS. LOSSLESS

LOSSY VS. LOSSLESS ‣ JPEG vs. PNG

LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG

LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG

LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG ‣ Lossy usually has no alpha channel

LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG ‣ Lossy usually has no alpha channel ‣ Lossless supports alpha

LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG ‣ Lossy usually has no alpha channel ‣ Lossless supports alpha ‣ SWF supports lossy with alpha

LOSSY VS. LOSSLESS

LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor

LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush

LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush ‣ http://pmt.sourceforge.net/pngcrush/

LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush ‣ http://pmt.sourceforge.net/pngcrush/ ‣ Fireworks supports masked JPEG’s

LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush ‣ http://pmt.sourceforge.net/pngcrush/ ‣ Fireworks supports masked JPEG’s ‣ [show mask]

ALPHAS

ALPHAS ‣ GIF = 1 bit alpha (on or off)

ALPHAS ‣ GIF = 1 bit alpha (on or off) ‣ PNG = 8 bit alpha (gradient)

SCALE 9

SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle

SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum

SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons

SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons ‣ Flash IDE for vectors

SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons ‣ Flash IDE for vectors ‣ mxmlc for bitmaps

SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons ‣ Flash IDE for vectors ‣ mxmlc for bitmaps ‣ [show button FLA]

SCALE 9[Embed(source=”/images/image.png”)]public class MyBorder extends Bitmap[Embed(source=”/images/image/png”),scaleGridLeft=10, scaleGridTop=10,scaleGridRight=220,scaleGridBottom=320)]public class MyBorder extends Sprite

SCALE 9[Embed(source=”/images/image.png”)]public class MyBorder extends Bitmap[Embed(source=”/images/image/png”), ‣ No scale 9, BitmapscaleGridLeft=10, scaleGridTop=10,scaleGridRight=220,scaleGridBottom=320)]public class MyBorder extends Sprite

SCALE 9[Embed(source=”/images/image.png”)]public class MyBorder extends Bitmap[Embed(source=”/images/image/png”), ‣ No scale 9, BitmapscaleGridLeft=10, scaleGridTop=10, ‣ Scale 9 rect, SpritescaleGridRight=220,scaleGridBottom=320)]public class MyBorder extends Sprite

MASKS ‣ Mask visually clips the graphic

MASKS ‣ Mask visually clips the graphic ‣ area is still rendered by Flash Player

MASKS ‣ Mask visually clips the graphic ‣ area is still rendered by Flash Player ‣ [show mask FLA]

SWF IMAGE BASICS

SWF IMAGE BASICS ‣ Base classes

SWF IMAGE BASICS ‣ Base classes ‣ Transformations

SWF IMAGE BASICS ‣ Base classes ‣ Transformations ‣ GPU

SWF IMAGE BASICS ‣ Base classes ‣ Transformations ‣ GPU ‣ Filters

flash.display.shape

flash.display.shape ‣ Shape

flash.display.shape ‣ Shape ‣ vector

flash.display.shape ‣ Shape ‣ vector ‣ low-overhead

flash.display.shape ‣ Shape ‣ vector ‣ low-overhead ‣ no interactions (key, mouse)

flash.display.shape ‣ Shape ‣ vector ‣ low-overhead ‣ no interactions (key, mouse) ‣ for drawing, masks, debugging

flash.display.bitmap

flash.display.bitmap ‣ Bitmap

flash.display.bitmap ‣ Bitmap ‣ memory eater

flash.display.bitmap ‣ Bitmap ‣ memory eater ‣ no interactions

flash.display.bitmap ‣ Bitmap ‣ memory eater ‣ no interactions ‣ security implications in messing with pixels

flash.display.bitmap ‣ Bitmap ‣ memory eater ‣ no interactions ‣ security implications in messing with pixels ‣ GPU friends4evarrr!

flash.display.sprite

flash.display.sprite ‣ Sprite

flash.display.sprite ‣ Sprite ‣ container/compositor

flash.display.sprite ‣ Sprite ‣ container/compositor ‣ interactions

flash.display.sprite ‣ Sprite ‣ container/compositor ‣ interactions ‣ Bitmap with Scale 9 rect

flash.display.sprite ‣ Sprite ‣ container/compositor ‣ interactions ‣ Bitmap with Scale 9 rect ‣ MovieClip with 1 frame

transformations

transformations ‣x and y relative to container

transformations ‣x and y relative to container ‣ width and height are content measurements

transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height

transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point

transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point ‣ alpha is 0 - 255

transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point ‣ alpha is 0 - 255 ‣ visible is basically alpha 0

transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point ‣ alpha is 0 - 255 ‣ visible is basically alpha 0 ‣z is 3D plane

color transform

color transform ‣ changes color of object

gpu ‣ cacheAsBitmap = true

gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true

gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true ‣ inside <initialWindow> tag in your AIR descriptor XML

gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true ‣ inside <initialWindow> tag in your AIR descriptor XML ‣ <renderMode>gpu</renderMode>

gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true ‣ inside <initialWindow> tag in your AIR descriptor XML ‣ <renderMode>gpu</renderMode> ‣ [Lee’s blog]

filters

filters ‣ Drop Shadow

filters ‣ Drop Shadow ‣ Glow

filters ‣ Drop Shadow ‣ Glow ‣ Blur

filters ‣ Drop Shadow ‣ Glow ‣ Blur ‣ Bevel

filters ‣ Drop Shadow ‣ Glow ‣ Blur ‣ Bevel ‣ [show in Flash]

pixelbender

pixelbender ‣ PBJ

pixelbender ‣ PBJ ‣ Hydra

pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors

pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous

pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous ‣ uses GPU

pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous ‣ uses GPU ‣ multi-threading

pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous ‣ uses GPU ‣ multi-threading ‣ [FreshPic]

container formats

container formats ‣ PSD = Photoshop

container formats ‣ PSD = Photoshop ‣ AI = Illustrator

container formats ‣ PSD = Photoshop ‣ AI = Illustrator ‣ PNG = Fireworks

container formats ‣ PSD = Photoshop ‣ AI = Illustrator ‣ PNG = Fireworks ‣ FLA = Flash IDE

container formats ‣ PSD = Photoshop ‣ AI = Illustrator ‣ PNG = Fireworks ‣ FLA = Flash IDE ‣ TTF/OTF = fonts

CONVERSION

photoshop to air

photoshop to air ‣ [powerz comp to air]

fireworks comp to android

fireworks comp to android ‣ round trip w/ Flash IDE

fireworks comp to android ‣ round trip w/ Flash IDE ‣ [Android comp]

flash graphics packager

flash graphics packager ‣ vector scale 9

flash graphics packager ‣ vector scale 9 ‣ linking to swf assets

flash graphics packager ‣ vector scale 9 ‣ linking to swf assets ‣ sub-pixels

flash graphics packager ‣ vector scale 9 ‣ linking to swf assets ‣ sub-pixels ‣ [show SoundCloud Android package]

flash graphics packager ‣ vector scale 9 ‣ linking to swf assets ‣ sub-pixels ‣ [show SoundCloud Android package] ‣ [show NBA app]

IMPLEMENTATION

IMPLEMENTATION ‣ FLA that makes a SWC

IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project

IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project ‣ Components

IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project ‣ Components ‣ States

IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project ‣ Components ‣ States ‣ Skins

states

states ‣ DisplayList drawing capabilities

states

states ‣ elastic racetrack

states

states ‣ visible

states ‣ visible ‣ addChild/removeChild

states ‣ visible ‣ addChild/removeChild ‣ mask

states ‣ visible ‣ addChild/removeChild ‣ mask ‣ scrollRect

states ‣ visible ‣ addChild/removeChild ‣ mask ‣ scrollRect ‣ alpha

states: components vs. page/composition

states: components vs. page/composition ‣ states of components

states: components vs. page/composition ‣ states of components ‣ states of app

states: components vs. page/composition ‣ states of components ‣ states of app ‣ usually visual state

transitions

transitions ‣ change properties from state to state

transitions ‣ change properties from state to state ‣ Flex’ built in tweens

transitions ‣ change properties from state to state ‣ Flex’ built in tweens ‣ careful with alphas/rotations/fonts

transitions ‣ change properties from state to state ‣ Flex’ built in tweens ‣ careful with alphas/rotations/fonts ‣ order insanity ﬂaw

states

states ‣ [video recorder app]

SKINS: WEB & DESKTOP

SKINS: WEB & DESKTOP ‣ Component: logic & shiz

SKINS: WEB & DESKTOP ‣ Component: logic & shiz ‣ Skin: what you see

WHY SKINS?

WHY SKINS? ‣ ...here it comes...

WHY SKINS? ‣ ...here it comes... ‣ CSS only

WHY SKINS? ‣ ...here it comes... ‣ CSS only ‣ set skin parts

WHY SKINS? ‣ ...here it comes... ‣ CSS only ‣ set skin parts ‣ programmatic skins

WHY SKINS? ‣ ...here it comes... ‣ CSS only ‣ set skin parts ‣ programmatic skins ‣ Flash

SKIN ANATOMY

SKIN ANATOMY ‣ Skin Class

SKIN ANATOMY ‣ Skin Class ‣ SkinPart

SKIN ANATOMY ‣ Skin Class ‣ SkinPart ‣ SkinState

SKIN ANATOMY ‣ Skin Class ‣ SkinPart ‣ SkinState ‣ [show Neybor/Skins]

MOBILE SKINS

MOBILE SKINS ‣ ActionScript only

MOBILE SKINS ‣ ActionScript only ‣ extend MobileSkin vs. SparkSkin

MOBILE SKINS ‣ ActionScript only ‣ extend MobileSkin vs. SparkSkin ‣ no SkinsStates

MOBILE FUNDAMENTALS <s:ViewNavigatorApplication applicationDPI="320">

MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320">

MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320"> ‣ applicationDPI

MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320"> ‣ applicationDPI ‣ resolution

MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320"> ‣ applicationDPI ‣ resolution ‣ Capabilities.screenDPI

MOBILE FUNDAMENTALS

MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource

MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource ‣ 160: < 200

MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource ‣ 160: < 200 ‣ 240: >=200 and <280

MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource ‣ 160: < 200 ‣ 240: >=200 and <280 ‣ 320: >=280

STAGE.QUALITY POWAH

STAGE.QUALITY POWAH ‣ stage.quality = LOW

STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp!

STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED

STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise

STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise ‣ stage.quality = HIGH

STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise ‣ stage.quality = HIGH ‣ default

STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise ‣ stage.quality = HIGH ‣ default ‣ stage.quality = BEST.. NOOoOOo

STAGE.QUALITY EXAMPLE

STAGE.QUALITY EXAMPLE ‣ LOW vs. MED

SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }}/* IOS only @ 240dpi */@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; }}

SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }} ‣ set applicationDPI, Flex’ll scale/* IOS only @ 240dpi */@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; }}

SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }} ‣ set applicationDPI, Flex’ll scale/* IOS only @ 240dpi */ ‣ don’t set, you scale@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; }}

SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }} ‣ set applicationDPI, Flex’ll scale/* IOS only @ 240dpi */ ‣ don’t set, you scale@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { ‣ ﬁne tune with @media rules fontSize: 11; }}

MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> </s:source> </s:Image>

MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" ‣1 bitmap for each DPI source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> </s:source> </s:Image>

MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" ‣1 bitmap for each DPI source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> ‣ applicationDPI </s:source> </s:Image>

MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" ‣1 bitmap for each DPI source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> ‣ applicationDPI </s:source> </s:Image> ‣ DPIClassiﬁcation.DPI_240, etc.

BITMAP MANUAL SCALING

BITMAP MANUAL SCALING ‣ [CombOver]

conclusions

conclusions ‣ Ask Questions w/Designers

conclusions ‣ Ask Questions w/Designers ‣ Break up in Photoshop/Fireworks

conclusions ‣ Ask Questions w/Designers ‣ Break up in Photoshop/Fireworks ‣ Package all assets in Flash

conclusions ‣ Ask Questions w/Designers ‣ Break up in Photoshop/Fireworks ‣ Package all assets in Flash ‣ Create Flex Skins in Library Project

conclusions

conclusions ‣ Bitmap | Vector

conclusions ‣ Bitmap | Vector ‣ Web vs Desktop vs Mobile

conclusions ‣ Bitmap | Vector ‣ Web vs Desktop vs Mobile ‣ Designer Capabilities

conclusions ‣ Bitmap | Vector ‣ Web vs Desktop vs Mobile ‣ Designer Capabilities ‣ Developer Capabilities

conclusions

conclusions ‣ Recognize what tools you’ll need

conclusions ‣ Recognize what tools you’ll need ‣ Photoshop

conclusions ‣ Recognize what tools you’ll need ‣ Photoshop ‣ Flash

conclusions ‣ Recognize what tools you’ll need ‣ Photoshop ‣ Flash ‣ Flash Builder

end. questions?

end. questions? ‣ Jesse Warden

end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant

end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant ‣ Email: jessew@webappsolution.com

end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant ‣ Email: jessew@webappsolution.com ‣ Twittah: @jesterxl

end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant ‣ Email: jessew@webappsolution.com ‣ Twittah: @jesterxl ‣ Blog: http://jessewarden.com

http://jessewarden.com	1760
http://richmediatemple.com	5
http://www.richmediatemple.com	4
http://www.netvibes.com	4
http://dev.jessewarden.com	2
http://webcache.googleusercontent.com	2
http://feeds.feedburner.com	2
file://	1
http://translate.googleusercontent.com	1
http://protopage.com	1

Getting Complex Designs into Flex - FITC 2011

by Jesse Warden on Jun 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 1,782

Statistics

Getting Complex Designs into Flex - FITC 2011 — Presentation Transcript