1. Animaatiot opetuksessa
Maksuttomien animointisovellusten esittelyä,
esimerkkejä ja jokunen näkökulma opetukseen
Helmikuu 2019
Matleena Laakso
Blogi: www.matleenalaakso.fi
Twitter: @matleenalaakso
Diat: www.matleenalaakso.fi/p/koulutusdiat.html Kuvat yllä ovat ruudunkaappauksia
tekijän YouTube-videoista

2. Tämäkin diasarja vanhenee
SlideShare-palvelu ei enää mahdollista diojen
päivittämistä niin, että linkit säilyisivät
ennallaan. Niinpä siellä on monista dioistani
useita versioita. Uusimman version löydät
jatkossa kätevimmin blogini koulutusdiojen
sivulta.
Sieltä löydät diasarjoja ja blogilinkkejä myös
mm. videoista, ruudunkaappausvideoista,
digijulkaisuista ja VR/360-sisällöistä:
ww.matleenalaakso.fi/p/koulutusdiat.html

3. Diasarjan animaatiosovellukset
Kaikista esitellyistä sovelluksista on olemassa maksuton versio, osasta
myös maksullinen. Lopussa on muutama vinkki animaatioiden ja
videoiden jakamiseen.
• Dvolver
• Parapara
• Animatic by Inkboard
• FlipaClip
• TextingStory
• Voki
• Tellagami
• I can animate
• Biteable
• Powtoon
• Draw and Tell HD
• Toontastic 3D
• Drawastickman Kuva: Wikimedia Commons, PD

4. Mikä on animaatio?
fi.wikipedia.org/wiki/Animaatio
”Animaatio (latinan sanasta animatio ’elävöittäminen’) on
tekniikka, jossa elokuva toteutetaan kuva kuvalta.
Animaatio voidaan valmistaa kuvaamalla piirrettyjä pieniä
muutoksia sisältäviä kuvia filmille tai tekemällä pieniä
muutoksia fyysiseen malliin (esimerkiksi esineeseen,
animaationukkeen tai vahaan) ja kuvaamalla muutokset.
Kun kuvattu filmi näytetään normaalinopeudella, peräkkäin
nopeasti vaihtuvat kuvat luovat illuusion liikkeestä.
Animaatio voidaan toteuttaa myös tietokoneen avulla.”

5. Animaatioita on monenlaisia
fi.wikipedia.org/wiki/Animaatio
Erilaisia animaatiotekniikoita voi myös yhdistellä
• Piirrosanimaatiot tehdään nykyisin usein tietokoneella
• Stop motion -animaatio kuvataan ruutu ruudulta.
• Nukkeanimaatio ja vaha-animaatio
• Pala-animaatiossa hahmot muodostetaan esim. paperista leikatuista
paloista, joita liikutellaan kuvauspöydällä ja kuvataan ylhäältäpäin.
• Esineanimaatiossa liikutellaan esineitä ja kuvataan niitä ruutu ruudulta.
• Piksillaatioanimaatio kuvataan ihmisnäyttelijöillä, joita käytetään samaan
tapaan kuin nukkeanimaatiossa.
• 3D-animaatiossa käytetään 3D-tietokoneohjelmistoa, jossa mallinnetuilla
hahmoilla animaatio toteutetaan. Tietokone laskee animaation liikesarjat,
valaistuksen, kameran liikkeet ja tekstuurit.

6. Näin tehtiin Hullu - hullumpi – yläaste
Yle Areena: areena.yle.fi/1-3827532

7. Toby Price: https://twitter.com/jedipadmaster/status/559346871424925696/photo/1

8. Animaatiot opetuksessa
• Yksinkertaisilla animaatiotyökaluilla opettaja viestii verkkoympäristössä
toisinaan yhtä nopeasti kuin kirjoittamalla. Verkkoympäristöön on hyvä
tarjota vaihtelevia sisältöjä ja työskentelytapoja.
• Helpoilla ja jopa kirjautumatta toimivilla sovelluksilla voidaan tehdä
lyhyitä animaatioita oppituntien aikana.
• Opettaja ja opiskelijat animaatioiden tekijöinä
– Milloin animaatio on tekstiä tai muunlaista videota parempi?
– Kuka valitsee tekotavan ja työkalut?
– Valmispohjilla vai alusta alkaen itse tehden?
– Onko pääpainoa animaatiotekniikoiden ja ilmaisun opettelussa vai onko se
enemmänkin väline muun sisällön oppimiseen?

9. Eri sovelluksilla tehtyjä
esimerkkejä:
padlet.com/matlaakso/digitarinat

10. Animaatioita pc-koneella
• Vartissa valmista: tee animaatioita pc-koneella valmiiden hahmojen,
taustojen ja musiikin avulla: www.dvolver.com/moviemaker/index.html
• Esikatselun jälkeen saat videon talteen lähettämällä sen s-postiisi kohdasta
Recipients email(s). Sen jälkeen saat myös upotuskoodin.

11. Ruudunkaappauskuva: http://www.dvolver.com/moviemaker/make.html

