Jak na jednoduchý banner v Macromedia Fireworks

Snad každý tvůrce webů už někdy na svých stránkách použil animovaný banner ve formátu GIF. V tomto krátkém tutoriálu si ukážeme, jak takový banner jednoduše a rychle vytvořit pomocí programu Macromedia Fireworks 8. Tutoriál je určen především mírně pokročilým uživatelům.

Vytvořte si nový dokument o rozměrech 468×60 px. Nejprve si přejmenujte složku vrstev z „Layer 1“ na „Podklad“ a zároveň vytvořte složku novou, s názvem „Logo“. Přesuňte se na složku vrstev „Podklad“, kde vytvoříte podklad banneru podle obrázku.

Podklad banneru (plná velikost, cca 65 kB)

Nyní se přesuňte na složku vrstev „Logo“ a naimportujte logotyp, který budete animovat. Animace bude jednoduchá, spočívá pouze v otočení logotypu o 360° a přesunu logotypu z pravé strany na levou.

Vrstvy banneru

Označte si logotyp tak, aby bylo možné provést animaci. Potom vyberte z menu položku | Modify | Animation | Animate Selection | a zobrazí se vám okno Animate pro nastavení animace. Do pole Rotate zapište hodnotu „360“ a klepněte na tlačítko „OK“. Okno Animate obsahuje samozřejmě i další volby pro nastavení animace, které lze měnit. Je možné nastavit počet polí animace, posun animace, změnu měřítka a mnoho dalších voleb.

Nyní byste měli vidět u logotypu jakési záchytné body, se kterými se dá volně pohybovat a tak vizuálně měnit nastavení animace. Přesuňte červený bod na levou stranu, tím máme animaci logotypu hotovou.

Paleta Animate

Jak jste si asi všimli, Fireworks automaticky vytvořil jednotlivá políčka animace v paletce Frames. Bohužel do jednotlivých políček rozkopíroval pouze jednotlivé pozice animovaného logotypu, ale ne už další grafiku použitou v našem banneru. Náprava je jednoduchá, klepněte na složku vrstev „Podklad“ a pomocí klávesové zkratky „Ctrl+C“ zkopírujte vše do schránky. Přesuňte se na paletku Frames a vyberte vždy každé políčko animace a klávesovou zkratkou „Ctrl+V“ vložte zbývající grafiku do všech políček.

Kopírování grafiky (plná velikost, cca 85 kB)

Nyní doplníte poslední políčko animace, texty a následně potom ještě provedete úpravu časování celé animace. Nejprve si zkopírujte poslední políčko animace, do kterého posléze vložíte text. Chyťte poslední políčko animace a přetáhněte jej na prostřední ikonku dokumentu se znakem „+“. Vytvoříte tak další políčko animace, do kterého je potřeba naimportovat znovu logotyp a umístit jej na levou stranu banneru.

Teď zapracujeme potřebný text. V levém panelu vyberte nástroj pro text a doplňte text do banneru. U textu můžete pomocí spodního panelu měnit požité písmo, barvu, velikost, případně další nastavení, která Fireworks umožňuje.

Doplnění textu (plná velikost, cca 30 kB)

Poslední věc, kterou je ještě potřeba doladit, je časování jednotlivých snímků. Časování snímků změníte v paletce Frames, kde v levé části je vždy uveden čas, po který se jednotlivý snímek zobrazuje. Pro změnu časování snímku poklepejte na snímek, objeví se okno s políčkem pro zadání času, které vyplníte požadovanou hodnotou.

Paletka Frames

Předpokládám, že jste úspěšně dokončili animovaný banner, takže můžeme přikročit k vytvoření animovaného GIFu. V menu vyberte položku | File | Image Preview |, otevře se okno pro nastavení exportovaného obrázku. V levé části vyberte v poli Format položku Animated GIF a klikněte na Export. Fireworks se již pouze zeptá, jak chcete animovaný GIF pojmenovat a kam jej chcete uložit.

Export banneru do GIFu (plná velikost, cca 15 kB)

V tuto chvíli jste dokončili tvorbu jednoduchého banneru a je to již na vaší kreativitě, jak budou vaše animace vypadat. Jen bych chtěl ještě upozornit, že tvorba složitějších animací může být časově velmi náročná.

Výsledný banner

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.