Loni na podzim představilo Adobe na konferenci Adobe MAX v rámci sneak peeks nástroj na převod flashových animací do HTML5, který se tento měsíc objevil na Adobe Labs s názvem „Wallaby“ jako experimentální technology preview (ke stažení zde).
Asi každého hned napadne řada otázek, co všechno Wallaby umí a na co všechno se dá použít. Je to jednoduché – je to nástroj hlavně pro grafiky a animátory na převod animací vytvořených na časové ose v Adobe Flash Pro CS5 do HTML5. Vygenerovaný kód pak následně můžete vzít a vložit do vašeho webu, případně doplnit o další interaktivitu.
Čili to, co vznikne, nemusí být (a asi ani nebude) finální produkt, ale jedná se spíš o polotovar nebo prvek, který už podle potřeb upravíte přímo v HTML kódu a zasadíte do finální kompozice na vašem webu. Díky Wallaby si tak můžete jednoduše připravit různé prvky pro vaše weby – od načítacího kolečka přes různé postavičky až po bannery či animované komiksy.
Podívejte se, jak Wallaby funguje:
Zkušební banner převedený do HTML5 (link):
Stáhněte si zdrojový FLA soubor a vyzkoušejte si konverzi pomocí Wallaby sami.
Komplikovanější banner a jeho SWF ekvivalent.
Jak již bylo zmíněno, Wallaby je nástroj spíš pro grafiky – nepřevádí ActionScript kód do JavaScriptu, jen funkci stop(). Všechny možnosti Wallaby jsou zmíněny zde. Wallaby používá pro renderování grafiky SVG, nikoliv Canvas – hlavním důvodem je lepší výkon vykreslování SVG v iOS WebKitu oproti Canvasu. Taky je potřeba brát v úvahu, že Wallaby je cíleno v tuto chvíli primárně na WebKitové browsery a pro animace používá -webkit prefix v CSS3.
Další projekty využívající Flash a HTML
Díky otevřenosti formátu SWF vznikla řada dalších zajímavých projektů:
Jangaroo
Pro převod ActionScriptu 3 do JavaScriptu můžete zkusit projekt Jangaroo. Podívejte se na výsledné aplikace. Ukázka Box2D Flash aplikace převedené do HTML5 JavaScriptu.
SmokeScreen
SmokeScreen je javascript wrapper, který umožňuje zobrazit SWF soubor v HTML5. Podívejte se na demo.
Gordon
Gordon je Flash runtime napsaný v JavaScriptu, který umožnuje zobrazit SWF soubor v HTML5. Více zde: https://github.com/tobeytailor/gordon
ScaleForm
Nesouvisí již s HTML5, ale určitě stojí za zmínku – jedná se o SWF player, který renderuje Flash kompletně na GPU, a sice tak, že veškerý obsah převede do trojúhelníků a textur. Používá se ve většině známých 3D her pro uživatelské prostředí, nicméně pomocí ScaleFormu můžete vytvářet i hry pro iOS či Android. Více na http://www.scaleform.com/
Další nástroje pro HTML5 od Adobe
Adobe pracuje na řadě nových nástrojů pro HTML5, některé jsou k dispozici na Adobe Labs:
Dreamweaver HTML5 Pack – podpora pro HTML5 v rámci Dreamweaveru
Illustrator HTML5 Pack – export vektorové grafiky do HTML5
Adobe „Edge“ Prototype – jedná se o nástroj pro přípravu HTML5 animací a interaktivních webů, interně používá standardní jQuery – podívejte se na Adobe Edge ve videu na Adobe TV
Adobe přispívá do WebKitu v oblasti typografie (video vylepšeného WebKitu) a také do jQuery Mobile
Dodatek – a co Flash?
Flash inovuje dál, po StageVideo akceleraci přidal v poslední době novou GPU akcelerovanou vrstvu s označením „Molehill“ – která slouží primárně pro 3D, ale i pro 2D. Podívejte se na video: http://blog.theflashblog.com/?p=2638. Lze tak očekávat, že se na webu a Facebooku brzy objeví množství pokročilých 3D her, které budou připomínat tituly dříve známé jen z desktopu.
Přehled komentářů