Animaattoriksi pelien maailmaan

Elisa Schilkiniltä linkki Gamasutran artikkeliin "How to get a job as an animator in games". Kilpailu työpaikoista on kovaa, mutta tästä löytyy hyviä vinkkejä:

http://www.gamasutra.com/view/news/176374/How_to_get_a_job_as_an_animator_in_games.php

Sosiaalinen media

NAppk12

Sosiaalinen

Yhteisöllinen, yhteiskunnallinen.

(suomisanakirja.fi/sosiaalinen)

Media

Lehdet, radio, televisio, mainostaulut tms. viestinnän kanavana.

Viesti(e)n välittäjä, viestin ilmaisuväline. 

(suomisanakirja.fi/media)

Suomen kielessä käytetään latinan media-sanaa iloisesti väärin. Media on monikko, yksikkö on medium.

Sosiaalinen media

Tietoverkkoja ja tietotekniikkaa hyödyntävä viestinnän muoto, jossa käsitellään vuorovaikutteisesti ja

käyttäjälähtöisesti tuotettua sisältöä ja luodaan ja ylläpidetään ihmisten välisiä suhteita.

(Sanastokeskus TSK, Sosiaalisen median sanasto)

Sosiaalisen median työkaluja:

http://prezi.com/ogqdqtiudeat/sometools/


Ensimmäinen tehtävä:

Tehkää luokalle oma Facebook-ryhmä. Ideoikaa yhdessä ryhmälle nimi ja kutsukaa sen jäseniksi kaikki luokan opiskelijat, sekä opettajat Harri Sarri ja Teemu Vilen.

Toinen tehtävä:

Tutustukaa pareittain seuraaviin julkaisuvälineisiin:

