SEZNAMTE SE - FLASH 4 - IV - Grafika.cz - vše o počítačové grafice

7. února 2000, 00.00 | Velice zajímavý druh animace a nějaké další triky. Práce jednoduchá výsledek efektní.

Dnes se podíváme na jiný druh animace a ukážeme si nějaké jednoduché triky, při jejichž použití vypadá animace složitě, ale ve skutečnosti je velice jednoduchá. Věřím, že v minulých dílech jste se naučili ovládat nástroje a proto se budu snažit výklad co nejvíc zjednodušovat a používat klávesové zkratky, které velice usnadňují práci.

Zvolíme velikost jeviště - Ctrl+M -- 450 x 300. Nakreslíme čárku o libovolné velikosti a síle. (použil jsem sílu 2, solid) Vybereme ji - Ctrl+A -- Ctrl+F -- Tweening -- Shape. (viz obr.)

* Pole 10 -- F6. Okamžitě zmáčkneme Ctrl+D a uděláme 5 kopií.
* Pole 20 -- F6. Nakreslíme obdelník (pouze nástrojem Line Color, Fill Color necháme přeškrtnutý) -- klik na nástroj čtverec -- nástroj Round Rectangle Radius a nastavíme hodnotu 10 -- a za poslední čárku ho umístíme. Jsme stále na poli 20. Šipkou klik na poslední čárku -- pravý klik -- Copy -- Paste a přidáme ji za obdélník.
* Pole 30 -- F6. Vybereme pouze poslední čárku za obdélníkem a Ctrl+D -- a zase 5 kopií.
* Pole 40 -- F6. Vytvoříme opět obdélník a abychom ho měli stejný, za přidržení klávesy Shift oklikáme ten první a pravý klik -- Copy -- Paste a usadit za poslední čárku. Vybereme tuto čárku a zkopírovanou (pravý klik - Copy - Paste) ji vložíme za obdélník. Když si animaci přehrajeme (Enter), zjistíme, že obdélníky se nám zavírají zdola. Na tom druhém si ukážeme použití kotevního bodu (Shape Hint).
* Klik na pole 30 -- Modify -- Transform -- Add Shape Hint. (jednodušší je si zapamatovat Ctrl+H) Objeví se nám červená značka s písmenem -a-, kterou umístíme na vrchol poslední čárky před obdélníkem (viz obr.)

*Klik na pole 40 -- značku přesuneme na obdélník.viz obr.)

Značka nám zezelenala. Podle toho, kam na poli 40 značku umístíme, se nám bude obdélník otevírat. Pravým klikem nad značkou Hint -- Remove Hint -- a můžete si to vyzkoušet znovu. Použití této značky bude věnována samostatná kapitola.
* Pole 50 -- F6. Vybereme poslední čárku za druhým obdélníkem -- Ctrl+D a zase 5 kopií.
* Celé jeviště si zmenšíme a na poli 60 -- F6. Nástrojem Scale celou animaci zrcadlově otočíme a umístíme do středu jeviště. (viz obr.)

* Pole 70 -- F6. S držením klávesy Shift označíme všechny čárky z pravého horního rohu po vrchní obdélník -- pravý klik -- Cut. (nebo na klávesnici Delete)
* Pole 80 -- F6. Označíme prostřední čárky, včetně spodního obdélníku -- Delete.
* Pole 90 -- F6. Vymažeme zbývající čárky, zůstane nám pouze vrchní obdélník, který přesuneme do středu jeviště.
* Pole 100 -- F6 -- Delete. Nakreslíme nový obdélník s linkou o síle 2 a výplní stejnou jako linka, rohy necháme zaoblené.
* Pole 105 -- F6.
* Pole 110 -- F6 -- vybereme pouze výplň obdélníku a Delete. Okraje musí zůstat. Nástrojem Text - font Arial CE, tučný, barva šedá, velikost 26 (nebo dle obdélníku, aby se písmo nedotýkalo okrajů) -- napíšeme text. (viz obr.)

Šipkou text usadíme ve středu obdélníku. Pak Modify -- Break Apart (Ctrl+B)

* Pole 120 -- F6.
* Pole 125 -- F6. Zvětšíme si obrázek a s držením klávesy Shift označíme text -- Delete -- a nástrojem Text napíšeme nový -- šipkou umístíme do středu -- Ctrl+B.
* Pole 135 -- F6.
* Pole 140 -- F6 -- a opakujeme změnu textu, jako na poli 125.
* Pole 150 -- F6.
* Pole 160 -- F6 -- Ctrl+A (vybereme vše) -- Delete. Nástrojem Oval - Line Color je 8, Fill Color není nakreslíme kruh, který 4x okopírujeme a usadíme do roviny vedle sebe. (viz obr.)

* Pole 170 -- F6 -- Ctrl+A -- Delete. Nástrojem čtverec, síla 4, bez výplně, zaoblené rohy odebereme, ho nakreslíme. Ctrl+A -- nástrojem Rotate čtverec postavíme na jeden rožek. ( nejlepší a nejpřesnější je -- Window -- Inspectors -- Transform -- a v kolonce Scale necháme 100% a Rotate zadáme 45.0 -- Apply) Opět 4x zkopírujeme a uložíme vedle sebe tak, aby se špičky skoro dotýkaly.
* Pole 180 -- F6. Vybereme vždy dva z každé strany a odstraníme tak, aby zůstal jen prostřední. Klik na pole 170 -- pravý klik -- Copy Frames -- klik na pole 190 -- Paste Frames. Klik na pole 160 (tady máme ta tlustá kolečka) -- Copy Frames -- na pole 200 -- Paste Frames. Nástrojem Paint Bucket - kyblík -- stejnou barvou, jakou máme ta kolečka vyplníme jejich středy.
* Pole 210 -- F6 -- Ctrl+A -- Delete. Nástroj Text - font Vivian, velikost 48, tučně (mezi písmeny jsem nechával vždy 2 mezery) napíšeme text. Šipkou jej přesuneme do středu jeviště a Ctrl+B.
* Pole 230 -- F6. Aby text zůstal stát.

Samozřejmě hodně věcí lze animovat i jinak, ale schválně jsem to nechával v jedné vrstvě, kvůli procvičování kopírování a navazování. Po zapamatování několika klávesových zkratek je tato animace hotova asi za 10-15 minut. Můžeme měnit tvary, místo čárek tečky atd. Chce to zkoušet a zkoušet a uvidíte, čím dokáže Flash překvapit.

Příště bychom dokončili používání kotevních bodů, které si myslím je třeba důkladněji vysvětlit. Mají dost velký vliv na výsledky takových animací jakou jsme dělali dnes.

Starší články:
SEZNAMTE SE FLASH I - seznámení
SEZNAMTE SE FLASH II - tweening
SEZNAMTE SE FLASH III - tweening po dráze