Oppimistehtävä 8
Tee eri tasoilla ohjeistetut animaatiot. Kaikille tasoille yhteisiä vaatimuksia ja ohjeita ovat:
- Animaatiot on suositeltavaa tehdä Adobe Animatella HTML5-animaatioina, mutta muitakin tekniikoita ja ohjelmia saa toki käyttää. Pääasia on, että saa tehtyä mallituotoksia vastaavia animaatioita. Ainakin 1- ja 3-tasojen tuotokset on mahdollista saada aikaan melko kätevästi muillakin ohjelmilla kuin Animatella.
- Riippumatta käytettävästä tekniikasta ja ohjelmasta animaatio tulee joka tapauksessa voida katsoa Windows-koneella jollakin yleisellä selaimella (IE, Firefox tai Chrome).
- Animaatioiden (scenen) leveys tulee olla 400-800 pikseliä ja korkeus 300-500 pikseliä.
- Oppimistehtävä palautetaan siirtämällä tuotettu animaatio WWW-palvelimelle (esimerkiksi users.jyu.fi) ja kirjoittamalla animaation WWW-osoite sekä palauttamasi tehtävän taso (1, 3 tai 5) Moodle-aktiviteettiin Oppimistehtävän 8 palauttaminen.
- Palautus on tehtävä viimeistään tiistaina 20.12.2016 klo 23:55. Myöhästyneitä palautuksia ei oteta vastaan.
Taso 1
Tee seuraavaa mallituotosta vastaava animaatio. Malliesimerkki on toteutettu kahdella eri tekniikalla, tehtävän palautuksena riittää toki yksi animaatio.
- Mallituotos, versio 1 (Adobe Animatella toteutettu HTML5-animaatio)
- Mallituotos, versio 2 (PowToonilla toteutettu)
Ohjeita
- Animaatiossa tikku-ukko (tikku-ukon muotoilussa saa käyttää omaa taiteellista silmää ;)) kipuaa mäen rinteen ylös, hyppää rotkon yli ja menee vielä mäen alas.
- Tikku-ukko kulkee koko ajan tasaisella nopeudella.
- Adobe Animatella tehdyssä mallituotoksessa liike on toteutettu Motion Guiden avulla, mutta tasolla 1 liikkeen voi toteuttaa myös Classic Tweenien avulla (jolloin jokaiseen "käännöskohtaan" tulee tehdä Keyframe).
Taso 3
Tee ensin tason 1 tehtävät ja jatka sitten animaatiota siten, että saat sen lopulta seuraavaa mallituotosta vastaavaksi.
- Mallituotos (Adobe Animatella toteutettu HTML5-animaatio)
Ohjeita
- Animaatioon on lisätty toinenkin tikku-ukko, joka lähtee vastakkaisesta suunnasta mäkeä ylös. Kyseisen tikku-ukon hyppy jää kuitenkin lyhyeksi, joten hän putoaa rotkoon.
- Molempien tikku-ukkojen tulee olla identtisiä, joten niiden toteutuksessa kannattaa hyödyntää symboleita.
- Molempien tikku-ukkojen liikenopeus on muutettu vastaamaan mäkiä, eli ylämäessä nopeus hidastuu ja alamäessä kiihtyy.
- Rotkoon putoavan tikku-ukon liike lähes pysähtyy ilmassa hetkeksi ("sarjakuvamaisesti") ennen kuin hän putoaa vauhdilla alas.
- Molempien tikku-ukkojen vartalon suunta muuttuu mäen muotojen mukaan, eli tikku-ukkojen pää ei osoita koko ajan suoraan ylöspäin.
Taso 5
Tee ensin tasojen 1 ja 3 tehtävät ja jatka sitten animaatiota vielä siten, että saat sen lopulta seuraavaa mallituotosta vastaavaksi.
- Mallituotos (Adobe Animatella toteutettu HTML5-animaatio)
Ohjeita
- Lisää animaatioon play- ja stop-painikkeet, joilla animaatio voidaan välillä keskeyttää ja käynnistää uudelleen.
- Estä animaation automaattinen käynnistyminen, eli animaatio saa käynnistyä vasta play-painiketta painamalla.
- Pysäytä animaatio automaattisesti viimeiseen frameen.
- Tee itse 4 uutta painiketta, joilla voidaan piilottaa tai tuoda uudelleen esille
jompikumpi tikku-ukko. Painikkeiden ulkoasu on vapaa, mutta niistä tulee käydä ilmi, mitä
painike tekee. Vinkkejä:
- Kannattaa tutustua JavaScriptin visible- ja mouseEnabled-ominaisuuksiin.
- Molempia edellä mainittuja ominaisuuksia voi käyttää esimerkiksi Movie Clip -symboleiden kanssa.
- visible-ominaisuus ei näytä toimivan Adobe Animatessa Guiden kanssa, mutta tämän voi kiertää muuttamalla Guiden Keyframeiksi (toiminto Convert to Keyframes).
- Voit toteuttaa vastaavan toiminnallisuuden myös vain kahdella painikkeella, eli yksi painike per tikku-ukko. Tällöin kyseisten painikkeiden tekstin/ulkoasun tulee muuttua sen mukaan, onko tikku-ukko näkyvissä vai piilotettu. Tämä tapa lienee hieman haastavampi kuin tehdä vastaava toiminnallisuus 4 painikkeella.
Käyttäjien kommentit