Prezi, Issuu, Google Docs, Flash, blogit, www-sivut, Facebook, Wikispaces, Etherpad (http://muistio.tieke.fi/).

Tehkää muistiinpanoja ja etsikää esimerkkejä eri julkaisuvälineistä ja niiden käytöstä.

1. Pohtikaa, miten julkaisuvälineet eroavat toisistaan ja millaisiin tarkoituksiin ne ovat hyviä. Mikä on kohderyhmän merkitys?
2. Mihin tarkoitukseen ette käyttäisi niitä, missä ne ovat huonoja?
3. Millaisissa tilanteissa pieni yksityisyrittäjä valitsisi tietyn julkaisuvälineen sanomansa eteenpäinviemiseksi?

Koostakaa 5-10 minuutin esitys tutustumisestanne julkaisuvälineisiin ja vastauksista kysymyksiin jollakin yllä mainituista julkaisuvälineistä.



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ä

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")


Nettisivut

Suunnittele ulkoasu ja toteuta Flashillä nettisivut omalle harrastuksellesi.

Sivujen rakenne on seuraava:

Pääsivu (kerro tällä sivulla sivujen aihe eli mistä harrastuksesta on kysymys)
Alasivu (kerro tällä sivulla harrastuksestasi)

Sivujen käyttöliittymä on seuraava:

Tee pääsivulle nappi, josta klikkaamalla pääsee alasivulle.

Tee alasivulle kolme nappia, joista yhtä klikkaamalla pääsee takaisin pääsivulle, toista klikkaamalla pääsee jollekin toiselle harrastuksestasi kertovalle nettisivulle, ja kolmatta klikkaamalla voi lähettää sinulle sähköpostia.

Pääsivu ja alasivu täytyy tallentaa omina tiedostoinaan (File > Publish) samaan kansioon.

Publish-komento tekee kummastakin sivusta kaksi tiedostoa (.swf ja .html) ja tarvitset ne molemmat.

Muistathan, että pääsivun tiedostonimen pitää aina olla “index”.


Kolmas tehtävä:

Harjoitellaan symbolien käyttöä purkamalla Aflac-mainos:

http://www.youtube.com/watch?v=eevDIvRHGNc

Tehdään parityönä vastaavalla tekniikalla sähköinen versio uutisesta ”Sosiaalisen median veto hiipuu Suomessakin”.

http://yle.fi/uutiset/sosiaalisen_median_veto_hiipuu_suomessakin/5408575

Mieti, miten uutisesta saisi mahdollisimman yksinkertaisen, vain muutamia kuvia ja sanoja. Poimi uutisesta keskeiset käsitteet. Jos sinun pitäisi lähettää se tekstarina kaverillesi, joutuisit karsimaan sitä rankasti. Siitä on kysymys.

Kirjoita sanat/piirrä kuvat/tuo kuvat ja muuta kaikki graafisiksi symboleiksi Flashissä. Mieti miten symbolit liikkuvat ja toteuta se Create Classic Tweenin avulla (kopioi pääkuva F6-näppäimellä kuvapaikkaan jossa liike loppuu, valitse sitten pääkuva, josta liike alkaa ja klikkaa hiiren oikeaa nappia -> valitse Create Classic Tween). Liikuta symboleja työskentelyalueella nuolityökalun avulla. Jos haluat symbolin ilmestyvän näkyviin tai katoavan, klikkaa symbolia ja määritä sille Color Effect-valikosta (Properties, oikeassa ylänurkassa) Alpha, jonka avulla voit kontrolloida läpinäkyvyyttä.

Animaatioilmaisu

NAy11

Animaatioilmaisun kurssilla tutkimme kuvan ja tekstin välisiä suhteita animaation näkökulmasta.

Ensimmäinen tehtävä on moniosainen:

Mitä tarkoittaa intertekstuaalisuus?

Intertekstuaalisuudella tarkoitetaan väljästi tekstienvälisyyttä.

Laajasti nähtynä teksti pitää sisällään myös kuvan ja erilaiset mediat ylipäätään. Tekstejä tarkastellaan tällöin laajasti suhteessa muihin kulttuurisiin teksteihin.

Teksti ei ole itseriittoinen kokonaisuus eikä toimi suljettuna systeeminä. Tämä johtuu ensiksikin siitä, että teksti tarkoittaa latinalaisen alkuperänsä mukaan kudelmaa, jonka kaikkia säikeitä ei voida analysoida. Siksi teksti nähdään avoimena erilaisiin tulkintoihin. Toiseksi kirjoittaja on tekstiensä kirjoittaja-lukija ja operoi erilaisten vaikutusten, viittausten ja lainausten kentässä. Lukeminen ja kirjoittaminen ovat jatkuvaa lainaamista. Samalla tavoin taiteilija tai kuvittaja elää viittausten ja lainausten maastossa. Kolmanneksi teksti vaatii luentaa, ja lukija lukiessaan tuo tekstiin omia assosiaatioitaan ja muistumiaan muista teksteistä. Kaikessa luovassa toiminnassa tiedostamattomalla on suuri merkitys syntyyn ja rakenteisiin.

Katso Disneyn animaatioelokuva "Alice in Wonderland".

Pelaa American McGee's Alice -pelistä ainakin kaksi ensimmäistä kenttää. Kiinnitä erityistä huomiota pelin alkuanimaatioon.


Toinenkin tehtävä on moniosainen:

Mitä ovat paratekstit?

Paratekstit ovat eräänlaisia kynnystekstejä, jotka toimivat "kynnyksenä" eli houkuttavat tai eivät houkuta lukemaan tai katsomaan tekstiä.

Mieti Liisa-tekstejä (peliä ja elokuvaa) ja kysy itseltäsi Liisan kuvitukseen (Alicen hahmo tietokonepelissä ja elokuvassa) liittyviä kysymyksiä. Mikä Liisan kuvissa (hahmoissa) ja tarinassa tuntuu kiinnostavalta? Jäikö joku asia vaivaamaan? Missä, milloin, ja millä medialla ne on toteutettu, keneltä kenelle ja miksi? Lähde liikkeelle ihmetyksestä, joka sinulle herää jostakin Liisan kuvan yksityiskohdasta. Kirjoita pohdintasi tuloksista essee, jonka pituus on korkeintaan yksi A4.

Kolmas, moniosainen tehtävä:

Mitä ovat hypo- ja hypertekstit?

Hypertekstuaalisuudessa tutkitaan eroja tekstien välillä. Esimerkiksi monet Liisa-kuvitukset ovat periaatteessa samanlaisia, mutta tarkasteltaessa kuvituksia suhteessa toisiinsa huomataan lukuisia pieniä eroja niiden välillä. Hypertekstien avulla voidaan tarkastella kuvitusten välisiä eroja ja "jälkiä" varhaisemmista teksteistä.

Hypertekstuaalisuudessa on kysymys muuntumisesta eli transformaatiosuhteesta kahden tekstin välillä. Hyperteksti on muunnos edeltävästä tekstistä eli hypotekstistä. Hyperteksti rakentuu hypotekstiä muunnellen ja on kokonaisuudessaan muunnos toisesta tekstistä.

Vertaile ”American McGee’s Alice” tietokonepelin ja Disneyn ”Alice in Wonderland” animaatioelokuvan Liisaa. Kirjoita Liisojen välisistä hypertekstuaalisista eroavuuksista essee, jonka pituus on korkeintaan yksi A4. Pohdi miten tietokonepelin Liisassa näkyy vanhempi kuvitus (Disneyn Liisa). Selvitä kuvitusten välisiä eroavuuksia. Tuo myös esiin kuvitusten välinen suurin eroavuus. Huomaa tarinan suhde kuvaan. Onko tarinoiden välillä eroja?

Piirrä ja väritä käsin (tai koneella) A4-paperille Disneyn ”Alice in Wonderland” animaatioelokuvaan liittyvä kohtaus tarinan alusta, jossa Liisa näkee Valkoisen kanin. Tee Liisasta ja kanista kuitenkin ”American McGee’s Alice” tietokonepelin hengen tai tyylin mukaisia.

Neljäs tehtävä:

Ideoikaa ryhmänä käsikirjoitus noin minuutin animaatiolle, Tekniikka ja tyyli vapaa.

Tarvittaessa kerrataan aiemmin opiskeltuja asioita ja tekniikkaa.

Kaikki alkaa jostain...

Tämä blogi on siis tarkoitettu Sataedun Animaatio ja pelit -opiskelijoille kurssien ohjeistukseksi ja opiskelun yleisemmäksikin tueksi.

Alkulämmittelyksi NAppk09 Kimmo Susi Männistön Facebookin kautta lähettämä linkki Anu Tukevan tutkimukseen musiikin ja kuvan suhteista videopeleissä:

http://www.widerscreen.fi/2011-1-2/katsaus-musiikin-ja-kuvan-suhteisiin-videopeleissa/