Animaatiotekniikka 1

NAV14AP

Tällä kurssilla tutustutaan animaation sanastoon ja fraaseihin, ja harjoitellaan perusliikkeitä. Kurssin materiaali löytyy Yhteiset-aseman Animaatiotekniikka 1-kansiosta.


Adobe Flash

Tunneilla käydään läpi Flash-ohjelman käyttöliittymä, tehdään tuntiharjoituksia, nappien tekeminen ja ohjelmointi, sekä harjoitellaan www-sivujen ja käyttöliittymän tekoa.


Tuntiharjoituksia:

Graafinen symboli
- piirrä haluamasi kuvio tai tuo kuva File-valikon Import-komennolla
- valitse piirros tai kuva
- muuta se graafiseksi symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)
- siirrä symboli työskentelyalueen vasempaan reunaan
- klikkaa kuvapaikkaa 100
- kopioi edellinen pääkuva (kuvapaikasta 1) painamalla näppäintä F6
- siirrä symboli (kuvapaikassa 100) työskentelyalueen oikeaan reunaan
- klikkaa kuvapaikkaa 1 hiiren oikealla napilla ja valitse Create Classic Tween
- paina Enter-näppäintä niin symbolisi lähtee liikkeelle

Kiihtyvyys ja hidastuvuus
- klikkaa kuvapaikkaa 50
- kopioi edellinen pääkuva (kuvapaikasta 1) painamalla näppäintä F6
- klikkaa kuvapaikkaa 1
- muuta oikeassa reunassa (Properties > Tweening) Ease-arvoksi -100 (Ease In = kiihtyvyys)
- klikkaa kuvapaikkaa 50
- muuta oikeassa reunassa (Properties > Tweening) Ease-arvoksi 100 (Ease Out = hidastuvuus)
- paina Enter-näppäintä niin symbolisi lähtee liikkeelle

Läpinäkyvyys
- klikkaa kuvapaikkaa 1
- klikkaa graafista symbolia (valitse se)
- valitse oikeassa reunassa (Properties > Color Effect) Style.pudotusvalikosta Alpha ja säädä sen arvoksi   0 %
- klikkaa kuvapaikkaa 100
- klikkaa graafista symbolia (valitse se)
- valitse oikeassa reunassa (Properties > Color Effect) Style.pudotusvalikosta Alpha ja säädä sen arvoksi   0 %
- symbolisi on nyt animaation alussa ja lopussa läpinäkyvä

Polku

- piirrä kärpänen

- muuta se graafiseksi symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)

- klikkaa kärpäsen Layeriä hiiren oikealla napilla ja valitse Add Classic Motion Guide

- piirrä uudelle Guide Layerille mutkitteleva viiva työskentelyalueen vasemmasta alareunasta oikeaan yläreunaan

- klikkaa kuvapaikkaa 50 ja tee uusia välikuvia painamalla näppäintä F5

- valitse kärpäsen Layer klikkaamalla sitä hiiren vasemmalla napilla

- siirrä kärpäsen symboli viivan päälle vasemmassa alareunassa, mistä viiva alkaa

- klikkaa kuvapaikkaa 50 ja kopioi pääkuva painamalla näppäintä F6

- siirrä kärpäsen symboli viivan päälle oikeassa yläreunassa, minne viiva loppuu

- klikkaa kärpäsen Layerin ensimmäistä kuvapaikkaa hiiren oikealla napilla ja valitse Create Classic Tween

- piilota polku (viiva) klikkaamalla hiiren vasemmalla napilla pientä palloa silmän kuvan alapuolella Guide Layerillä 

Napin ulkoasu

- voit tehdä napin piirroksesta, tekstistä tai kuvasta

- valitse piirroksesi/tekstisi/kuvasi

- muuta se Button-symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)

- tuplaklikkaa Button-symbolia, niin pääset symbolin editointitilaan

- kuvajanalla on vain neljä kuvapaikkaa: Up, Over, Down ja Hit

- Up-kuvapaikassa määritellään miltä nappi näyttää, kun mitään ei tapahdu

- Over-kuvapaikassa määritellään miltä nappi näyttää, kun hiiren kursori on napin päällä

- Down-kuvapaikassa määritellään miltä nappi näyttää, kun hiiren kursori on napin päällä ja hiirtä klikataan

