Převod Flashe do HTML5: Google Swiffy a Adobe Wallaby

HTML5 můžete brát jako novou podobu značkovacího jazyka HTML, který slouží pro popis struktury a obsahu webových stránek. V širším slova smyslu můžeme o HTML5 mluvit jako o technologii využívající kromě samotného HTML, také CSS3, vektorovou grafiku SVG, novou verzi JavaScriptu a několik dalších věcí. A právě tento širší kontext využívají dva jednoduché nástroje, které vám chci představit.

Jak Google Swiffy, tak projekt Wallaby od Adobe nejsou žhavé novinky. Ale věřím, že mnoho z vás o nich ještě neslyšelo, takže snad nebude na škodu se na ně podívat.

Jak převést Flash do HTML5 pomocí Google Swiffy

Google Swiffy je jednoduchá online aplikace běžící na adrese www.google.com/doubleclick/studio/swiffy. Je momentálně označována jako beta, je tedy otázkou, zda se posune do nějakého dalšího stádia, nebo zda ji Google časem pohřbí. Faktem je, že slouží jako pomůcka pro převod reklamních bannerů tvořených ve Flashi do HTML5.

Proč převádět reklamu z technologie Flash na HTML5? Důvodem je oslovení většího množství čtenářů. Stále více jich přistupuje na weby z mobilních prohlížečů nemajících podporu pro Flash a právě HTML5 je možností, jak jim reklamu zobrazit.

Použití Google Swiffy je velice jednoduché. Po načtení stránky vložte do formuláře stávající soubor ve formátu SWF. Pokračujte tlačítkem Upload and convert. Po nahrání souboru a chvilce zpracovávání na straně serveru dojde k zobrazení původní podoby flashové reklamy ze souboru SWF a její převedené verze, tentokrát coby stránky v HTML5 umístěné do <iframe>.

K dispozici je odkaz na zobrazení samostatné stránky s reklamou v HTML5, který můžete použít přes pravé tlačítko i k uložení souboru. Úspěšnost převodu můžete ověřit i na svém mobilním zařízení po ofocení nabídnutého QR kódu.

Google Swiffy s náhledy před a po převodu do HTML5

Původní animace v SWF je po převodu tvořena skutečně jen a pouze jedním souborem s příponou HTML. Na web ji můžete umístit klasicky pomocí nějakého iframu. Když se na vygenerovaný soubor kouknete, zjistíte, že jeho struktura skutečně odpovídá HTML5 a veškerá data související s animací jsou obsažena v jeho struktuře. Tedy, pomineme-li jeden skript načítaný externě ze serverů Google.

V souboru se kombinuje několik technik. V první řadě je tu samostatné HTML5. K obsluze animace slouží JavaScript. A samotná data? Google Swiffy je převádí do vektorového grafického formátu SVG zkombinovaného s klasickými rastrovými obrázky vypreparovanými z původního souboru SWF. Abyste si vystačili skutečně jen s jedním souborem HTML, jsou tyto obrázky umístěny do něj, a to pomocí binárního kódu zapsaného přímo ve struktuře stránky (jedna z novinek HTML5).

Kód HTML5 vygenerovaný pomocí Google Swiffy

Google Swiffy podporuje SWF8 a ActionScript 2.0. K převodu můžete nahrávat až 1 MB velké soubory. K dispozici je i rozšíření pro Adobe Flash Professional CS4 nabízející stejnou funkcionalitu.

Wallaby - převod Flashe do HTML5 od Adobe

Přestože Adobe stojí za Flashem, nemůže ignorovat narůstající sílu HTML5. Vznikl tak produkt s prozatím kódovým označením Wallaby. Tato aplikace slouží k převodu souborů vytvořených v programu Flash Professional (soubory ve formátu FLA) do HTML5. Wallaby je vytvořeno pro platformu Adobe Air a stáhnout si můžete instalátory pro Windows a pro Mac OS.

Aplikace samotná je podobně jednoduchá jako Google Swiffy. Po spuštění vyberete ve formuláři soubor FLA, který chcete převést do HTML5. Poté klepnete na tlačítko Convert a počkáte si na výsledek převodu. Ten i u jednoduchých animací trvá několik znatelných sekund. Po dokončení převodu vám ve zvoleném umístění vznikne soubor HTML a spolu s ním i několik souborů v JavaScriptu. Dále se vytvoří složka obsahující obrázky ve formátu SVG.

Adobe Wallaby

Abych pravdu řekl, trochu mi vadí, že Wallaby podporuje pouze soubor FLA z Flashe 5. Starší verze skončí při převodu do HTML5 chybovým hlášením. Převod není úplně stoprocentní, některé dynamické věci z ActionScriptu nefungují. Nejvíce mi ale vadí, že nedostanu jeden jediný soubor. Pro reklamu tento převaděč určitě použitelný není. Jelikož se ale jedná zatím o ranou vývojovou fázi, určitě bych mu dal šanci do budoucna.