Převádíme Flash do HTML5
Nástroj „Wallaby“ od Adobe umožňuje převádět FLA soubory do HTML5, což se může hodit zejména grafikům a animátorům, kteří cílí svůj animovaný obsah na iOS. Článek vás seznámí i s dalšími možnostmi převodu. Pojďme se podívat, jak na to.
Nálepky:
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.
Že by ta zlá firma Adobe sama podporovala HTML5? To musí být pro spoustu místních lidí silná rána.:)
Krátký, přehledný a informacemi nabitý článek – díky!
Zdravim vsetkych, predovsetkym autora clanku Toma. Mal by som taku jednu otazocku. Ja osobne som velkym fandom frameworku Flex od Adobe. Technologia ako taka sa mi paci, podla mojich skusenosti sa v tom lahko robia formularove aplikacie atd. Co mi je ale trosku luto a na co casto narazam, je fakt, ze Flash player, ktory je pouzity ako run-time prostredie pre Flexovu aplikaciu je vo vseobecnosti povazovany za nedoverihodny. Podla mna jeto vela skoda, pretoze je to naprosto univerzalne behove prostreedie, ktore funguje na vsetkych platformach. V diskusiach a aj niektorych clankoch casto citam, ako sa ludia stazuju na flash, lebo vytazuje PC, a je to pomale a kopa dalsich veci. Ludia si casto neuvedomuju, ze aplikacia je taka dobra / zla, ako ju naprogramuje programator. Nema Adobe v zaujme trosku vylepsit svetlo flashu v ociach uzivatelov?
Dalej by ma zaujimalo, ako Tome vidis buducnost Flexu, ako jedneho z frameworkov pre RIA? Mne sa nejako zda, ze je vo svete najpouzivanejsim a najospevovanejsim AJAX, aj ked si myslim, ze Flex nie je o nic horsi. Ved uz aj niektore banky riesia svoj IB na tejto technologii.
Zrejme som Flex pozitiv.
Dik za info a drzim palce.