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

O HTML5 se minulý rok velmi živě diskutovalo. Pokud jste se jej rozhodli začít používat jako náhradu za některé flashové animace, může vám přijít vhod dvojice tipů na nástroje umožňující automatizovaný převod z Flashe do HTML5.
reklama

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

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).

Google Swiffy

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

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.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru