vancura-as3-libs

758 views
735 views

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total views
758
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

vancura-as3-libs

  1. 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. 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. 3. Všechno to začalo na Kypru Involver Media Player Involver / Sideshow čtvrtek, 17. prosince 2009
  4. 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. 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. 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. 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. 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. 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. 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. 11. vancura-as3-libs Vítejte do světa dalšího zbytečného balíku komponent! (mimo jiné) čtvrtek, 17. prosince 2009
  12. 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. 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. 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. 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. 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. 17. Widget Jádro každé komponenty Zapouzření všech důležitých funkcí komponenty, eventů apod. čtvrtek, 17. prosince 2009
  18. 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. 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. 20. ButtonCore Zapouzdření funkcí a eventů tlačítek. StaticButton a ScaleButton čtvrtek, 17. prosince 2009
  21. 21. Label Statický i editable. čtvrtek, 17. prosince 2009
  22. 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. 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. 24. Chunks Chunky se používají na části skinu. Např. CheckButton obsahuje dva chunky: ButtonOff a ButtonOn. čtvrtek, 17. prosince 2009
  25. 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. 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. 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. 28. Děkuji. A klidné svátky! vaclav.vancura.org vaclav@vancura.org twitter: vancura čtvrtek, 17. prosince 2009

×