Slidy k mé přednášce v Adobe.cz. UPDATE: Ke konci jsou videa, která byla v originální prezentaci. Slideshare má problémy s řazením médií, omlouvám se za chaos vzniklý prokladem slidů a videa.

1. Jak na skinované
uživatelské prostředí
bez Flexu.
Václav Vančura
Prosinec 2009
Pozn.: Z této verze prezentace byla odstraněna videa. Pokud je budete chtít vidět, napište
mi mail. Celkově ale měla jen prezentační charakter, nic světoborného bez čeho nemůžete
žít, věřte mi :]
čtvrtek, 17. prosince 2009

2. O čem budu mluvit?
Komponenty, ovládací prvky.
Involver Player a další projekty využívající mé AS3 knihovny.
A nakonec si dáme malý workshop.
čtvrtek, 17. prosince 2009

3. Všechno to
začalo
na Kypru
Involver Media Player
Involver / Sideshow
čtvrtek, 17. prosince 2009

4. Jaké bylo zadání?
Vlastní skiny Pluginy
Které může kdokoliv vytvářet nebo Pluginy může opět dělat
upravovat, bez nutnosti kdokoliv se znalostí AS3.
programování jediné řádky kódu
a bez rekompilace playeru.
Animace změn v GUI
Color theming Všichni si ujíždějí na iPhone.
Rychlá úprava vizuálu změnou
barevnosti jednotlivých layerů, Další
ze kterých je skin složen.
vizte j.mp/involver
čtvrtek, 17. prosince 2009

5. Technologická omezení
Datové limity
Přehrávač na web se musí rychle načíst.
A musí být malý – i kvůli zatížení serveru.
Rychlost počítače
Děláme přehrávač pro lidi.
Pluginy musí být maličké
Max. 10 kB na plugin. Průměrně se aktivuje 8 pluginů.
Komponenty musí být renderovány jádrem, žádné zázraky se do 10 kB nevejdou.
čtvrtek, 17. prosince 2009

6. Co jsem na komponenty
použít mohl, ale nepoužil.
Samozřejmě, že internet je plný lidí,
kteří si myslí, že to co chtějí udělat oni
ještě nikdo neudělal a že budou lepší.
Jsem jedním z nich.
čtvrtek, 17. prosince 2009

7. Adobe Flex a Flash?
Datová náročnost?
Jen umístění tlačítka, editačního pole, slideru a dropdownu
způsobí SWF o velikosti téměř 50 kB.
Rychlost?
Flashové komponenty se necachují a pomalu se vykreslují.
Problémy s přesností na pixely?
Flashové komponenty jsou vektorové a jejich pixel hinting občas
dělá paseku. Obzvláště při animaci. Na druhou stranu jsou
nezávislé na DPI, neboť jsou vektorové.
čtvrtek, 17. prosince 2009

8. Adobe Flex a Flash?
Animace?
Kdo by potřeboval animovat formulářová políčka?
Složité skinování?
Skiny nelze dynamicky načítat bez nutnosti rekompilace SWF.
Adobe Catalyst ještě v roce 2007 neexistoval.
čtvrtek, 17. prosince 2009

9. Adobe Flex a Flash?
Nebylo počítáno
s použitím v 3D enginech.
Např. dropdown po aktivaci
vyskakuje na stage a ne jako child
samotné komponenty.
My jsme 3D potřebovali.
čtvrtek, 17. prosince 2009

10. 3rd party komponenty
Liquid Components http://j.mp/liquid-components
Nedají se jednoduše skinovat, poměrně veliký kód.
Yahoo Astra Components http://j.mp/yahoo-astra-components
Příliš velký kód.
Bit Components http://j.mp/bit-components
Komerční, redistribuce zakázána.
Minimal Components http://j.mp/minimal-components
Ideální, ale jen jeden skin.
čtvrtek, 17. prosince 2009

11. vancura-as3-libs
Vítejte do světa dalšího zbytečného balíku komponent!
(mimo jiné)
čtvrtek, 17. prosince 2009

12. Vlastnosti mých komponent
Jednoduše skinovatelné
Kdokoliv může udělat nový skin, aniž by bylo potřeba zkompilovat
SWF se skinem nebo samotnou aplikaci. Není tedy potřeba Flash.
Kompletní workflow může být open source.
Theming
Skiny je možno dobarvovat podle potřeb – a realtime!
Animovatelnost
Každý prvek může být plynule animován (použita knihovna TweenLite).
Základní balík minimálních komponent
Všechny složitější ovládací prvky jsou složeny ze základních komponent.
čtvrtek, 17. prosince 2009

