vancura-as3-libs

Jak na skinovanéuživatelské prostředíbez Flexu.Václav VančuraProsinec 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

Komponenty, ovládací prvky.Involver Player a další projekty využívající mé AS3 knihovny.A nakonec si dáme malý workshop.

O čem budu mluvit?


Involver Media PlayerInvolver / Sideshow

Všechno to začalo

na Kypru


Jaké bylo zadání?

Vlastní skiny

Které může kdokoliv vytvářet nebo upravovat, bez nutnostiprogramování jediné řádky kódua bez rekompilace playeru.

Color theming

Rychlá úprava vizuálu změnou barevnosti jednotlivých layerů,ze kterých je skin složen.

Pluginy

Pluginy může opět dělatkdokoliv se znalostí AS3.

Animace změn v GUI

Všichni si ujíždějí na iPhone.

Další

vizte j.mp/involver


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.


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 oniještě nikdo neudělal a že budou lepší.Jsem jedním z nich.


Adobe Flex a Flash?

Datová náročnost?

Jen umístění tlačítka, editačního pole, slideru a dropdownuzpů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časdělá paseku. Obzvláště při animaci. Na druhou stranu jsounezávislé na DPI, neboť jsou vektorové.


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.


Adobe Flex a Flash?

Nebylo počítános použitím v 3D enginech.

Např. dropdown po aktivaci vyskakuje na stage a ne jako child samotné komponenty.My jsme 3D potřebovali.


3rd party komponentyLiquid Components

Nedají se jednoduše skinovat, poměrně veliký kód.

Yahoo Astra Components

Příliš velký kód.

Bit Components

Komerční, redistribuce zakázána.

Minimal Components

Ideální, ale jen jeden skin.

http://j.mp/liquid-components

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

http://j.mp/bit-components

http://j.mp/minimal-components










vancura-as3-libsVítejte do světa dalšího zbytečného balíku komponent!(mimo jiné)


Jednoduše skinovatelné

Kdokoliv může udělat nový skin, aniž by bylo potřeba zkompilovatSWF 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.

Vlastnosti mých komponent


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 diskunebo embedován jako součást samotné aplikace.

Další vlastnosti


Každý si může upravit skin, aniž by bylo nutno cokolivrekompilovat. 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ý.

Jednoduchá skinovatelnost.


Adobe Flash podporuje Scale9 jen u vektorů.

ScaleBitmap.as

Vysoce optimalizovaná třída pro renderování Scale9 bitmap.

Scale9

http://j.mp/scale-bitmap

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ů.




K dispozici jsou základní ovládací prvky,ze kterých je možné skládat metakomponenty.

Základní komponenty


Jádro každé komponenty

Zapouzření všech důležitých funkcí komponenty, eventů apod.

Widget


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.


Image

Obrázek.

Jakýkoliv složitější obrázek.

Jednoduchý statický obrázek je Glyph.

Užitečný pro ikony.


ButtonCore

Zapouzdření funkcí a eventů tlačítek.

StaticButton a ScaleButton


Label

Statický i editable.


CheckButton

Je složený ze dvou Buttonů.Dá se snadno použít jakoradio button.

GlyphButton

Složený ze tří Glyphů(out, hover a focus)a Buttonu.

LabelButton

Složený ze tří Labelůa jednoho Buttonu.

GlyphLabelButton

Složený ze tří Glyphů(out, hover, focus), tří Labelůa Buttonu.

InputBar

Složený z Baru a Labelu.


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.

Assets


Chunks

Chunky se používají na části skinu.

Např. CheckButton obsahuje dva chunky: ButtonOff a ButtonOn.


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á.


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.


K dispozici ihned.Repository je na GitHubu

Dokumentace

Příklady WIP.

http://j.mp/vancura-as3-libs-docs

http://github.com/vancura/vancura-as3-libs






Děkuji. A klidné svá[email protected]: vancura


mailto:[email protected]

mailto:[email protected]

vancura-as3-libs

Technology

Transcript of vancura-as3-libs