- Hit-kuvapaikassa määritellään napin vaikutusalue piirtämällä esimerkiksi suorakaide, joka peittää napin (tämä ei näy käyttäjälle). Tässä voit käyttää apuna valopöytää (Onion Skin)

- muuta napin ulkoasua haluamallasi tavalla (muista: F6 kopioi edellisen pääkuvan, F7 tekee uuden)

- pääset pois napin editointitilasta klikkaamalla Scenen nimeä vasemmassa yläreunassa

Napin äänet

- tuplaklikkaa Button-symbolia, niin pääset symbolin editointitilaan

- tee napille uusi Layer vasemman alanurkan New Layer-painikkeella

- ääniä kannattaa laittaa vain Over ja Down kuvapaikoille

- tuo haluamasi äänet File > Import > Import to Library)

- tee uudet pääkuvat uudelle Layerille Over ja Down kuvapaikalle klikkaamalla kuvapaikkaa ja sitten   painamalla F7

- klikkaa Over-kuvapaikan pääkuvaa uudella Layerillä (valitse se)

- valitse oikeassa reunassa (Properties > Sound) Name-pudotusvalikosta haluamasi ääni

- toista sama Down.kuvapaikassa

- pääset pois napin editointitilasta klikkaamalla Scenen nimeä vasemmassa yläreunassa

Napin testaaminen

- valitse Control-valikosta Enable Simple Buttons

- nyt nappisi toimii

Napin Actionscript

- valitse Button-symboli klikkaamalla sitä

- valitse Window-valikosta Actions

- avaa vasemman reunan Global Functions-valikko klikkaamalla sen vasemmalla puolella olevaa pientä   nuolta

- avaa Movie Clip Control-valikko samalla tavalla

- tuplaklikkaa valikon on-komentoa

- valitse ilmestyvästä parametrivalikosta release tuplaklikkaamalla sitä

- koodi-ikkunassa pitäisi näkyä on (release) { }

- klikkaa aaltosulkujen välissä (seuraava komento lisätään sinne)

- avaa vasemman reunan Browser/Network-valikko klikkaamalla sen vasemmalla puolella olevaa pientä   nuolta

- tuplaklikkaa valikon getURL-komentoa

- kirjoita koodi-ikkunassa komennon kaarisulkujen väliin lainausmerkeissä haluamasi nettiosoite (esim. "http://www.google.fi")

- jos käytät nappia sähköpostin lähettämiseen kaarisulkujen väliin kirjoitetaan lainausmerkeissä mailto: ja sähköpostiosoite (esim. "mailto:etunimi.sukunimi@sataedu.fi")

- jos haluat avata napista toisen nettisivun kaarisulkujen väliin kirjoitetaan lainausmerkeissä tiedoston nimi (esim. "etusivu.html")

