Adobe Animate -animaation tekeminen

Mikä Adobe Animate on?

Adobe Animate on animaatio-ohjelma, jolla voi tehdä esimerkiksi HTML5-bannereita tai mainosanimaatioita videotauluihin. Vakavasti animaattorin alalle suuntautuvan kannattaa Adoben työkaluista opetella After Effects, mutta usein printti- tai verkkomedian puolelta tulevien tekijöiden on ollut helpompaa omaksua animaation perusteita Adobe Animaten kautta. Erilaisia animaatio-ohjelmia on ladattavissa runsaasti. Ilmainen vaihtoehto Animatelle on esimerkiksi Google Webdesigner. Kuten yleensä, ohjelmia on hankala laittaa paremmuusjärjestykseen. Animate on järkevä valinta, jos käyttäjällä on kokemusta Adoben ohjelmista ja etenkin jos Photoshop tai Illustrator on hallussa. Tosin Photoshopissakin on mahdollista tehdä kätevästi gif-animaatioita, joten se on myös yksi vaihtoehto yksinkertaisten animaatioiden luomiseen. Edellä mainittujen ohjelmien tiedostot voi tuoda suoraan layereineen animaation grafiikaksi. Tämän artikkelin ohje alkaa tilanteesta, jossa animaation suunnittelutyö ja grafiikat on jo tehty. Kirjoituksessa on avattu muutamia animaation peruskäsitteitä, jotka ovat samankaltaisia lähes kaikissa animaation tekoon tarkoitetuissa ohjelmissa.

Työn aloittaminen

Animaation tekeminen kannattaa aloittaa oikean kokoisen ruudun määrittämisellä. Animatessa ruudun aluetta, jossa animaatio näkyy, kutsutaan nimellä Stage. Oikean Stagen koko riippuu animaation käyttötarkoituksesta. Videoksi julkaistavan animaation ruudun koko voi olla esimerkiksi 1920 x 1080 pikseliä ja bannerin koko voi olla olla esimerkiksi728 x 90 pikseliä.  Stagen koon lisäksi aineisto-ohjeissa, eli spekseissä, voi olla rajoitus myös animaation tiedostojen yhteiskoolle. Ensimmäinen ilmoitetaan yleensä pikseleinä ja jälkimmäinen kilotavuina.

Animatessa uuden animaation voi aloittaa monella tavalla, esimerkiksi valikkokomennolla File/New, jolla saa näkyviin alla olevan näkymän. Näkymästä voit valita sopivan phjan animaatiollesi tai kirjoittaa tarkat määrittelyt oikean laidan Details-paneeliin.

Grafiikan käsittely

Animatessa on omat piirtämisen työkalunsa, mutta usein grafiikka luodaan Photoshopilla tai Illustratorilla ja tuodaan Animateen.

Animaation liikkuvat grafiikat tulee Animatessa muuntaa symboleiksi. Ainoa poikkeus tästä ovat shape tween-animaatiot, jotka perustuvat vektoripisteiden liikkeeseen. Symboli on Animate-ohjelman objekti, joka voi sisältää esimerkiksi kuvaa, ääntä tai koodia. Symboli voi ymmärtää omaksi erilliseksi säilöksi, joka voi pitää sisällään muita säilöjä ja sisäkkäisiä animaatioita. Toisten symbolien sisällä olevista animaatioista hyvä esimerkki ovat spritesheet-animaatiot. Animatessa on 3 symbolityyppiä:

  • Graphic on paras silloin, kun symbolia animoidaan, mutta ei ohjelmoida
  • Movieclip on paras silloin, kun symbolia halutaan ohjelmoida
  • Button on kätevin silloin, kun symbolista halutaan tehdä painike

Animointi

Timeline on Animatessa käyttöliitymän elementti, jossa kuva laitetaan liikkumaan. Timeline on jaettu yksittäisiin ruutihin, joita näytetään perääkkäin. Tällaisesta ruudusta käytetään nimitystä frame, suomalaisittain freimi. Animaation asetus FPS (Frames Per Second) määrittelee sen, kuinka monta framea, eli kuvaa, animaatiossa näytetään sekunnin aikana. Periaate on, että mitä enemmän frameja sekunnissa näytetään, sitä paremmalta ja pehmeämmältä liike näyttää.

Tween tarkoittaa Animatessa kahden keyframen välisiä, ohjelman laskemia välivaiheita. Ellei tee stop motion -tyylistä animaatiota, frame ei siis tarvitse tehdä yksi frame kerrallaan. Tween näkyy Timeline-paneelissa nuolena kahden keyframen välissä.