13. Další vlastnosti
Několik důležitých metakopoment.
GlyphButton, EditBar apod.
Optimalizace na velikost.
Zkompilováno pod 30 kB.
Optimalizace na rychlost.
Použití cacheAsBitmap kde je to možné. Precizní práce s pamětí.
Načítání assets z různých zdrojů.
Skin může být uložen v SWF, FAR, přímo na disku
nebo embedován jako součást samotné aplikace.
čtvrtek, 17. prosince 2009

14. Jednoduchá skinovatelnost.
Každý si může upravit skin, aniž by bylo nutno cokoliv
rekompilovat. Není potřeba Flash ani Flex, zdrojové
obrázky je možné vytvořit v open source grafických editorech.
Společně s využitím Adobe Flex SDK je tedy celý workflow otevřený.
čtvrtek, 17. prosince 2009

15. Scale9
Základní skinovací postup
Všechny bitmapy, ze kterých jsou složeny komponenty určené k změně velikosti
(Buttony, Bary apod.) jsou složeny z tzv. spritů, rozřezaných na devět dílů.
Adobe Flash podporuje
Scale9 jen u vektorů.
ScaleBitmap.as
Vysoce optimalizovaná třída pro
renderování Scale9 bitmap.
http://j.mp/scale-bitmap
čtvrtek, 17. prosince 2009

16. Základní komponenty
K dispozici jsou základní ovládací prvky,
ze kterých je možné skládat metakomponenty.
čtvrtek, 17. prosince 2009

17. Widget
Jádro každé komponenty
Zapouzření všech důležitých funkcí komponenty, eventů apod.
čtvrtek, 17. prosince 2009

18. Bar
Pruh, který se dá libovolně plynule zvětšovat.
Z Baru je sestavena spousta dalších metakomponent, jako např. InputBar.
Je užitečný na vytváření panelů, progress barů apod.
čtvrtek, 17. prosince 2009

19. Image
Obrázek.
Jakýkoliv složitější obrázek.
Jednoduchý statický obrázek je Glyph.
Užitečný pro ikony.
čtvrtek, 17. prosince 2009

20. ButtonCore
Zapouzdření funkcí a eventů tlačítek.
StaticButton a ScaleButton
čtvrtek, 17. prosince 2009

21. Label
Statický i editable.
čtvrtek, 17. prosince 2009

22. CheckButton GlyphLabelButton
Je složený ze dvou Buttonů. Složený ze tří Glyphů
Dá se snadno použít jako (out, hover, focus), tří Labelů
radio button. a Buttonu.
GlyphButton InputBar
Složený ze tří Glyphů Složený z Baru a Labelu.
(out, hover a focus)
a Buttonu.
LabelButton
Složený ze tří Labelů
a jednoho Buttonu.
čtvrtek, 17. prosince 2009

23. Assets
Zdroje se dají načítat z různých míst.
z SWF, FARu a interně z obrázku nebo MovieClipu.
AssetManager
Používá providery.
čtvrtek, 17. prosince 2009

24. Chunks
Chunky se používají na části skinu.
Např. CheckButton obsahuje dva chunky: ButtonOff a ButtonOn.
čtvrtek, 17. prosince 2009

25. FAR?
Flash Archive.
Flash 9 can decompress ZLIB compressed arrays of bytes. However, such arrays
must be postfixed with an Adler32 checksum. Regular ZIP files don't carry such
checksums, and thus ZIP files aren't readable by Flash. (...) The FAR file format
is somewhat similar to the ZIP format. It also uses ZLIB compression, but instead
of using CRC32 check-sums it uses Adler32 so it is 'natively' readable by Flash
9. Additionally, FAR offers control over what files are put first in the archive so
important files get streamed in to Flash before the less important ones do.
Progresivní načítání assetů.
Je možné s nimi pracovat ještě před kompletním načtením aplikace.
Komprese.
Je to vlastně ZIP, proto je práce s nimi naprosto přirozená.
čtvrtek, 17. prosince 2009

26. Proč FAR?
Flex compiler má nedokonalý Embed tag.
Není možné nastavit kompresi, MXMLC si ji nastavuje jak uzná za vhodné.
Průhledné PNG občas shazují kompilátor.
Flash.
Nikdo kdo chce rozumně pracovat s Flashem nedělá ve Flashi.
Obzvlášť na Macu.
čtvrtek, 17. prosince 2009

27. K dispozici ihned.
Repository je na GitHubu http://github.com/vancura/vancura-as3-libs
Dokumentace http://j.mp/vancura-as3-libs-docs
Příklady WIP.
čtvrtek, 17. prosince 2009

28. Děkuji. A klidné svátky!
vaclav.vancura.org
vaclav@vancura.org
twitter: vancura
čtvrtek, 17. prosince 2009