sunnuntai 25. elokuuta 2013

ANIMAATIOTEKNIIKKA 1

NAPpk13

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 (tämä ei näy käyttäjälle)
- 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 pystyssäolevaa tulitikkuaskia muodoltaan muistuttava laatikko (Create > Box), jossa on 3 Length ja Width segmenttiä, ja 2 Height segmenttiä. Klikkaa hiiren oikeaa nappia ja valitse Convert to > Convert to Editable Poly. 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.


TIKKU-UKKO

8. Mallinna, teksturoi, riggaa ja animoi tikku-ukko 3ds Maxissa.

Käytämme tässä harjoituksessa tikku-ukkoa selkeyden vuoksi. Malli on niin yksinkertainen, että kannattaa ehkä käyttää luita (Bones) Bipedin sijasta.

Työprosessi on seuraava:

Mallinna yksi tikku (Box), tee sille UV-map (UnwrapUVW-modifier) kuutioprojektiolla, tee materiaalieditorissa tekstuuri (Material > Standard Material ja Map > Bitmap, käytä vaikka referenssikuvaa Wood (Tikku-kansiossa)), laita tekstuuri tikkuun, kopioi tikku liikuttamalla sitä Shift-näppäin pohjassa, tee tarvittava määrä kopioita, siirrä ne paikoilleen ja skaalaa.

Tee tikku-ukolle pää pallosta (Sphere), tee sillekin UV-map palloprojektiolla, ja laita sama tekstuuri kuin tikullekin. Laita luut (Bones) ja kytke ne toimimaan Skin-modifierin avulla (Bones > Add).

Katso Tikku-kansion esimerkkimateriaalista peruskävelyn mallikuvat (Animaatio.pdf). Laita 3ds Maxissa TimeLinen alareunassa oleva Autokey päälle ja animoi Rotate-työkalua käyttäen.

Animoi tikku-ukolle kävely. Kävely on syklinen liike, se loppuu siihen mistä alkaa. Tarvitaan vain yksi sykli, jonka Keyframeja voi kopioida Timelinella liikuttamalla niitä Shift-näppäin pohjassa. Delete löytyy klikkaamalla hiiren oikeaa nappia Keyframen päällä.

Ei kommentteja:

Lähetä kommentti