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:

Sneak peek z Adobe MAX 2010

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/tobeytai­lor/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.sca­leform.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

Wallaby je ke stažení zde.

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.the­flashblog.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.