Macromedia FLASH 4 – hvězdy měnící se v text

20. března 2000

•

V dnešním díle seriálu věnovanému Macromedia FLASH si ukážeme, jak animovat přílet několika hvězd a jejich následnou efektní proměnu v textový nápis. Velmi podrobný návod typu krok za krokem.

Nejdříve si vytvořte scénu o velikosti 300 x 300 px, ve které se bude animace odehrávat a nastavte barvu pozadí na tmavě modrou. Ještě než začnete kreslit , tak si zapněte zobrazování mřížky (View>Grid) a automatickému přichytávání k mřížce (View>Snap), kreslení je potom mnohem snažší a přesnější.

Kreslení hvězdy

Nejdříve nakreslete hvězdu, pokud by jste měli k dispozici některý vektorový grafický program (např. Adobe Illustrator), pak je nejjednodušší si hvězdu nakreslit k tomu určeným nástrojem přímo v tomto programu a do FLASH jej potom naimportovat (přípona AI nebo EPS). Vyberte nástroj line (čára) a barvu nastavte bílou a tloušťku 1 px. Dle obrázku nakreslete rovnoramenný trojúhelník a můžete opět zobrazování mřížky vypnout (CTRL+ALT+SHIFT+G). Vyberte nástroj šipka a klikněte na hranu trojúhelníka, při jednom klepnutí se označí pouze jedna hrana a při dvojím poklepání se označí celý. Zkopírujte jej do schránky (CTRL+C) a vložte na stejné místo odkud jste je zkopírovali (CTRL+SHIFT+V). V paletce transform (Window>Inspectors>Transform) nastavte rotaci 180 stupňů a stiskněte tlačítko apply, pak ještě pomocí šipek dolaďte pozici trojúhelníku tak, aby společně s druhým trojúhelníkem tvořil hvězdu.

Každá hrana trojúhelníku je nyní samostatná a pokud na ni kliknete tak se označí a stisknutím tlačítka DELETE na klávesnici ji smažete. Tímto způsobem smažte všechny přebytečné hrany, aby jste dostali výsledný obrázek hvězdy. Zvolte nyní nástroj kyblík (Paint Bucket – U), vyberte z paletky žlutou barvu, klepněte uprostřed hvězdy a ta se vyplní žlutou barvou. Poté klikněte na hranu hvězdy tak, aby se označily všechny hrany a smažte je (DELETE). Kliknutím pak označte celou hvězdu a uložte ji jako symbol – graphic a nazvěte ji hvezda.

Hvězdy přilétávají

Hvězdu zmenšete (paletka Transform>Scale) na 35 procent a umístěte ji kousek mimo scénu, na místo odkud bude přilétat. Pravým tlačítkem klikněte na název vrstvy v levém horním rohu a vyberte z nabídky Add Motion Guide. Tím se přidá další vrstva, která sice nebude ve výsledku vidět, ale bude sloužit jako dráha po které budou hvězdy přilétat.

Do této vrstvy nakreslete dle obrázku elipsu (nástroj elipsa, barva hrany černá, bez výplně) a přepněte se zpět do vrstvy s hvězdou (doporučuji vrstvu s elipsou zamknout). V prvním snímku hvězdu uchopte za střed a umístěte ji na elipsu, ve středu by se mělo objevit malé černé kolečko. Přepněte se do snímku 15 a vložte klíčový snímek (F6), hvězdu přemístěte na konečnou pozici tak, aby se opět ve středu hvězdy při umísťování objevilo černé kolečko. Klikněte opět na snímek 1 a zvolte Modify>Frame (CTRL+F), záložka Tweening. V této záložce vyplňte tyto parametry: Tweening: Motion (animace symbolu), Rotate: Clockwise, 1 times (hvězda se jednou otočí kolem středu po směru hodinových ručiček), Easing 100 (v konečné fázi hvězda zmenší rychlost příletu). Tím je přílet jedné hvězdy hotov.

Pokud jste na vrstvě s hvězdou tak klikněte na tlačítko+ a přidejte novou vrstvu. Pro tuto vrstvu bude také platit dráha specifikovaná ve vrstvě Guide. Postup s animací hvězdy aplikujte v této vrtsvě a pak ještě ve třech dalších, aby jste ve výsledku dostali pět přilétajících hvězd.

Hvězdy se mění v písmena

Animovat změnu tvaru můžete pouze pokud máte objekt rozbitý do křivek. Ukážeme si jak změníme první hvězdu v písmenko F. Ve vrstvě s hvězdou vložte na pozici 35 klíčový snímek a stiskněte Modify>Break Apart (CTRL+B), tím jste symbol rozbili do křivek. Proměna bude trvat řekněme jednu sekundu, proto na pozici 45 vložte další klíčový snímek, hvězdu smažte a na její místo napište písmeno F. Toto písmeno šipkou označte a opět jej rozbijte (CTRL+B). Pak klikněte opět na snímek 35 a zvolte Modify>Frame (CTRL+F) a v záložce Tweening zvolte typ Shape. Tím je proměna jedné hvězdy v písmeno hotová. Stejně tak zanimujte proměnu dalších 4 hvězd v písmena L A S H, tak aby vznikl nápis FLASH. Odstupy mezi proměnou jednotlivých písmen ponechte dva snímky.

Při animaci proměny jednoho tvaru na druhý lze využít i takzvaných kotevních bodů (Shape Hints), čímž si v podstatě stanovíte ve výchozím a konečném klíčovém snímku body, které si odpovídají. Doporučuji vyzkoušet – na prvním klíčovém snímku zvolíte Modify>Transform>Add Shape Hint (těchto bodů můžete klidně přidat i několik) a ve scéně se objeví kolečko s malým písmenem a. Toto kolečko má ve výchozím klíčovém snímku červenou barvu a v konečném klíčovém snímku barvu zelenou. Kolečko můžete umisťovat libovolně ve scéně a ovlivňovat tím tak průběh proměny jednoho útvaru ve druhý. Zásadou je, že tyto dva body si vždy odpovídají svým postavením a vztahem k animovanému tvaru.

Písmena se skládají ve slovo

Abychom byli schopni animovat pohyb jednotlivých písmen, musíme každé z nich uložit jako symbol. Do vrstvy, ve které se nachází písmeno F vložte na pozici 55 klíčový snímek a písmeno uložte jako symbol (graphics, název F), na pozici 60 vložte další klíčový snímek a písmeno F posuňte o něco níž a zvětšete jej na 150 procent (paletka Transform), poté opět klikněte na snímek 55 a vložte animaci (CTRL+F, Tweening: Motion). Podobně pokračujte i s ostatními písmeny a vytvořte tak nápis FLASH.

Při umísťování písmen do řady je dobré je všechny označit (šipkou a držte CTRL), zvolte Modify>Align (CTRL+K) a máte možnost si z paletky vybrat zarovnání a mezery horizontálně i vertikálně.

Tím je celý efekt s přilétajícími hvězdami a jejich proměnnou v text prakticky hotov a pokud máte zájem, tak máte možnost jako vždy stáhnout si zdrojový FLA soubor s animací.