- jos napista siirrytään toiseen Frameen tai Sceneen, käytetään komentoa gotoAndPlay tai gotoAndStop (esim. gotoAndPlay (1) tai gotoAndPlay ("tokascene",1)

- parasta on kuitenkin nimetä (Label) kuvapaikat joihin hypätään eli klikkaa kuvapaikkaa ja kirjoita sille nimi kohdassa Properties > Label > Name ja käytä sitten komentoa gotoAndPlay ("nimi")

Liike- ja fysiikka

Tehdään Flashillä tuntiharjoituksina täältä löytyviä tasoloikkapelin liike- ja fysiikkaharjoituksia:

http://www.gotoandplay.it/_articles/2007/02/game_tutorial_part1.php

Laajempi. kommentoitu esimerkki löytyy Animaatiotekniikka1-kansiosta: "NatureCalls.fla".

Kävelyt

1. Peruskävely

Piirrä haluamasi näköisen hahmon kävelysykli sivulta referenssimateriaalia hyväksi käyttäen.

2. Piirrä haluamasi näköisen koiran kävelysykli sivulta referenssimateriaalia hyväksi käyttäen.

3. Piirrä  haluamasi näköisen hahmon kävelysykli edestäpäin referenssimateriaalia hyväksi käyttäen.

4. Piirrä haluamasi näköisen koiran kävelysykli edestäpäin referenssimateriaalia hyväksi käyttäen.

5. Elävöittäminen

Piirrä haluamasi esineen "kävely" niin, että esine säilyttää mahdollisimman pitkälle esinemäisyytensä.


Eadweard Muybridge

Googleta Eadweard Muybridge.

6. Rotoskopia

Piirrä hevosen tai ihmisen animaatio rotoskopiatekniikalla referenssimateriaalia hyväksi käyttäen. Tuo mallikuvat Flashiin valitsemalla File-valikosta Import > Import to Stage ja valitsemalla ensimmäinen numeroitu kuva. Flash kysyy tuodaanko koko kuvasarja ja klikkaa Yes.Tee uusi layer piirrettäville kuville ja tee tyhjiä pääkuvia F7-näppäimellä sitä mukaa kun tarvitset.


Tex Avery

Googleta Tex Avery ja varsinkin Droopy. Tunneilla katsotaan muutama näyte. Ajoituksen juhlaa!


Emotional Sack

Googleta Emotional Sack.

Animaattoreiden harjoitusväline, esim. herneillä täytetty kangassäkki. Sellainen on helppo tehdä itsekin, tarvitset vain palan kangasta, pussillisen herneitä, neulan ja lankaa (tai ompelukoneen), ja ompelutaitoisen henkilön.

Animoi aamuväsynyt säkki. Säkki makaa x-asennossa, liikahtelee, yrittää vaivalloisesti nousta istumaan joko "vatsalihaksillaan" ponnistaen tai toisella "kädellä" tukea ottaen. Istuu hetken "ylävartalo" lysähtäneenä, nousee sitten ensin "polvilleen" vetäen "jalat" alleen, ja lopulta seisomaan "ylävartalo" vasyneen lysähtäneenä.

3ds Max

Tutustutaan ohjelman käyttöliittymään ja mallintamisen käsitteisiin. Lisäksi tehdään tuntiharjoituksia. Tutoriaalit löytyvät Animaatiotekniikka1-kansiosta.

7. Box-mallintaminen

Suunnittele oma, selkeä hahmo. Tee 3ds Maxissa kapeahko, korkea laatikko (Create > Box), jossa on 3 Length segmenttiä ja 2 Width ja Height segmenttiä. Klikkaa hiiren oikeaa nappia ja valitse Convert to > Convert to Editable Poly. Siirrä laatikkosi Front -näkymässä niin, että sen vasen reuna on y-akselilla. Lisää laatikollesi Symmetry -modifier (Modify > Modifier List > Symmetry). Klikkaa Symmetry -modifierin nimen vasemmalla puolella olevaa pientä plusmerkkiiä ja valitse klikkaamalla Mirror. Siirrä peilatun laatikon oikea reuna Front -näkymässä y-akselin päälle. Valitse alkuperäinen laatikkosi klikkaamalla sitä. Valitse Perspective -työskentelyikkunan näyttötilaksi Edged Faces. Tee hahmosi "ristiinnaulitun" asentoon kädet suoraan sivuille. Valitse valintamuodoksi polygon (Modify > Selection > Polygon). Valitse klikkaamalla polygoneja ja työntele laatikosta kädet, jalat ja pää Extrude-työkalun avulla (löytyy klikkaamalla hiiren oikeaa nappia, kun hahmosi on valittuna). Lisää tarvittaessa Edge Looppeja Swift Loop-työkalulla (Graphite Modeling Toolsin Edit-valikossa), niin saat lisää polygoneja. Muotoile hahmoasi Scale- ja Move-työkaluilla. Lisää lopuksi TurboSmooth-modifier Modifier listasta.

BONES (Luut)

Forward Kinematics = FK

Luita ohjataan kääntämällä niitä Rotate –työkalulla. Luita ei siis liikuteta.

Poikkeuksena ”master”-luu, jolla liikutetaan koko objektia.

Inverse Kinematics = IK

Luita ohjataan kontrolliobjektien avulla.

Luiden laittaminen ja aktivointi

1.       Valitse Bones –työkalu (Create > Systems > Bones)

2.       Lisää luita klikkaamalla vasemmalla napilla “master”-luun alkupiste ja loppupiste. Tämän jälkeen luuketju jatkuu automaattisesti, joten tarvitsee klikkailla vain uusien luiden loppupiste. Lopeta luiden laitto klikkaamalla oikeaa nappia. Jos haluat jatkaa luuketjua toisesta kohdasta valitse luu josta haluat jatkaa klikkaamalla sitä vasemmalla napilla. Uusi luu liitetään aina edellisen luun terävään päähän.

3.       Kun olet laittanut kaikki luut valitse objekti ja laita sille Skin modifier (Modify > Modifier List > Skin)

4.       Valitse luut (Bones > Add > Valitse listasta kaikki luut, EI objektia > Select).