Demo 14 - Animaatiot II
- Symbolit
- Pathit ja Classic Motion Guide
- Ease
- Maskit
- Actions
- Animaation julkaisu
- Materiaalien tuominen näyttämölle
Jatketaan edellisessä demossa aloitettua interaktiivisen vektorigrafiikka-animaation tuottamisen harjoittelua Adobe Animate CC -ohjelmalla. Ohjelma on maksullinen ja se on asennettuna Agorassa ainoastaan mikroluokan C331.3 MAC-koneille. Ohjelman käyttöön löytyy ohjeita demomateriaalien lisäksi myös 8. luennon materiaaleista. Kannattaa katsoa etenkin luentovideo, jossa on esimerkkejä ohjelman käytöstä. Jos edellisen demon tehtävät jäivät kesken, niin jatka niiden tekemistä ennen tätä demoa.
Adobe Animate CC:hen saa ilmaiseksi kokeilulisenssin. Jos et siis pääse tekemään demoa Agoralle, niin voit ladata ja asentaa omalle koneellesi Animaten kokeiluversion.
Adobe Animate CC:ssä on mahdollista tehdä sekä HTML5-animaatioita että Flash-animaatioita. Nykypäivänä animaatiot kannattaa tehdä mieluummin HTML5-animaatioina, jotka toimivat Flashiä paremmin eri laitteissa.
Muutamia perusvinkkejä Adobe Animate CC -ohjelman käyttöön:
- Yleensä järkevin näyttötila ohjelmassa on Classic. Näyttötilan valinta on ohjelmaikkunassa ylhäällä oikealla.
- Animaation fyysisen koon saa valita Scenen asetuksista. Oletuksena se on 550 x 400 px, joka käy hyvin demoihin.
- MAC-koneissa "hiiren kakkospainikkeen" takaa löytyviin valintoihin pääsee käsiksi klikkaamalla hiirellä ctrl-näppäin pohjassa. Siispä kun demo-ohjeessa lukee "klikkaa hiiren kakkospainikkeella...", niin MACissä klikataan hiiren (ainoaa) painiketta pitämällä samaan aikaan ctrl-näppäin pohjassa.
Symbolit
Tehdään esimerkin mukainen liikkuva auto-animaatio. Aloita uusi HTML5-dokumentti ja tallenna se verkkolevyllesi sopivaan hakemistoon (tekovaiheessa voi käyttää myös paikallisen kiintolevyn hakemistoja). Vaihda heti aluksi animaation nopeudeksi 12 framea sekunnissa (Scenen asetuksiin 12 FPS).
- Valitse Insert | New Symbol.... Valitse tyypiksi Graphic. Anna symbolille nimeksi esimerkiksi rengas. Tee esimerkiksi Oval-, Pencil-, Line- ja Paint Bucket -työkaluja käyttäen vanteellinen rengas. Renkaan "urat" saa sopivalla reunaviivalla.
- Luo uusi Movie Clip -tyyppinen symboli valinnalla Insert | New Symbol... | Movie Clip. Nimeä symboli esimerkiksi autoksi. Rakenna auton runko olemassa olevalle pohjalayerille Pencil- tai Line-työkalulla ja ikkunat Rectangle Toolilla. Auton voi värittää Paint Bucket -työkalulla.
- Luo kaksi uutta layeriä, etu- ja takarenkaalle. Kopioi Librarystä (esim. hiirellä raahaamalla) pari rengasta paikoilleen omille layereilleen. Libraryn saa auki esim. valikosta Window | Library. Muuta renkaiden koko sopivaksi Free Transform -työkalulla.
- Lisää kaikille layereille pituutta 10 frameen asti.
- Tee rengas-layereille keyframe loppuun ja lisää niille Classic Tween ensimmäisestä framesta keyframeen.
- Valitse jommankumman renkaan ensimmäinen frame ja valitse sitten renkaalle Properties-ikkunasta (jos se ei ole auki, niin sen saa auki valikosta Window | Properties) Rotate-ominaisuuteen valinta CW (clockwise) yhdellä kierroksella. Tee sama toisellekin renkaalle.
- Testaa renkaiden pyörimistä Enterin painalluksella.
Pathit ja Classic Motion Guide
Laitetaan auto liikkumaan mäkiseen maastoon. Jatketaan edellisen auto-dokumentin muokkaamista.
- Siirry muokkaamaan sceneä (näyttämöä) klikkaamalla Scene-valintaa aikajanan alapuolelta.
- Tee näyttämön alareunaan esimerkiksi Oval-työkalulla isohko vihreä alue, jossa on rosoinen reuna. Lisää animaatiolle pituutta esim. 60 framea (= 5 sekuntia, jos muutit alussa framerateksi 12 fps).
- Muokkaa Subselection-työkalulla ellipsin reunoja siten, että venytät muutamista kohdista reunaa ylöspäin. Muuta maaston muotoja Bezier-käyrien kontrollipisteiden avulla. Tee maastoon "mäkiä" siten, että korkein mäki alkaa heti vasemmasta reunasta.
- Tee uusi auto-kerros. Kopioi Librarystä auto tähän kerrokseen. Valitse Free Transform -työkalu ja pienennä auton kokoa sopivaksi. Siirrä valkoinen pallukka (=rekisteröintipiste) auto-objektin alalaitaan. Siirrä auto korkeimman mäen (vasemman puoleisin mäki) päälle.
- Katso, että auto-kerroksessa on yhtä monta framea kuin muissakin kerroksissa (lisää frameja tarvittaessa). Napauta auto-kerroksen ensimmäistä framea hiiren kakkospainikkeella ja valitse Create Classic Tween.
- Valitse auto-kerros hiiren kakkospainikkeella ja napauta Add Classic Motion Guide. Piirrä uudelle kerrokselle Pencil-työkalulla maaston reunoja mukaileva viiva.
- Lisää keyframe autokerroksen loppuun. Siirrä auto viivan loppuun. Jos Classic Motion Guide toimii oikein, niin rekisteröintipisteen pitäisi automaattisesti tarrautua viivaan kiinni.
- Testaa animaatiota (paina Enteriä). Nyt auton pitäisi kulkea viivaa pitkin. Jos liike toimii hyvin, piilota viiva klikkaamalla Guide-layerillä "silmäsarakkeen" pistettä.
- Mene ensimmäiseen keyframeen auto-kerroksella. Valitse Properties-ikkunasta Rotate-kohdan alta Orient to path. Nyt auto kääntyy myös viivan mukaan.
Ease
Laitetaan auto kiihtymään alamäissä. Jatketaan edellisen auto-dokumentin muokkaamista.
- Klikkaa auto-kerroksen Properties-ikkunasta Ease-kohdan vierestä kynäkuvaketta (Edit easing).
- Jos kohdassa Use one setting for all properties on ruksi, ota se pois.
- Valitse Propertyksi Position ja muokkaa käyrää siten, että liike nopeutuu niissä kohdissa, joissa tekemässäsi maastossa on alamäkiä. Alla esimerkki muokatusta käyrästä (vastaa malliesimerkin alamäkiä): Kokeile Play-painikkeella aina välillä liikkeen toimintaa.
Maskit
Tehdään vielä autoa seuraava valokeila (maski, joka näyttää vain auton).
- Valitse auto-dokumentissa File | Export | Export Movie. Valitse tallennusformaatiksi SWF Movie. Aloita sen jälkeen uusi HTML5-dokumentti.
- Valitse File | Import | Import to Stage ja valitse juuri julkaisemasi .swf-tiedosto.
- Luo uusi layer ylimmäksi tasoksi. Tee siihen Oval-työkalulla pallo (pallossa täytyy olla joku täyteväri), joka liikkuu mäen päältä mäen alas suoraa reittiä. Liikkeen saat tehtyä normaalisti laittamalla loppuun keyframen ja luomalla Classic Tweenin keyframejen väliin. Sinun täytyy tehdä pallon liikkeelle suunnilleen sama kiihtyvyys Easen avulla kuin autollekin, jottei auto katoa kiihdytyksissä "valokeilasta". Pallon koko tulee olla hiukan autoa suurempi, jotta auto mahtuu kuvaan myös auton käännöksissä.
- Kun pallo ja sen liike ovat valmiita, valitse pallokerros hiiren kakkospainikkeella ja ponnahdusvalikosta valinta Mask. Kokeile toimintaa valinnalla Control | Test Movie | In Browser.
Actions
Toteutaan vielä napit, joilla animaation voi käynnistää ja pysäyttää. Jatketaan edellisen dokumentin muokkaamista.
- Toteuta ensin painikkeiden grafiikka luomalla kaksi uutta symbolia (Insert | New Symbol -> tyypiksi Button), toinen play-painikkeeksi ja toinen pause-painikkeeksi. Tee painikkeiden ulkoasusta haluamasi kaltainen, esimerkiksi työkalut Rectangle Tool, Line Tool, Paint Bucket Tool ja Text Tool ovat hyödyllisiä painikkeiden ulkoasun tekemisessä.
- Luo uusi layer. Etsi Librarystä (Windows | Library) luomasi painikkeet ja raahaa ne hiirellä näyttämölle haluamaasi kohtaan.
- Anna painikkeille kuvaavat nimet (esim. aloita ja pysayta) Properties-ikkunan <Instance Name> -kohtaan.
- Valitse painikkeet sisältävän tason ensimmäinen frame ja sen jälkeen Window | Actions.
Nyt tulet kooditilaan, jossa voidaan ohjelmoida animaation toimintaa. Kirjoita JavaScript-koodinpätkä, jolla
play-painiketta klikkaamalla saadaan käynnistettyä animaatio:
this.aloita.addEventListener("click", starttaa.bind(this)); function starttaa() { this.play(); }
Ensimmäinen koodirivi asettaa play-painikkeelle tapahtumankäsittelijän, jossa kutsutaan tiettyä funktiota painiketta klikattaessa. Koodissa aloita on play-painikkeelle annettu nimi ja starttaa kutsuttavan funktion nimi.
Toisella ja kolmannella koodirivillä kirjoitetaan starttaa-funktio. Animaatio saadaan käynnistettyä komennolla
play
.this
viittaa tässä painikkeen sisältämään aikajanaan.Macissä {-merkin saa näppäinyhdistelmällä alt + shift + 8 ja }-merkin näppäinyhdistelmällä alt + shift + 9.
- Tee vastaava operaatio (pysäytys) pause-painikkeelle. Millähän komennolla animaatio pysähtyy?
- Pysäyttämistä varten tulee siis tehdä pause-painikkeelle oma tapahtumankäsittelijä sekä sen kutsuma uusi funktio, joka pysäyttää animaation.
- Lisätään vielä automaattiset pysäytykset ensimmäiseen ja viimeiseen frameen.
Valitse painikkeet sisältävän layerin ensimmäinen frame ja kirjoita Actions-ikkunaan komento,
joka pysäyttää animaation (
this.stop();
). Nyt et tarvitse tapahtumankäsittelijää, sillä ohjelmakoodi käsitellään aina, kun animaatio saapuu tiettyyn frameen. - Valitse saman layerin viimeinen frame. Luo siihen keyframe. Nyt voit kirjoittaa siihen frameen saman koodin animaation pysäyttämiseksi.
- Testaa nappien toimintaa animaation katselutilassa (Control | Test Movie | In Browser).
HUOM! Tässä tehtävässä kokeiltiin vain pintaraapaisun verran JavaScript-ohjelmointikieltä HTML5-esityksessä. Tehtäessä laajempia ja monipuolisempia animaatioita juuri JavaScript-ohjelmointi tulee keskeiseen asemaan. Sillä pystyy siis tekemään paljon paljon muutakin kuin vain yksinkertaisia painikkeiden toiminnallisuuksia. ;-)
Animaation julkaisu
- Julkaistaan animaatio lopuksi. Valitse ohjelman valikoista File | Publish Settings... ja laita asetukset (mm. tiedostonimi ja tallennussijainti HTML-tiedostolle) kuntoon. Klikkaa sen jälkeen nappia Publish. Lopuksi klikkaa OK.
- Nyt projektitiedoston .fla kaverina pitäisi olla valitsemassasi hakemistossa
tiedostot
.html
ja.js
. Siirrä.html
ja.js
-tiedostot users.jyu.fi-palvelimellesi haluamaasi hakemistoon.- Ohjeet W-levyn saamiseen näkyviin yliopiston MAC-koneissa: https://www.jyu.fi/itp/ohjeet/tutoriaalit/macintosh-eta-verkkolevyt/mac-map-verkkolevyt.
- Kokeile mennä selaimella katsomaan omaa HTML5-animaatiotasi. Sen pitäisi
löytyä osoitteesta
http://users.jyu.fi/~omatunnus/valitsemasi_hakemisto/animaation_tiedostonnimi.html
- MACissä ~-merkin saa painamalla alt-näppäin pohjassa näppäintä, joka sijaitsee Å-kirjaimen ja Enterin välissä.
- Julkaise vastaavalla tavalla myös ensimmäisenä tehty pong-animaatio (demo 13) ja testaa senkin toiminta WWW-palvelimella.
Materiaalien tuominen näyttämölle
Tämä ohje on lisätietona, eli ei liity suoraan demotehtäviin.
- Useasti esityksiä tehtäessä voi olla hyödyllistä tuoda esitykseen valmista materiaalia, esimerkiksi kuvia. Tämä onnistuu valikon File | Import | Import to Stage kautta. Jos mahdollista, kuvat kannattaa tuoda vektorimuodossa (.svg), jolloin niiden laatu säilyy myös skaalatessa objekteja.
- Tuonnin jälkeen tuotuja objekteja voi käsitellä kuten itse Animatella tehtyjä objekteja.
- Tuodun objektin voi myös muuttaa grafiikaksi, painikkeeksi tai Movie Clipiksi klikkaamalla tuodun objektin päällä hiiren kakkospainikkeella ja valitsemalla Convert to Symbol.
Käyttäjien kommentit