Keyframe määrittelee, milloin animoitavan objektin ominaisuudet alkavat muuttua. Tämä voi olla esimerkiksi liikkeen suunta. Alla näkyvässä videossa valkoisella pallolla on 5 keyframea, jotka on korostettu punaisella kehyksillä. Kuten videosta näkyy, ovat loopin, eli alusta loppuun monta kertaa näytettävän liikkeen, alun ja lopun keyframet identtiset.

Animate-ohjelmassa on 3 tween-tyyppiä, joilla kaikilla on omat ominaispiirteensa

  • Classic tween soveltuu parhaiten suoraviivaisiin ja -kulmaisiin liikkeisiin
  • Shape tween soveltuu muodon muutosanimaatioihin
  • Motion tween soveltuu kaareviin liikeratoihin, joissa animoidaan erikseen useita ominaisuuksia.

Liikkeen sujuvuudella on paljon merkitystä lopputuloksen kannalta. Yksi tapa tehdä liike paremman näköiseksi on käyttää Easing-asetusta. Easing tarkoittaa animaation liikkeen hidastamista luonnollisemman ja paremman näköisen liikkeen aikaan saamiseksi. Useimmiten liikettä hidastetaan sen alussa tai lopussa. Ease-In hidastaa animaatiota liikkeen alussa, Ease-Out sen lopussa.

Alla olevassa videossa mustan pallon liikkeessä ei ole käytetty easing-asetusta. Valkoisen pallon liike näyttää paremmalta, koska sen ensimmäisessä liikkeessä on Ease-Out, eli se hidastuu liikkeen loppua kohden. Jälkimmäisessä valkoisen pallon liikkeessä on Ease-In, jolloin pallo lähtee hitaasti liikkeelle, mutta nopeutuu myöhemmin.

Animatessa easing lisätään Properties-paneelista silloin, kun animaation tween on valittu Timeline-paneelista.

Äänet

Äänet ovat usein vähemmän kuin 20% mediatuotannon kustannuksista, mutta niiden tekeminen huolella lisää tehoa 80%. Sosiaalisen median kautta jaettaessa ääniä ei välttämättä kuulla, joten sanoman välittäminen myös tekstin avulla on tärkeää. Alla olevassa videoon on lisätty äänet, mutta muuten se on identtinen ylempänä olevan, keyframen ideaa esittelevän videon kanssa. Video tuo hyvin esiin, miten äänillä voi tehostaa esimerkiksi erilaisten biljardipalloon osuvien esineiden materiaalien erilaisuutta.

Animatessa äänet tuodaan ensin ohjelmaan Library-paneeliin ja siirretään sen jälkeen Timelinelle.

Animaation äänien tuottamisessa kekseliäisyys on usein tekniikkaa tärkeämpää. Usein ei edes tarvitse hakea autenttisia äänitystilanteita vaan keksiä, miten animaatioon sopivan ääneen voi tehdä. Tällä tavalla tuotettuja ääniä sanotaan Foley-ääniksi. Animaation äänessä paras tulos tulee usein, kun liitoittelemme ääntä emmekä pyri totuudenmukaiseen kerrontaan.

Koska esimerkissä animaation tekijällä ei ollut biljardipöytää, animaation äänet tehtiin alla olevassa kuvassa näkyvien puulusikan, kahden kiven sekä vasaran avulla. Äänet äänitettiin nappimikrofonilla puhelimeen ja editoitiin äänieditorilla. Tällä tavalla luotujen äänien taso riittää verkkoon, esimerkiksi Youtubeen ladattaviin animaatioihin. Luonnollisesti vaativamman tason elokuvaprojektit vaativat järeämmät työkalut.

Kuvassa ovat animaation äänien tekemiseen käytetty puulusikka, kaksi kiveä, vasara ja nappimikrofoni.

Julkaisu

Julkaisu tarkoittaa tässä yhteydessä animaation muuntamista johonkin yleisesti ymmärrettyyn tiedostomuotoon. Tällaisiä ovat esimerkiksi gif-animaatiot, videoformaatit sekä html5-animaatiot. Tämä on animaation tekemisen viimeinen työvaihe. Kun animaatio on julkaistu oikeaan muotoon, sen voi jakaa katselijoille oikeiksi katsottuja kanaville.

Animatessa HTML5-muotoiset animaatiot julkaistaan File/Publish-komennolla ja muut tiedostomuodot File/Export-komennolla.

Jaa kirjoitus muille

Jätä kommentti