FLASH XXI - vlnění, kruhy na vodě - Grafika.cz - vše o počítačové grafice

25. dubna 2000, 00.00 | Podíváme se na postup, jak vytvořit efekt vlnění a kruhů na vodě, pouze animací a připojíme
akci po najetí myší na tlačítko.

Podíváme se na postup, jak vytvořit efekt vlnění a kruhy na vodě, pouze animací a připojíme akci po najetí myší na tlačítko.

Budeme potřebovat vyrobit kruhy, ale podle pravidla, čím menší tím širší. Nastavíme si velikost animace, potom vyrobíme první movie clip -- klip1. Ctrl + F8 -- Movie Clip -- a jméno. Nakreslíme kruh bez okraje, černou barvou o velikosti 50x50 pixelů a umístíme jej na středový křížek jeviště. Zmenšíme si pohled, zobrazíme mřížku a zapneme si přichytávání - magnet. Pravý klik na kruh -- Copy -- Paste. Pokud je ještě označen přesuneme jej vedle tak, aby se nedotýkal původního. Přebarvíme jej jakoukoliv barvou a otevřeme si Window -- Inspectors -- Transform a zaškrtneme políčko Uniform a zadáme Scale = 90 %. Kruh necháme vedle a opět pravý klik -- Paste. Vloží se nám další černý kruh původní velikosti, opět jej přesuneme tak, aby se nedotýkal prvního. Změníme barvu a zmenšíme na 78 %. Takto vytvoříme celkem 7 kruhů, podle následující tabulky a obrázku:
1 - kruh(černý).....Scale = 100 %
2 - kruh................Scale = 90 %
3 - kruh................Scale = 78 %
4 - kruh................Scale = 64 %
5 - kruh................Scale = 48 %
6 - kruh................Scale = 30 %
7 - kruh................Scale = 10 %
Velikost se vždy odvíjí od velikosti prvního (černého kruhu).

Začneme je skládat na sebe a protože máme zapnutý magnet, který nám přichytí objekt, stačí uchopit kruh ve středu a zase do středu toho většího jej položit. (viz obrázek 1)

1 2 3

Jestliže je máme usazeny dle obr.1, klikneme na nejmenší ve středu a nástrojem kyblík jej přebarvíme hnědou barvou, Alpha = 50 %, dle obrázku dole:

Takto přebarvený kruh uložíme do knihovny -- Insert -- Convert to Symbol -- a jméno (kolo1) Vybereme další, větší a stejným postupem jej přebarvíme a uložíme do knihovny.(viz obr.2) Až budeme mít všechny, musí vypadat jako na obrázku 3. Vybereme všechny kruhy a vymažeme -- Ctrl + A -- Delete.

Pojmenujeme si vrstvu na kolo1 a z knihovny vložíme na pole 2 do středu nejmenší symbol -- kolo1. Otevřeme si Inspectors -- Transform, zrušíme zaškrtnutí kolonky Uniform a změníme výšku objektu na 30%.(viz obr.)

Modify -- Frame -- Tweening -- Motion a zaškrtneme -- Orient to path direction. Posuneme posuvník v kolonce Easing -- Out = 100. Na poli 16 -- F6. Přidáme vrstvu -- Add Guide Layer. Na poli 2 -- F6. Nakreslíme kruh bez výplně a nástrojem guma umažeme jeho část tak, aby nám zůstala pouze 1/4. Uchopíme ji a její spodní konec umístíme na střed jeviště. Vrátíme se do vrstvy 1 na pole 2 a měli bychom mít symbol i vodítko ve středu. Na poli 10 -- F6 a přesuneme symbol na druhý konec vodítka. Tady pomocí Inspectors -- Transform -- změníme otočení na 90.(viz obr)

Jsme ve vrstvě 1, přidáme další vrstvu -- kolo2. Tentokrát na poli 3 -- F6 a z knihovny vložíme symbol -- kolo2. Dle obrázku jej usadíme na střed a upravíme jeho výšku na 30 %.

Modify -- Frame -- Tweening -- Motion a zaškrtneme -- Orient to path direction. Posuneme posuvník v kolonce Easing -- Out = 100. Na poli 17 -- F6. Na poli 3 usadíme objekt na začátek vodítka, na poli 11 -- F6 a usadíme na konec vodítka, tak aby zapadly do sebe. Změníme otočení viz vrstva 1. Takto pokračujeme se všemi dalšímy objekty, až nakonec na poli 8 (viz obr.)začíná 7 vrstva, nad ní je pouze vrstva s vodící linkou. Nesmíme zapomenou, že každá další vrstva je vždy posunuta o jeden rámeček dopředu.

Příjezd animace máme hotový a nyní následuje nastevení vlnění objektů. Každý si může vyzkoušet různá nastavení, pro ty kteří chtějí použít můj příklad jsem vypracoval postup nastavení. První je vrstva, potom následuje číslo rámečku a poslední je počet kliknutí na směrové šipce na klávesnici - vl je doleva, vp je doprava.

kolo7 - rám 22 - posun vl = 0
kolo6 - rám 21 - posun vl = 2
kolo5 - rám 20 - posun vl = 4
kolo4 - rám 19 - posun vl = 6
kolo3 - rám 18 - posun vl = 8
kolo2 - rám 17 - posun vl = 10
kolo1 - rám 16 - posun vl = 12

kolo7 - žádný pohyb
kolo6 - rám23 - posun vp = 6
kolo5 - rám24 - posun vp = 12
kolo4 - rám25 - posun vp = 18
kolo3 - rám26 - posun vp = 24
kolo2 - rám27 - posun vp = 30
kolo1 - rám28 - posun vp = 36

kolo7 -- rám 39 -- zkopírované pole 16
kolo6 -- rám 38 -- zkopírované pole 15
kolo5 -- rám 37 -- zkopírované pole 14
kolo4 -- rám 36 -- zkopírované pole 13
kolo3 -- rám 35 -- zkopírované pole 12
kolo2 -- rám 34 -- zkopírované pole 11
kolo1 -- rám 33 -- zkopírované pole 10

Nakonec jsem přidal vrstvu s textem a na první pole jsem vložil akci Stop, na poslední pole akci Go to and Play (22). Vaše Timeline by měla vypadat takto :

Dokončení příště......

FLASH XX - konverze MP3 na WAV
FLASH 5 - ?????
FLASH XIX - akce Tell Target potřetí
FLASH XVIII - akce Tell Target podruhé
FLASH XVII - akce Tell Target poprvé
FLASH XVI - jednoduché menu
FLASH XV - animace tlačítka
Bezplatný export pro Flash z Corelu 9
FLASH XIV - intro a menu
FLASH NA SVĚTOVÉ ÚROVNI
FLASH XIII - jak na preloader a jak ho umístit
FLASH XII - akce pro tlačítka
FLASH XI - 3D hvězda, zvuk na pozadí
JAK DOSTAT ČEŠTINU DO FLASHE ?
FLASH - X - animace bitmapy
SEZNAMTE SE - FLASH 4 - IX
SEZNAMTE SE - FLASH 4 - VIII
SEZNAMTE SE - FLASH 4 - VII
SEZNAMTE SE - FLASH 4 - VI
SEZNAMTE SE - FLASH 4 - V
SEZNAMTE SE - FLASH 4 - IV
SEZNAMTE SE - FLASH 4 - III
SEZNAMTE SE - FLASH 4 - II
SEZNAMTE SE - FLASH 4 - I