12. Parapara toimii kirjautumatta
parapara-editor.mozlabs.jp/sandbox
Piirrä, lisää uusi ruutu ja piirrä taas. Jos haluat, että aiemmin piirtämäsi näkyy
myös uudessa ruudussa, piirrä se uudelleen. Piirtämistä helpottaa himmeänä
näkyvä kuva aiemmasta ruudusta.
Tästä saat linkin
animaatioon ja
sieltä myös
upotuskoodin

13. Piirrosanimaatioita mobiilisti
Animatic by Inkboard (iOS, Android)
• Piirrosanimaatiosovellus opastaa kädestä pitäen animaation tekoon.
Ohjelma näyttää piirrettävänä olevan ruudun taustalla edelliset ruudut.
Valmiit tuotokset saa ulos videoina tai gif-muodossa.
Samankaltainen sovellus: StickDraw (Android)

14. FlipaClip (Android, iOS)

15. TextingStory Chat Story Maker
(Android, iOS)
Sovelluksen avulla teet
helposti videoita
vuorovaikutustilanteista
tekstareiden/chatin
muodossa.

16. Voki for Education
Valitse hahmo, asusteet, tausta jne ja sanele viestisi (ilmaisversiossa max
60 sek). Voit muokata myös ääntä.
• Mobiilisovellus (Android, iOS) tai pc-koneen selain: voki.com
• Maksuttomassa versiossa rajatut ominaisuudet ja sillä voi tehdä/jakaa vain
muutamia Vokeja.

20. Tellagami (iOS)
Animoidut hahmot, jotka puhuvat
sanelemasi viestin
• Ilmaisversiossa max. 30 sek.,
maksullisessa edu-versiossa
90 sek. ja monipuolisempi
sisältö.
Ei toimi iOS 11-
versiolla

21. Animaatioita kuva kuvalta
I can animate (Android, iOS)
• Animaatioita perättäin otetuista valokuvista (esineet, legot, muovailuvaha,
paperikuviot,..) ja timelapse-videot.
• Ilmaisversiolla voi tehdä kolme tarinaa perusominaisuuksilla. Maksullisella
versiolla (3 €) voi tehdä lisää tarinoita ja mm. säätää nopeutta.

22. biteable.com
Selaimella (myös mobiililaitteissa) toimiva helppo sovellus
animaatioiden tekemiseen
• Animaatioesitykset tehdään valitsemalla valmiiksi animoituja kohtauksia
(scene) ja lisäämällä niihin omat tekstit.
• Useimpiin kohtauksiin mahtuu tekstiä vain 80 merkkiä.
• Esitykseen voi valita taustamusiikin, valikoimaa on runsaasti.
• Maksuton versio: viisi animaatiota/kk.
• Bloggaus: www.matleenalaakso.fi/2018/10/biteable.html
• Esikatselun lataaminen hidasta (noin minuutti/dia)

23. Biteable-animaation tyylin valinta

24. Biteablen muokkausnäkymä

25. Maksuttomassa versiossa on tarjolla
tuhat erilaista kohtausta (scene)
Tässä on näkyvillä
muutama kohtaus
teemasta
INFOGRAPHIC.
Klikkaamalla näet
animoinnin.

26. Esikatsele  Jaa animaatio
Maksuttomalla versiolla tehdyt animaatiot ovat julkisia. Saat linkin ja
upotuskoodin Biteablen sivulle. Animaatiot voi jakaa myös mm. YouTubeen.

27. www.powtoon.com
Powtoon toimii vain pc-koneella, ei mobiilisti
• Valmispohjilla (templates) ja Quick edit –näkymässä animaation luominen
on erittäin helppoa.
• Jos luot animaation alusta asti itse ja/tai haluat monipuoliset
mahdollisuudet muokkaamiseen, käytä Full studio –näkymää.
• Ilmaisversiossa animaation kesto max 3 min. Rajattu määrä valmispohjia,
objekteja ym.
• Ks. www.matleenalaakso.fi/2018/10/powtoon.html
• HUOM: Jos olet käyttänyt Powtoonia ennen syksyä 2017, muunna
animaatiosi Flashista HTML5-muotoon viimeistään 31.3.2019 tai jaa
säästettävät YouTubeen. Lisätiedot: www.powtoon.com/blog/sunsetting-powtoon-flash-studio

28. Aloita valitsemalla Powtoonin tyyppi
Valitse tyhjä pohja (from scratch) tai animaation tyyppi (esim. explainer
videos), jolloin näkyviin avautuu lisää valmiita pohjia.

29. Esikatsele ja valitse valmispohja
PRO ja PRO+ -pohjat eivät kuulu maksuttomaan tiliin.

30. Quick Edit: valmiiden Powtoon-pohjien
muokkaaminen on helppoa!

31. Quick Edit: voit luoda animaation
vain muokkaamalla tekstiä
Valitse sana/tekstiä. Voit
muokata sen kokoa ja väriä.
Rattaasta aukeavat
monipuolisemmat vaihtoehdot
kuten lihavointi ja tekstin
animointi.

32. Full Studio antaa monipuolisemmat
työkalut ja sisällöt muokkaamiseen

