Tutoriál 7 - Kotě sledující hodiny
Upozornění:
Podkladová grafika zde použitá je chráněna autorskými
právy a nesmí být dále šířena ani použita ve vašich
projektech!
Kotě zaujatě sleduje kyvadlo kukačkových hodin. Když vyletí ptáček, rádo by po něm skočilo.
Download podrobnějšího náhledu (2 MB)
Grafiku jsem připravil v Illustrátoru (rozměry pro 4K grafiku). Exportoval jsem zvlášť pozadí a zvlášť objekty a ty jsem rozdělil ve Photoshopu na samostatné obrázky PNG. U hodin jsou potřeba samotné hodiny se zavřenýmí dvířky, samostatně otevřená dvířka s kukačkou nahoře a druhá dvířka s kukačkou dole (2 polohy kukačky během kukání).
Dále je potřeba kyvadlo a obě ručičky. Ručičky doporučuji připravit už se středem ve středu obrázku. Např. takto: v obrázku objektů označit blokem ručičku (ručičky ukazují nahoru). Zkopírovat ji do schránky Ctrl+C. Vytvořit nový obrázek Ctrl+N (už se připraví se správným rozměrem) a vložit tam obrázek Ctrl+V. Myší najet nad osu ručičky a přečíst v informačním okně souřadnici Y. Zvětšit velikost plátna na dvojnásobek rozměru, obrázek přitom nechat zarovnat k hornímu okraji.
Ke kotěti je potřeba tělo a samostatně hlava. Hlava má místo očí vyříznuté díry, aby bylo možné s očima hýbat. Oči jsou jako jeden obrázek a mají bílé neprůhledné okolí. Dále kotě potřebuje samostatný ocásek a také samostatný jazýček (to je ten malý červený kousek na obrázku :-) ).
Do programu jsem načetl pozadí. Jako první chci obsloužit hodiny. Přidal jsem tělo hodin, nastavil jim velikost a posunul na pozici. Poté jsem přidal kyvadlo. Střed kyvů není ve středu obrázku kyvadla a proto bude potřebný kloub. Přidal jsem prázdný obrázek Empty.bmp a k němu jsem připojil kyvadlo. Tento prázdný obrázek bude kloubem kyvadla. Posunul jsem souřadnici Y kyvadla tak, aby se při změně rotace kloubu kyvadlo otáčelo na konci závěsu. Kloub jsem připojil k hodinám a usadil souřadnice na správné místo.
Kyvadlo se bude kývat v sekundových intervalech tam a zpět. Nastavoval jsem proto rotaci kloubu kyvadla po 30 snímcích střídavě na hodnoty -20 a +20 stupňů, se zapnutým přepínačem "Plynule". Po nastavení několika výkyvů jsem klíčové snímky zkopíroval do paměti a pak jen opakovaně vkládal z paměti další výkyvy. Aby animace byla seamless, musí být délka násobkem 30 snímků - proto jsem nastavil celkovou délku videa 420 snímků.
Přidal jsem ručičky a připojil je k hodinám jako k rodiči (abych mohl s hodinami hýbat a aby se hodiny přitom nerozpadly). Ručičky už mají připravené obrázky tak, aby střed rotace byl ve středu obrázku, proto nemusím použít kloub.
Malá ručička oběhne ciferník za celou dobu animace o 1 otáčku. Ve 12:00 chci animovat kukačku a to se bude dít uprostřed animace, chci tedy začít animaci na 6 hodinách. Proto jsem v prvním snímku 0 nastavil úhel rotace malé ručičky na +180 stupňů a v posledním snímku (419) jsem nastavil úhel -180 stupňů.
Velká ručička za dobu animace oběhne ciferník 12x. Proto jsem jí v prvním snímku uzamknul hodnotu 0 a v posledním snímku nastavil úhel -4310. Správně by mělo být 12 x 360 = 4320, ale tato hodnota by příslušela snímku 420 a já nastavuji snímek 419. Za jeden snímek se ručička posune o 4320 / 420 = asi 10 stupňů a proto úhel v posledním snímku snížím o 10 stupňů, tedy na hodnotu 4310. U malé ručičky to poznat nebude, ale velká se točí rychle a bez tohoto upřesnění by mohlo být při seamless animaci poznat škrobrtnutí ručičky.
Přidal jsem obrázek kukačky 1 (nahoře) a 2 (dole), připojil k hodinám a nastavil pozici přes dvířka. Kukačka bude kukat, když hodiny dosáhnou času 12:00. Což odpovídá středu animace, na snímku 210. Zde zapnu viditelnost kukačky 1 (nahoře) a nechám ji zapnutou. Kukačku 1 budu překrývat kukačkou 2 (dole), proto by měla být v seznam obrázků níže než kukačka 1.
Kukačka bude kukat v sekundových intervalech. Během kukání je nahoře kratší dobu než dole. Proto nechávám 10 snímků kukačku 2 vypnutou (je vidět kukačka 1, tedy nahoře) a dalších 20 snímků zapnutou (kukačka je dole), tedy: 220 zap, 240 vyp, 250 zap, 270 vyp... Po pár kuknutích oba obrázky kukaček vypínám.
Přidal jsem tělo kočky a umístil ji. Přidal jsem hlavu a tu jsem připojil k tělu. Přidal jsem oči a ty jsem připojil k hlavě - ale tak, aby oči byly v seznamu nad obrázkem hlavy, protože musí prosvítat dírami v hlavě. A pak jsem přidal ocásek a připojil ho k tělu.
Kotě sleduje kývání kyvadla hodin. V sekundových intervalech hýbe s hlavou nahoru a dolů - to jsem zajistil po 30 snímcích střídáním rotace hlavy mezi hodnotami -3 a +3 stupně se zapnutým přepínačem Plynule. Kotě ale nesleduje kyvadlo celou dobu. Po dobu, co kuká kukačka, kouká jen na kukačku - proto jsem po tuto dobu ponechal rotaci na horní pozici +3 stupně.
Kromě pohybů hlavy sleduje kyvadlo i očima. Ve stejných intervalech, jako se hýbe hlava, jsem měnil i pohyb očí změnou souřadnic X a Y tak, aby očima hýbalo nahoru a dolů, podle kyvů kyvadla. Jen po dobu kukání kukačky zůstávají oči nahoře, upnuté na kukačku.
Dále jsem připojil k tělu ocásek. Ocásek se hýbe malou změnou rotace obdobně jako hlava - po 30 snímcích se střídají úhly -14 a +14 stupňů se zapnutým přepínačem Plynule. Po dobu sledování kukačky zůstává ocásek nahoře.
Posledním prvkem je jazýček. Během koukání na kukačku se kotě mlsně olízne. To je zajištěno 3 klíčovými snímky v průběhu kukání. V prvním snímku se zapne viditelnost jazyku, zmenší se výška jazyku na malou hodnotu (aby nebyl skoro vidět) a změnou souřadnic X a Y se jazyk usadí k jedné straně pusy. Po 30 snímcích se nastaví plná výška jazyku a jazyk se změnou X a Y posune do středu pusy (olizuje se). Při tomto klíčovém snímku mají všechny hodnoty zapnutý přepínač Plynule. Po dalších 30 snímcích se opět sníží výška jazyku na minimum, jazyk se umístí na druhou stranu pusy a viditelnost jazyku se vypne.
