Preparing Data for Performance-Critical Apps in Flash (and HTML)

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Preparing Data for Performance-Critical Apps in Flash (and HTML) Václav Vančura September 2009 @vancura

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Václav Vančura / FALANXIA ● Illustrator who started to code ● Currently GUI designer and coder ● Developing Facebook games in Falanxia ● Tweaking Unity games by night ● @vancura, vaclav.vancura.org

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why to bother to optimize? ➍ Optimization basics ➎ Testing & profiling ➏ Advanced optimization ➐ Falanxia loves Github Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Static images Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Benefits OF STATIC IMAGES ● Easy to create and maintain ● A lot of apps ● A lot of formats But Flash Player internally knows just a few ● Established and proven algorithms Except recent Internet Explorer PNG exploit Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Disadvantages OF STATIC IMAGES ● PNG Lossless but large ● JPEG No transparency but small (and lossy) JPEG transparency is our new project ● Embedding in AS3 [Embed(source="/path/to/asset.png", compression="true", quality="90")] Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Marginal or outdated file formats OF STATIC IMAGES ● MNG Basically an animated PNG ● JPEG2000 Better (fractal) compression ● GIF, BMP, PCX Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Sprites & MovieClips IN FLASH Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Benefits OF SPRITES & MOVIECLIPS ● Easy to create ● Rendering speed ● Transparency & dynamic blending modes Multiply, Screen, Overlay, … ● Dynamic effects Filters like drop shadow, glow, blur, bevel, … ● Vector Better scaling Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Disadvantages OF SPRITES & MOVIECLIPS ● Problematic compilation Needs Flash IDE (or Illustrator, kind of) ● Difficult to maintain Hard to change structure once it’s done ● Compiler strips out AS3 code ● Vector Problems with bitmaps, antialiasing Pixel perfection is painful Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Sound and Music IN HTML5 & FLASH Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Features OF SOUND IN FLASH ● Painless implementation ● Selective compression ● Dynamic sound AS3/FP10 ● Only 32 sound channels at once ● Compilation problems Windows (!) Flash IDE is actually a must. Haxe is a solution, but is painful to set up. http://haxe.org Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Music ● Still only MP3 OGG Vorbis in Flash (and HTML) is a lot of work (mainly because of Alchemy) ● Multitracks & sequencers Procedural realtime mixing ● Trackers MOD, S3M, XM, IT etc. Unity 3 now has tracker support Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 CFXR ● Awesome tool when you need retro sounds http://thirdcog.eu/apps/cfxr ● Sonoport http://www.sonoport.com

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Video IN HTML5 & FLASH Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Video in HTML5 ● Speed Using GPU ● Cross-platform Desktop, mobile OS ● But too many formats WebM, MP4/H.264, OGG Theora Flash fallback ● Very difficult to encode ● No streaming so far Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Video in Flash ● Formats FLV (Sorenson Spark / FLP 6+, ON2 VP6 / FLP 8+), F4V (H.264 / FLP9+) ● Painless implementation in Flash ● Streaming with Flash Media Server Streaming from camera And alternatives: Wowza Media Server, Red5 ● DRM ● Transparency via VP6 ● Encoding via FFmpeg and Adobe Media Encoder ● But CPU hog Flash Player 10.1 brings some optimizations (~30 %) Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Fonts IN HTML5 & FLASH Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Fonts in HTML5 ● Google Font API http://code.google.com/intl/cs/apis/webfonts ● TypeKit http://typekit.com ● sIFR http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement ● Cufón http://cufon.shoqolate.com The only solution if you need accented glyphs Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Fonts in Flash ● Antialiasing tweaking Lovely feature for pixel perverts like me ● Optimization of fonts UTF8 subset and simple fonts ● Problems with accented characters and locale It’s hard and expensive to find the right font Data basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why to bother to optimize? ➍ Optimization basics ➎ Testing & Profiling ➏ Advanced optimization ➐ Falanxia loves Github Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Scale9 ● Elemental slicing method ● Adobe Flash: vector scale9 only ● ScaleBitmap http://www.bytearray.org/?p=1206 Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Atlas Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF ATLAS Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Benefits OF ATLAS ● Speed When rendering to one and only BitmapData ● Easy to create Easy to split and combine when using scripts ● Crossplatform HTML/CSS Cocos2D, Sparrow Pro games: PlayStation, XBOX Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Disadvantages OF ATLAS ● Speed When using multiple BitmapDatas ● Somewhat difficult to maintain without scripting ● No layers Redundant compression of all pixels in each frame ● Update from one place Use only single Event.ENTER_FRAME Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 GUI Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Benefits OF FLEX WIDGETS ● Flash Builder As WYSIWYG editor ● A lot of coders Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Disadvantages OF FLEX WIDGETS ● Data hog Button + edit box + dropdown = 50 kB ● Speed hog Slow rendering and no caching ● Not pixel perfect Vectors everywhere Pixel hinting glitches when animating ● Difficult and slow animation ● Painful skinning ● Impossible 3D Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 3rd party widgets ● Liquid Components http://j.mp/liquid-components Difficult skinning, data hog ● Yahoo Astra Components http://j.mp/yahoo-astra-components Data hog ● Bit Components http://j.mp/bit-components License issues ● Minimal Components http://j.mp/minimal-components No skinning (currently a few skins available) Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Falanxia widgets FEATURES ● Easy skinning Skinning without Flash, fully open source workflow ● Pixel perfect animation Inspired by CoreAnimation technology ● Optimized for size ~30 kB ● Optimized for speed ● Data loading via providers SWF, FAR, Librarium Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF BARS Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF BUTTONS Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF GLYPHS Advanced data production

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why to bother to optimize? ➍ Optimization basics ➎ Testing & Profiling ➏ Advanced optimization ➐ Falanxia loves Github Why to bother to optimize?

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Why to bother TO OPTIMIZE? ● Impatient user User hates waiting – and usually has a crappy computer ● CPU CPU hates being hot ● Memory Memory hates being full ● Server and bandwidth Making a world better place ● Progressive loading It’s always better when the user is able to do something during loading Why to bother to optimize?

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why bother with optimizations? ➍ Optimization basics ➎ Testing & Profiling ➏ Advanced optimization ➐ Falanxia loves Github Optimization basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Runtime RECYCLATION ● GUI prefabs ● Textures ● Game elements ● Avatars ● Skins ● Subcomponents Optimization basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Filesystem OPTIMIZATIONS ● Less server requests ● Better compression ● Better data maintenance ● But recompression on a change needed Possible to handle server-side ● ZIP, FAR (Flash Archive), Librarium Optimization basics

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why bother with optimizations? ➍ Optimization basics ➎ Testing & Profiling ➏ Advanced optimization ➐ Falanxia loves Github Testing & Proﬁling

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Testing & Profiling ● A slower computer Even better with OSX ● Debug vs. Release Flash Player ● Flash profiling Flash Builder, FDT Enterprise, FlashPreloadProfiler http://jpauclair.net/flashpreloadprofiler ● mm.cfg http://jpauclair.net/2010/02/10/mmcfg-treasure Testing & Profiling

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Charles Proxy http://vaclav.vancura.org/aplikace-1-charles Testing & Proﬁling

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why bother with optimizations? ➍ Optimization basics ➎ Testing & Profiling ➏ Advanced optimization ➐ Falanxia loves Github Advanced optimization

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Image Optimization ● It’s better to have fewer colors ● Posterization Client or server-side ● Procedural effects in Flash Noise, gradients, … ● Runtime layer simulation Possible combination of JPEG and PNG But don’t hold your breath: Flash has a layer count limit ● Photoshop problems Beware the color profiles and dithering Advanced optimization

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Masking JPEGs ● Masking JPEG + vector in Flash ● Flash IDE needed ● Banners! Advanced optimization

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ImageOptim ● PNG, GIF & JPEG optimization Look at the screenshot Advanced optimization

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ImageMagick ● Join images vertically, bottom aligned convert -background transparent -gravity south NWimg.png NEimg2.png SEimg3.png SWimg3.png +append output.png ● Join images into an atlas convert -background transparent -gravity south $(ls -1 *.png) +append output.png ● Split atlas into a list of files convert -crop 22x34 +repage -background transparent altas_image.png frame_%02d.png Advanced optimization

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Splitting Files ● Browsers have a cache limit per file It’s safe to consider 1 MB as a hard limit However Chrome is able to cache larger files Advanced optimization

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ➊ Data basics ➋ Advanced data production ➌ Why bother with optimizations? ➍ Optimization basics ➎ Testing & Profiling ➏ Advanced optimization ➐ Falanxia loves Github Falanxia loves Github

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Github Projects ● Moderatrix http://github.com/falanxia/moderatrix ● Emitor http://github.com/falanxia/emitor ● Utilitaris http://github.com/falanxia/utilitaris Falanxia loves Github

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Thanks. Questions? vaclav@vancura.org @vancura Play Bzoonk Bar at http://apps.facebook.com/bzoonkbar ❧ Icons: Flurry System by the Iconfactory (http://iconfactory.com/freeware/preview/flrs) @vancura

Preparing Data for Performance-Critical Apps in Flash (and HTML)

by Vaclav Vancura

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 59

Statistics