Photoshop & Flash: Ikonka složky v akci - Grafika.cz - vše o počítačové grafice

26. října 2007, 00.00 | V minulém tutoriálu jsme si ukázali, jak jednoduše vytvořit ikonku
složky. Nyní nastal čas na její použití v akci - zkusíme tuto ikonku animovat a
poté v programu Flash použít jako animované tlačítko. Tutoriál je určen pro
středně pokročilé uživatele Photoshopu a začátečníky ve Flashi.

Pokud jste tak ještě neučinili, doporučuji k přečtení článek Photoshop tutoriál: Tvorba ikonky složky. Pro dnešní tutoriál je nutné, abyste měli nějakou ikonku již vytvořenou - nejlépe v zavřeném a otevřeném stavu. Ikonka samozřejmě nemusí vůbec vypadat jako ta z tutoriálu.

První krok v cestě za animovaným tlačítkem bude vytvoření jednotlivých snímků - "framů" - animace. Samozřejmě v Photoshopu. Do nového dokumentu jsem umístil zavřenou a otevřenou složku, nyní se mezi nimi pokusíme vytvořit plynulý přechod.

Kdykoliv se snažíte vytvořit animaci, vytvořte nejprve první a poslední snímek (v našem případě zavřenou a otevřenou složku). Pokud vytvoříte pouze první snímek s tím, že k tomu poslednímu se "nějak" dopracujete, zcela jistě skončíte s něčím úplně jiným.

Pokud máte alespoň částečně v paměti vzhled otevřené ikonky z minulého článku, pak víte, že otevřená část je tvořena dvěma vrstvami. To nám značně zjednoduší práci. Poslední ikonku tedy zkopírujeme, otevřenou přesahující část posuneme o pixel nahoru, o pixel zmenšíme výšku a "podkladovou" otevřenou část zvětšíme, aby plynule navazovala.

Další, resp. předchozí snímek je tvořen úplně stejným způsobem.

Nakonec u posledního (druhého) snímku je otevřená přečnívající část už pouze tři pixely vysoká. Dál už zajít nemůžeme, dva pixely by se "slily" v tmavý flek a nevypadalo by to pěkně (i když v animaci se to stejně ztratí).

Všimněte si, že všechny mezisnímky byly vytvořeny pomocí poslední - otevřené - ikonky. Pokud bychom se snažili postupně "otevírat" ikonku první, kde je přední část tvořena pouze jednou vrstvou, bylo by to o hodně složitější a zdlouhavější.

Našich pět framů máme hotových, to by nám mohlo stačit. Nechceme celovečerní film, jen rychlou a plynulou animaci otevírání složky. Při 30 snímcích za sekundu bude tato animace trvat pouze zlomek sekundy, ale i to stačí k vytvoření pěkné grafiky.

Je čas naši animaci otestovat. Všechny vrstvy umístěte pod sebe a přepněte do programu ImageReady. Postupně vytvořte snímek po snímku vždy se zobrazenou pouze jednou vrstvou. Časování snímků nastavte např. na 0,05 sec., u prvního a posledního např. na 1 nebo 2 sec. Máte-li problém s ImageReady nebo s animací, zkuste najít radu v článku Photoshop tutoriál: Nekonečná animace načítání. Zde je náhled na náhled animace. Nás nejvíc zajímá, jak vypadá přechod prvního a druhého snímku (protože se jedná o dvě rozdílné ikonky). A jelikož to není vůbec hrozné, můžeme prohlásit naši animaci za hotovou (i když "narovnání" vpravo by mohlo být plynulejší).

Pro použití v programu Flash musíme vyexportovat snímek po snímku - jako samostatní soubor. Proto opět rozmístíme složky vedle sebe, vytvoříme řezy a vyexportujeme. Pro jednoduší práci skryjte při exportování pozadí a obrázky vyexportujte průhledné - ve formátu PNG24.

Tím s Photoshopem a ImageReady končíme a přesouváme se do programu Flash. Přestože bude postup popsán krok za krokem, je důležité, abyste se v programu alespoň minimálně orientovali.

