preparing data for performance-critical apps in flash (and html)

@vancura

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

Preparing Data for Performance-CriticalApps in Flash (and HTML)Václav VančuraSeptember 2009

● Illustrator who started to code

● Currently GUI designer and coder

● Developing Facebook games in Falanxia

● Tweaking Unity games by night

● @vancura, vaclav.vancura.org

Václav Vančura / FALANXIA

➊ Data basics ➋ Advanced data production

➌ Why to bother to optimize?

➍ Optimization basics

➎ Testing & profiling

➏ Advanced optimization

➐ Falanxia loves Github

Data basics

Static images

Data basics

Benefits OF STATIC IMAGES

Data basics

● Easy to create and maintain

● A lot of apps

● A lot of formatsBut Flash Player internally knows just a few

● Established and proven algorithmsExcept recent Internet Explorer PNG exploit

Disadvantages OF STATIC IMAGES

Data basics

● PNGLossless but large

● JPEGNo transparency but small (and lossy)JPEG transparency is our new project

● Embedding in AS3[Embed(source="/path/to/asset.png", compression="true", quality="90")]

Marginal or outdatedfile formatsOF STATIC IMAGES

Data basics

● MNGBasically an animated PNG

● JPEG2000Better (fractal) compression

● GIF, BMP, PCX

Sprites & MovieClipsIN FLASH

Data basics

Benefits OF SPRITES & MOVIECLIPS

Data basics

● Easy to create

● Rendering speed

● Transparency & dynamic blending modesMultiply, Screen, Overlay, …

● Dynamic effectsFilters like drop shadow, glow, blur, bevel, …

● VectorBetter scaling

Disadvantages OF SPRITES & MOVIECLIPS

Data basics

● Problematic compilationNeeds Flash IDE (or Illustrator, kind of)

● Difficult to maintainHard to change structure once it’s done

● Compiler strips out AS3 code

● VectorProblems with bitmaps, antialiasingPixel perfection is painful

Sound and MusicIN HTML5 & FLASH

Data basics

Features OF SOUND IN FLASH

Data basics

● Painless implementation

● Selective compression

● Dynamic soundAS3/FP10

● Only 32 sound channels at once

● Compilation problemsWindows (!) Flash IDE is actually a must.Haxe is a solution, but is painful to set up. http://haxe.org

Data basics

● Still only MP3OGG Vorbis in Flash (and HTML) is a lot of work(mainly because of Alchemy)

● Multitracks & sequencersProcedural realtime mixing

● TrackersMOD, S3M, XM, IT etc.Unity 3 now has tracker support

● Awesome toolwhen you needretro sounds

● Sonoport

http://thirdcog.eu/apps/cfxr

http://www.sonoport.com

VideoIN HTML5 & FLASH

Data basics

Video in HTML5

Data basics

● SpeedUsing GPU

● Cross-platformDesktop, mobile OS

● But too many formatsWebM, MP4/H.264, OGG TheoraFlash fallback

● Very difficult to encode

● No streaming so far

Video in Flash

Data basics

● FormatsFLV (Sorenson Spark / FLP 6+, ON2 VP6 / FLP 8+), F4V (H.264 / FLP9+)

● Painless implementation in Flash

● Streaming with Flash Media ServerStreaming from cameraAnd alternatives: Wowza Media Server, Red5

● DRM

● Transparency via VP6

● Encoding via FFmpeg and Adobe Media Encoder

● But CPU hogFlash Player 10.1 brings some optimizations (~30 %)

FontsIN HTML5 & FLASH

Data basics

Fonts in HTML5

Data basics

● Google Font API

● TypeKit

● sIFR

● Cufón

The only solution if you need accented glyphs

http://code.google.com/intl/cs/apis/webfonts

http://typekit.com

http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement

http://cufon.shoqolate.com

Fonts in Flash

Data basics

● Antialiasing tweakingLovely feature for pixel perverts like me

● Optimization of fontsUTF8 subset and simple fonts

● Problems with accented characters and localeIt’s hard and expensive to find the right font

➊ Data basics

➋ Advanced data production ➌ Why to bother to optimize?

➎ Testing & Profiling

Advanced data production

Scale9

● Elemental slicing method

● Adobe Flash: vector scale9 only

● ScaleBitmap

http://www.bytearray.org/?p=1206

Examples OF ATLAS

Benefits OF ATLAS

● SpeedWhen rendering to one and only BitmapData

● Easy to createEasy to split and combine when using scripts

● CrossplatformHTML/CSSCocos2D, SparrowPro games: PlayStation, XBOX

Disadvantages OF ATLAS

● SpeedWhen using multiple BitmapDatas

● Somewhat difficult to maintain without scripting

● No layersRedundant compression of all pixels in each frame

● Update from one placeUse only single Event.ENTER_FRAME

Benefits OF FLEX WIDGETS

● Flash BuilderAs WYSIWYG editor

● A lot of coders

Disadvantages OF FLEX WIDGETS

● Data hogButton + edit box + dropdown = 50 kB

● Speed hogSlow rendering and no caching

● Not pixel perfectVectors everywherePixel hinting glitches when animating

