Tvořte animované bannery v HTML5 s Google Web Designerem

Vedle snadné implementace multimediálních souborů přináší nejnovější verze jazyka HTML také široké možnosti animace celé řady elementů.

Napsat lze třeba pojezdy a tříosé (chcete-li trojrozměrné) rotace textů, obrázků i celých bloků, a to jak lineární, skokové, tak i postupně zrychlující nebo zpomalující, dokonce i dle dynamického tempa.

Stejná kouzla lze provádět nejen s pozicí elementů, ale i s jejich barvou. Syntaxe není v zásadě složitá, ale…

S Google Web Designerem je to celé mnohem větší legrace

Program od společnosti Google (v době psaní tohoto článku stále ještě ve verzi beta) je navržený primárně k tvorbě animovaných bannerů v HTML5 a CSS3.

Vše přitom vytvoříte v uživatelsky velmi přívětivém grafickém prostředí, bez nutnosti napsat byť jediný řádek kódu výše zmíňovaných jazyků.

Do kódu však samozřejmě, pokud chcete, vstoupit můžete a občas se to i hodí, ale jak tvrdím, nutností to není.

Program má přednastavené standardní velikostí bannerů a můžete využít i něktrerou z předpřipravených šablon animacemi již hotovými.

Doporučuji však vytvořit si šablony bannerů vlastní, s Google Web Designerem je to opravdu hračka. Sledujte…

Tvoříme jednoduchou HTML5 animaci

Uživatelské prostředí Google Web Designeru

Google Web Designer včetně dokumentace získáte na oficální stránce projektu.
https://www.google.com/webdesigner/

Založte nový projekt a z hlavní nabídky vyberte File  Import assets a vložte tak do vašeho projektu dva různé obrázky. Držte se běžných webových formátů, jako jsou rastrové png, jpg nebo vektorový formát svg.

Gify nepoužívejte, i když je to technicky možné, nemá smysl vytvářet animaci v HTML5 a používat v ní gify.

V banneru máte nyní dva obrázkové elementy (v kódu dva HTML tagy img a k nim příslušné CSS třídy) měli byste je vidět i dole, vlevo od časové osy. Nad ní si povšimněte tlačítka play, slouží k přehrátí celé animace.

Obdobně vám poslouží tlačítko Preview vpravo nahoře. S tím rozdílem, že váš banner zobrazí rovnou ve výchozím webovém prohlížeči. Néjlépe je na tom s kompatibilitou v současné době samožrejmě Chrome (však je taky od Google).

Označte si oba elementy img a v panelu vlastností (Properties), který vidíte vpravo, zhruba uprostřed, jim nastavte šířku (W)výšku (H) na hodnotu 0 a oběma shodnou pozici, ideálně ve středu banneru. 

Pozice se nastavuje hned vedle šířky a výšky, definováním vzdálenosti na ose x a y, kde pozice 0;0 je v levém horním rohu banneru.

Časovou osu si přepněte ze základního zobrazení (Basic) na pokročilé (Advanced). Dělá se to tlačítkem, které se nachází nad osou vpravo nahoře.

Vyberte vlevo od časové osy jeden z obrázků, je jedno který, klikněte v ní pravým tlačítkem myši několik políček od jejího levého okraje (nad osou vidíte čas) a vložte do tohoto místa (resp. času) klíčový snímek (Insert keyframe)

Každému snímku lze nastavit styl animace, výchozí je vždy lineární, a celé ose jednoho elementu počet opakování od žádného, až po nekonečně mnoho, tak vznikne smyčka.

Pokud máte na časové ose označený tento nový  klíčový snímek (označený klíčový snímek je vždy oranžový, ostatní jsou světlé) vraťe se zpět k vlastnostem a nastavte obrázku jeho původní šířku a výšku a opět jej napozicujte tak, aby byl opticky ve středu banneru.

V případě, že se vám do banneru nevejde, nastavte rozměry klidně menší, jen dodržte správný poměr stran, aby se vám obrázek nerozpliznul.

Nyní klikněte na první klíčový snímek, na časové ose úplně vlevo u krajepak na tlačítko play. Pokud jste postupovali správně měl by se obrázek plynule z ničeho zvětšit na velikost, kterou jste mu nastavili.

Teď, když už víte jak, přidejte další snímek a tentokrát na něm obrázek zmenšete. Přejděte k druhému, resp. k tomu prvnímu, obrázku a v místě, kde končí animace toho prvního, vložte nový klíčový snímek.

O kousek dál na ose druhého obrázku vložte další klíčový snímek a celý postup zopakujte. Dosáhnete tak efektu, kdy se jeden obrázek plynule zvětší, pak se změnší opět na nulovou hodnotu a pak se na jeho místě zvětší a zase změnší obrázek jiný.

Zopakujete-li postup s více obrázky, dostáhnete velice pěkného, poutavého výsledku. Prohlédněte si tento snímek časové osy, která odpovídá přesně takové animaci.

První obrázek se zvětší, chvíli tak zůstane a pak se opět smrskne a zůstane smrsknutý až do konce celé animace. Než se první obrázek smrskne, zůstává smrsknutý druhý obrázek pak zopakuje postup toho prvního a to samé se děje i se třetím a nakonec i se čtvrtým obrázkem.

Animaci zacyklíte pokud všem čtyřem obrázkům nastavíte nekonečný počet opakování.

Tento postup můžete provádět i s dalšími elementy, kupříkladu s bloky (element div), nebo odstavci textu (element p). Elementy se vkládají přes Tag tool, na obrázku GUI úplně nahoře označeno modře, zde v detailu žlutě.

Obdobně se vytvářejí i pojezdy, rotace a změny barev. Jednoduše přidáte snímek, učiníte změnu, zvolíte styl této změny a program vytvoří příslušnou animaci.

I když je uživatelské rozhraní přehledné, pokud jste nikdy dříve animace  netvořili, může to vše působit zezačátku poněkud složitě.

Když tedy s něčím nebudete moct pohnout, obraťe se na mě v komentářích. Pokud to bude v mých silách, poradím vám.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

95 − 94 =