Jako první krok vytvoříme nový dokument a ten nastavíme kliknutím do nastaveného počtu snímku za sekundu. Velikost nastavíme např. na 400 x 250 px, barvu pozadí na modrou (#84C5EB) a především počet snímků za sekundu na 30 fps. Standardních 12 je opravdu málo, pokud byste měli problém s výkonem, můžete tuto hodnotu malinko snížit, např. na 25 fps.

V dokumentu vytvoříme nový symbol (Ctrl + F8) ...

... což bude základ pro naše tlačítko. Jako typ však nastavíme Movie Clip, a ne tlačítko (Button). Potvrďte OK.

A do tohoto symbolu naimportujeme předpřipravené obrázky animace složky (File - Import). Pokud jste je při exportu pojmenovali s číslem na konci, Flash automaticky pozná, že se jedná o animaci, a jednotlivé soubory umístí do jednotlivých snímků.

Všimněte si, že na obrázku je snímků 8 a ne 5. Je to tím, že na konec animaci jsem ještě dokopíroval přechodovou animaci opačnou - takže animace složky vypadá tak, že se složky nejprve otevře a poté opět zavře (první a poslední snímek je v animaci pouze jednou, proto je snímků 8).

Tyto snímky vytvoříte rychle tak, že tři mezi snímky zkopírujete (Copy Frames), vložíte (Paste Frames) a z kontextového menu zvolíte funkci Reverse Frames.

Aby nám animace neběžela stále dokola, vytvoříme novou vrstvu do které přidáme akce, které v jednotlivých bodech animaci zastaví (akce je možné přidat i do stávajících snímků, do nové vrstvy je však vkládám pro lepší přehlednost).

Hned v prvním snímku je nutné mít akci stop(); - zde chceme, aby animace zůstala do té doby, než nad tlačítko uživatel najede myší. Stejnou akci je nutné mít i v pátém snímků - zde chceme, aby animace zůstala, pokud bude myš nad tlačítkem.

Nakonec v posledním snímku přidáme akci gotoAndStop(1);. Pokud uživatel odjede myší z tlačítka, přehraje se opačná animace a je nutné opět "skočit" na první snímek a tam zůstat.

Tím máme animaci předchystánu. Vrátíme se zpět do plochy dokumentu (Edit - Edit Document), vyvoláme paletku Library a tuto animaci do plochy vložíme (přetáhnutím). Můžete si zkusit tento soubor otestovat (Ctrl + Enter), ale tím, že je hned v prvním snímku akce Stop, se nestane nic. A to je dobře, my chceme počkat s animací až do doby, než nad tlačítko najede uživatel myší.

Naši animaci ještě jednou převedeme na nový symbol (F8) - opět typu Movie Clip. To z toho důvodu, že v tomto symbolu bude tato animace a tlačítko, které obstará zbytek.

Nejprve ale musíme animaci pojmenovat - v paletce Properties zadáme libovolné jméno, na ukázce folder_anim.

V hlavním symbolu vytvoříme novou vrstvu a do ní nakreslíme čtverec. To bude základ pro tlačítko.

Tento čtverec převedeme na symbol (opět F8), tentokrát už ale typu Button.

Dvakrát na něj klikneme pro editaci a první snímek přesuneme až na poslední místo - na snímek Hit. Tento snímek určuje, kde má být tlačítko "klikatelné". Vzhledem k tomu, že v prvních třech snímcích není nic, bude tlačítko neviditelné. Pouze bude obsluhovat akce.

Vrátíme se zpět do hlavního symbolu (do toho, ve kterém máme animaci a tlačítko), klikneme pravým tlačítkem myši na tlačítko a zvolíme Actions.

Zde stačí pouze ošetřit, aby se začala přehrávat animace (folder_anim.gotoAndPlay(2)) při najetí myši (on(rollOver)) a naopak aby se přehrála druhá část animace (folder_anim.gotoAndPlay(6)) při odjetí myší (on(rollOut)). O zastavení na správných místech se již postarají akce v symbolu animace.

A to je vše. Zkuste si otestovat soubor klávesovou zkratkou Ctrl + Enter a měli byste dostat něco takového jako na následující ukázce. Po najetí myši se složka otevře, po odjetí se zavře.

Aby bylo vidět, kam tlačítko zasahuje, můžete samozřejmě do prvního nebo druhého framu tlačítka přidat obdélník. Do prvního v případě, že chcete vidět tlačítko stále, do druhého v případě, že chcete vidět tlačítko pouze po najetí myši.

Poznámka na konec: A kam dál? Přidejte text, definujte symbol jako komponentu, nastavte proměnné, rozkopírujte tlačítko, nastavte popisky, přidejte další efekty a hned máte pěkné menu. Ale o tom snad až někdy příště. Hodně štěstí při práci!

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.