Přejít k navigační liště

Zdroják » Různé » Převádíme Flash do HTML5

Převádíme Flash do HTML5

Články Různé

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.

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.

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
none_

Že by ta zlá firma Adobe sama podporovala HTML5? To musí být pro spoustu místních lidí silná rána.:)

Borek Bernard

Krátký, přehledný a informacemi nabitý článek – díky!

Erender

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.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.