Oppimistehtävä 8

• Taso 1
  • Ohjeita
• Taso 3
  • Ohjeita
• Taso 5
  • Ohjeita

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.