Animaatiot - Luento 8

• Luentotaltiointi
• Animaatio opetuksen havainnollistusvälineenä
• HTML5-animaatiot Adobe Animatella
  • Ohjeita HTML5-animaatioiden tekemiseen
  • Animaten käyttö käytännössä

Käydään ensin läpi animaatioiden perusteita ja sen jälkeen näytetään käytännön esimerkkejä HTML5-animaatioiden tekemisestä Adobe Animate CC -ohjelmalla.

Animaatio opetuksen havainnollistusvälineenä

Opetusta voidaan tukea useilla eri havainnollistustavoilla. Yksi käyttökelpoinen tapa on käyttää oppimateriaalina animaatioita. Animaatiot, etenkin interaktiiviset, voivatkin parhaimmillaan olla erinomainen tapa havainnollistaa opetusta.

Pitkään animaatioita tehtiin lähinnä Flashillä. Viime vuosina Flash tekniikkana on kuitenkin alkanut jäädä pois mm. tietoturvasyistä. Enää Flashiä ei esimerkiksi tueta mobiililaitteissa, minkä vuoksi Flash-tekniikan tilalle kannattaa etsiä muita vaihtoehtoja.

Flashin tilalle suositellaan yleensä HTML5-animaatioita. Tällä luennolla käsitelläänkin vektorianimaatioiden tekemistä juuri HTML5-animaatioina. Ohjelmana käytetään Adobe Animate CC -ohjelmaa. Animaatioita voi toki tehdä muillakin tekniikoilla ja ohjelmilla kuin Adobe Animatella HTML5-animaatioina:

• Ilmaisia Animatelle vaihtoehtoisia ohjelmia animaatioiden tekemiseen ovat esim. seuraavat: Synfig Studio, Pencil2D ja PowToon. PowToonia lukuun ottamatta kurssin opettajalla ei ole kuitenkaan henkilökohtaista kokemusta kyseisten ohjelmien käytöstä.
• 3D-animaatioita pystyy puolestaan tekemään esimerkiksi ilmaisella Blenderillä.

HTML5-animaatiot Adobe Animatella

• Adobe Animate CC on kehitysympäristö, jolla voi tuottaa animaatioita tai multimediaesityksiä esimerkiksi WWW-sivuille. Animaatiot ovat vektorigrafiikka-animaatioita, joissa voi olla mukana myös interaktiivisuutta.
• Aiemmin vastaavan kehitysympäristön nimi on ollut Adobe Flash, eli Adobe Animate on kehitetty Flashin seuraajaksi. Animatella voi edelleen luoda myös Flash-animaatioita, mutta tällä luennolla käsitellään HTML5-animaatioiden luomista.
• HTML5-animaatiot luodaan Animatessa canvas-elementin päälle.
• Interaktiivisuus HTML5-animaatioihin luodaan JavaScript-ohjelmointikielellä. Ilman ohjelmointiakin Animatella on kuitenkin mahdollista saada aikaan monipuolisia animaatioita.
• Kuvankäsittelytaidoista on hyötyä myös Animaten kanssa, koska esimerkiksi tasot ovat Animatessa suunnilleen samanlainen peruskäsite kuin kuvankäsittelyssä. Videoeditointitaidoista on myös hyötyä, koska myös Animatessa toimitaan aikajanalla.
• Animatella tuotetut HTML5-animaatiot toimivat suoraan yleisimmillä WWW-selaimilla eivätkä ne tarvitse erillisiä selaimen lisäosia kuten Flash-animaatiot.
• Kehitystyökalussa käytettävä projektitiedosto on FLA-muodossa. Internetissä animaatiot julkaistaan siis HTML-sivuina.
• Agorasta Adobe Animate CC löytyy erikoismikroluokan C331.3 MAC-koneilta.
• Ohjelma on maksullinen, mutta siitä saa ladattua itselleen Internetistä kokeiluversion, jonka avulla ohjelmaa pääsee testaamaan normaalisti.

Ohjeita HTML5-animaatioiden tekemiseen

• Demojen 13 ja 14 materiaalit
• Animate CC tutorials
• Using HTML5 Canvas In Animate CC: JavaScript Basics
• http://www.html5canvastutorials.com/

Animaten käyttö käytännössä

Näytetään seuraavaksi Adobe Animate CC -ohjelman käyttöä käytännössä ja tehdään ohjelmalla esimerkkejä. Demoissa tullaan tekemään saman tyyppisiä tehtäviä.

Käydään läpi seuraavia toimintoja:

• Perusteet
• Perusmuodot
• Tasot
• Liike (Tweenit)
• Symbolit
• Pathit ja Guidet
• Kiihtyvyys (Ease)
• Materiaalien tuominen
• Painikkeet (Actions, JavaScript)
• Julkaisu