33. Valikosta avautuu uusia hahmoja,
taustoja, tekstiä, objekteja ym.

34. Draw and Tell HD (iOS)
Sovelluksella voi äänittää omia tarinoita, joiden taustakuvat piirtää itse tai
värittää. Liikkuvia elementtejä saa tarroista, joissa on mm. kuvia,
puhekuplia, kirjaimia ja numeroita.
• Tarinat voi julkaista yhden tai useamman kuvan mittaisina.
• Tarinat julkaistaan viemällä ne ensin iPadin kuviin.
• Ks. bloggaus: www.matleenalaakso.fi/2018/04/draw-and-tell.html

37. Toontastic 3D (Android, iOS)
Luo tarinoita, joissa käytät valmiita tai piirtämiäsi hahmoja, animoit niiden
liikkeet ja puhut hahmojen viestit tai muun selostuksen.
1. Aloita suunnittelemalla tarinan juoni ja rakenne (kuva alla).
2. Valitse tai piirrä kunkin kohtauksen tausta ja hahmot. Animoi ja äänitä tarina
kohtaus kerrallaan liikuttaen samalla hahmoja. Voit myös lisätä musiikkia.
3. Tallenna laitteellesi ja sieltä esim. YouTubeen tai O365:een.

40. Jakaminen ja kokoaminen
Videot jaetaan usein linkillä tai upottamalla. Useimmiten ne voi ladata
sovelluksesta myös omalle laitteelle, pilveen tai YouTubeen.
Videot tai niiden linkit voidaan koota yhteen esim.
• Yhteiselle kanavalle YouTubeen tai Vimeoon
• Office365:een (esim. Stream, Teams, OneDrive)
– Stream-videoidenjakopalveluun voit luoda kanavia ja määritellä niiden
näkyvyyden organisaation sisäisesti. Kaikissa organisaatioissa oppijoilla
ei ole oikeutta lisätä videoita Streamiin.
– OneDrivestä videon voi jakaa linkillä myös organisaation ulkopuolisille.
• Sähköiseen oppimisympäristöön
• Omiin blogeihin tai kurssin yhteiseen blogiin
• Padlet-seinälle: ks. esim. padlet.com/matlaakso/digitarinat
• Yhteisen hashtagien avulla esim. Twitteriin
• Yhteiseen digijulkaisuun, esim. Sway tai Adobe Spark.

41. YouTubeen jakaminen
Suuri osa erilaisista video- ja animaatiosovelluksista tarjoaa jakamista
suoraan YouTubeen. Jos se ei onnistu, jaa tuotos sovelluksesta saatavalla
linkillä tai tallenna tuotos ensin laitteellesi ja jaa sieltä YouTubeen.
• Tarvitset Google-tilin (esim. gmail). Sen voi tehdä ryhmälle yhteiseksikin.
• Voit perustaa kanavia (oma, oppilaitos, oppiaine, kurssi, projekti,..).
• Videoiden jakotavat: yksityinen, piilotettu tai julkinen.
• HUOM: Mobiilaitteita käytettäessä harvoin pääset muokkaamaan YouTuben
kaikkia asetuksia (esim. käyttölupa tai jakotapa). Kun kirjaudut samoilla
tunnuksilla pc-koneelta, pääset
aina muokkaamaan kaikkia
kanavasi ja yksittäisen
videon asetuksia.
Kuva: geralt, pixabay.com, CC0

42. YouTubeen jakaminen on helppoa
PowToonista voit jakaa
videon suoraan
YouTubeen.
Käy sen jälkeen
muokkaamassa
asetukset selaimella.

43. Muokkaa tiedot kahdella välilehdellä:
perustiedot ja lisätiedot
kaksi välilehteä

44. Muokkaa tiedot kahdella välilehdellä:
perustiedot ja lisätiedot
Sivupalkista näet
mm. tilastoja ja
löydät
editointityökalut

45. www.drawastickman.com
• Piirrä tikku-ukko ja sille erilaisia esineitä sitä mukaa, kun
englanninkielinen tarina etene.
• Toimii selaimella, tarjolla myös useita mobiilisovelluksia, sekä
ilmaisia että maksullisia. (Android, iOS).

46. www.drawastickman.com
Kokei
-le!

47. • CC-lisenssien suomenkielinen verkkosivusto: creativecommons.fi
• CC BY-SA 4.0 eli Creative Commons Nimeä-Jaa samoin 4.0 Kansain-
välinen -lisenssi: creativecommons.org/licenses/by-sa/4.0/deed.fi
lyhyesti:
– Sinä saat jakaa ja muuntaa tätä diasarjaa, myös kaupallinen
hyödyntäminen on sallittu.
– Ehtona on, että viittaat aina alkuperäiseen tekijään ja lisäät linkin tähän
diasarjaan. Muokattu teos tulee jakaa tällä samalla lisenssillä.
• Tätä lisenssiä laajempia oikeuksia voit kysyä tekijältä:
www.matleenalaakso.fi
Tämä diasarja on lisensoitu Creative
Commons -lisenssillä CC BY-SA 4.0