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




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




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




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




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




       Benefits OF STATIC I...
Preparing Data for Performance-Critical Apps in Flash (and HTML)                  @vancura — WebExpo 2010




       Disad...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Marginal or outdated...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




       Benefits OF SPRITES ...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Disadvantages OF SPR...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




       Fe...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Music

       ● Stil...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       CFXR

       ● Aweso...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




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




       Video in Flas...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




       Fonts in...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Fonts in Flash

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




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




       Scale9



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




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




       Examples OF ATLAS


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




       Examples OF ATLAS


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




       Benefits OF ATLAS

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




       Disadvantages OF ATL...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




       Benefits OF FLEX WID...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Disadvantages OF FLE...
Preparing Data for Performance-Critical Apps in Flash (and HTML)                             @vancura — WebExpo 2010




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




       Falanxia widgets FEA...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Examples OF BARS



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




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




       Examples OF GLYPHS

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




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




       Why to bother...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




       Runtime RECYCLATION
...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Filesystem OPTIMIZAT...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




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




       Testing ...
Preparing Data for Performance-Critical Apps in Flash (and HTML)                             @vancura — WebExpo 2010




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




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




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




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




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




       Image Optimization
 ...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Masking JPEGs


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




       ImageOptim



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




       ImageMagi...
Preparing Data for Performance-Critical Apps in Flash (and HTML)   @vancura — WebExpo 2010




       Splitting Files


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




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




       Github Projects

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




       Tha...
Upcoming SlideShare
Loading in …5
×

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

1,999 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,999
On SlideShare
0
From Embeds
0
Number of Embeds
113
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Static images Data basics
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Sprites & MovieClips IN FLASH Data basics
  9. 9. 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
  10. 10. 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
  11. 11. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Sound and Music IN HTML5 & FLASH Data basics
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Video IN HTML5 & FLASH Data basics
  16. 16. 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
  17. 17. 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
  18. 18. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Fonts IN HTML5 & FLASH Data basics
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Atlas Advanced data production
  24. 24. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF ATLAS Advanced data production
  25. 25. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF ATLAS Advanced data production
  26. 26. 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
  27. 27. 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
  28. 28. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 GUI Advanced data production
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF BARS Advanced data production
  34. 34. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF BUTTONS Advanced data production
  35. 35. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Examples OF GLYPHS Advanced data production
  36. 36. 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?
  37. 37. 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?
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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 & Profiling
  42. 42. 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
  43. 43. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Charles Proxy http://vaclav.vancura.org/aplikace-1-charles Testing & Profiling
  44. 44. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Charles Proxy http://vaclav.vancura.org/aplikace-1-charles Testing & Profiling
  45. 45. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Charles Proxy http://vaclav.vancura.org/aplikace-1-charles Testing & Profiling
  46. 46. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 Charles Proxy http://vaclav.vancura.org/aplikace-1-charles Testing & Profiling
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010 ImageOptim ● PNG, GIF & JPEG optimization Look at the screenshot Advanced optimization
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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

×