● Difficult and slow animation

● Painful skinning

● Impossible 3D

3rd party widgets

● Liquid ComponentsDifficult skinning, data hog

● Yahoo Astra ComponentsData hog

● Bit ComponentsLicense issues

● Minimal ComponentsNo skinning (currently a few skins available)

http://j.mp/liquid-components

http://j.mp/yahoo-astra-components

http://j.mp/bit-components

http://j.mp/minimal-components

Falanxia widgets FEATURES

● Easy skinningSkinning without Flash, fully open source workflow

● Pixel perfect animationInspired by CoreAnimation technology

● Optimized for size~30 kB

● Optimized for speed

● Data loading via providersSWF, FAR, Librarium

Examples OF BARS

Examples OF BUTTONS

Examples OF GLYPHS

➊ Data basics

➋ Advanced data production

➌ Why to bother to optimize? ➍ Optimization basics

Why to bother to optimize?

Why to bother TO OPTIMIZE?

● Impatient userUser hates waiting – and usually has a crappy computer

● CPUCPU hates being hot

● MemoryMemory hates being full

● Server and bandwidthMaking a world better place

● Progressive loadingIt’s always better when the user is able to do something during loading

Why to bother to optimize?

➊ Data basics

➌ Why bother with optimizations?

➍ Optimization basics ➎ Testing & Profiling

Optimization basics

Runtime RECYCLATION

● GUI prefabs

● Textures

● Game elements

● Avatars

● Skins

● Subcomponents

Optimization basics

Filesystem OPTIMIZATIONS

● Less server requests

● Better compression

● Better data maintenance

● But recompression on a change neededPossible to handle server-side

● ZIP, FAR (Flash Archive), Librarium

Optimization basics

➊ Data basics

➎ Testing & Profiling ➏ Advanced optimization

Testing & Profiling

● A slower computerEven better with OSX

● Debug vs. Release Flash Player

● Flash profilingFlash Builder, FDT Enterprise, FlashPreloadProfiler

● mm.cfg

Testing & Profiling

http://jpauclair.net/flashpreloadprofiler

http://jpauclair.net/2010/02/10/mmcfg-treasure

Charles Proxy

Testing & Profiling

http://vaclav.vancura.org/aplikace-1-charles

Charles Proxy

Testing & Profiling

Charles Proxy

Testing & Profiling

Charles Proxy

Testing & Profiling

➊ Data basics

➏ Advanced optimization ➐ Falanxia loves Github

Advanced optimization

Image Optimization● It’s better to have fewer colors

● PosterizationClient or server-side

● Procedural effects in FlashNoise, gradients, …

● Runtime layer simulationPossible combination of JPEG and PNGBut don’t hold your breath:Flash has a layer count limit

● Photoshop problemsBeware the color profiles and dithering

Masking JPEGs

● Masking JPEG + vector in Flash

● Flash IDE needed

● Banners!

ImageOptim

● PNG, GIF & JPEG optimizationLook at the screenshot

ImageMagick

● Join images vertically, bottom aligned

● Join images into an atlas

● Split atlas into a list of files

convert -background transparent -gravity south NWimg.png NEimg2.png SEimg3.png SWimg3.png +append output.png

convert -background transparent -gravity south $(ls -1 *.png) +append output.png

convert -crop 22x34 +repage -background transparent altas_image.png frame_%02d.png

Splitting Files

● Browsers have a cache limit per fileIt’s safe to consider 1 MB as a hard limitHowever Chrome is able to cache larger files

➊ Data basics

Falanxia loves Github

Github Projects

● Moderatrix

● Emitor

● Utilitaris

Falanxia loves Github

http://github.com/falanxia/moderatrix

http://github.com/falanxia/emitor

http://github.com/falanxia/utilitaris

@vancura

Thanks.Questions?

Play Bzoonk Bar at

Icons: Flurry System by the Iconfactory (http://iconfactory.com/freeware/preview/flrs)

vaclav@vancura.org @vancura

http://apps.facebook.com/bzoonkbar

preparing data for performance-critical apps in flash (and html)

vancura webexpo

performancecritical

flash streaming

flash antialiasing

painful data basics

static images data basics

accented glyphs data

right font data basics

Technology

october 14th website homework analysis flash drive setup...

aptus user guide - leaf · 2013. 2. 28. · 10 chapter 2...

erstellen einer html-seite mit eingebetteten flash … ·...

flash html editor manual

html. basic html html document – html headings – to html...

why i stand with (adobe) flash - elearning roadtrip · the...

dlaczego html 5, a nie flash?

e web/flash graphic design guida html e utility web

flash objects in html

html in a flash world

Índice - autoescuela gongora...dreamweaver 8 30 dreamweaver...

o fim do flash - viva o html 5

html e flash

fim do flash e o impÉrio do html 5

flash 5 : introduction · flash mx : introduction flash est...

flash - dwuser.com...html application flash elements...

e web/flash graphic design guida html e utility web ·...

flip pdf flipbook publishing solution - create flash & html...

computergrafik ss 2014 oliver vornberger vorlesung vom...

civics flash cards - homepage | uscis of... · these civics...