# timOhjeet

Animaatioiden teko

Animaatioita voidaan tehdä esimerkiksi Aalto-yliopiston Acos-palvelimella ja Kelmu-editorilla ja askeltimella. Tai oikeastaan tässä animaatioilla tarkoitetaan annotaatioita kuvaan tai olemassa olevaan animaatioon.

Esimerkkejä animaatioista:

# hello1

# sceneBuilderAnimaatio

Annotatioiden tekeminen

Kuvan päälle tehdyn animaatio tehdään seuraavasti.

Alkuvalmistelut:

Tallenna kuva jonnekin https: -palvelimelle. Esimerksi TIMin Upload file/image käy. Jatkossa tästä osoitteesta käytetään nimeä IMAGE.
Ota seuraava osoite leikepöydälle ja muuta siinä kuvan osoite oikeaksi ja anna sopiva animaationnimi id= jälkeen.
http://www.cs.hut.fi/~ttsirkia/kelmukuva/editor.html?id=NIMI&image=IMAGE&steps=999
Klikkaa Animation editor
Klikkaa kerran kuvan alla oleva Eteen-painiketta (>) niin että taakse-painike (<) on aktiivisena
Klikkaa Settings
Klikkaa Point Undo button, kuittaa OK pois.
Heiluta hiirtä (painamatta mitään) sen painikkeen päällä, josta haluat käyttäjän siirtävän animaatiota taaksepäin (eli yleensä <). Painike korostuu vihreällä, kun se on määritelty.
Tee sama Step buttonin määrittämiseksi.
Paina sitten uudelleen kuvan alla olevaa <-painiketta, jotta se muuttuu jälleen harmaaksi. Tallenna sen jälkeen asetukset Save settings-painikkeella.

Annotaatioiden piirtäminen:

Valitse haluamasi piirrossymboli ja kun se ilmestyy näyttöön, vetele ja siirtele sopivaan kohtaan. Huomaa että teksteissä laatikko kannattaa kirjoittamisen jälkeen pienentää mahdollisimman pieneksi.
Paina sen jälkeen >-painiketta, jolloin voit piirtää seuraavan askeleen merkinnät.
Toista vaiheita 1 ja 2 kunnes olet tehnyt kaikki haluamasi askeleet. Eri askelten välillä voi liikkua kuvan alla olevilla <- ja >-painikkeilla (ei siis editorin aliaskeleiden liikkumiseen tarkoitetuilla nuolipainikkeilla).
Kun olet valmis, katso viimeisen askeleen numero. Jatkossa viitataa STEPS (saattaa olla että STEPS pitää olla yhtä suurempi???).

Animaation tallentaminen

Paina Export
Ruutuun tulee animaation jsonp-koodi.
Valista kaikki (Ctrl-A)
Kopioi (Ctrl-C)
Aukaise omassa koneessasi joku tekstieditori (ei Word), esim. Notepad++ tms.
Liimaa koodi editoriin ja tallenna jonnekin levyllesi tiedostoksi jonka nimi loppuu .jsonp
Lisää tiedosto ja kuvasi väliaikaisesti TIM dokumenttiisi, tulee esim linkit:

[File](/files/114125/a.jsonp)
[Image](/images/114126/documentHierarcy.png)

Tällöin vastaavat tarvittavat linkit olisivat:

JSONP: https://tim.jyu.fi/files/114125/a.jsonp
IMAGE: https://tim.jyu.fi/images/114126/documentHierarcy.png

Kokeile animaation toimintaa selaimen toisella sivulla, johon kirjoitat alla olevan linkin korvaten kohdat: NIMI, JSONP, IMAGE ja STEPS sinun vastaavilla:
```
https://tim.jyu.fi/csstatic/kelmu/kelmu.html?id=NIMI&definition=JSONP&image=IMAGE&steps=STEPS
```
Lisää Tim dokumenttiisi seuraavan sisältöinen lohko jossa korvaat NIMI-kohdan animaatiosi nimellä ja JSONP ja IMAGE kohdat niiden oikeilla osoitteilla. Timiin laitettuna osoitteista saa jättää pois osaan https://tim.jyu.fi. Sekä tietysti vaihdat tekstit haluamaksesi. Korvaa STEPS askeleiden lukumäärällä.

``` {plugin="showVideo" #NIMI}
iframe: true
lazy: false
header: "Animaatio: Tutki SceneBuilderin hierarkia-alueen käyttöä"
stem: Askella nuolilla
open: true
videoicon: false
hidetext: Piilota animaatio
type: small
videoname: "Tutki SceneBuilderin hierarkiaa"
width: 820
height: 560
file: "https://tim.jyu.fi/csstatic/kelmu/kelmu.html?id=NIMI&definition=JSNOP&image=IMAGE&steps=STEPS"
```

Kohtia width ja heigth kohtia voit muokkaamaan sen jälkeen kun animmaatio on ladattu (voit joutua painamaan kerran refresh (F5)). Koita säätää ne siten ettei kumpaankaan suuntaan tule rullauspalkkeja.

Ohjelmointijuttuja tehdesä järkevä sijoituspaikka kuville ja .jsonp tiedostoille on tietysti versionhallinta, jolloin on helpompi tarvittaessa muutella noita ja muutkin pääsevät niihin tarvittaessa käsiksi.

Muokkaminen jälkeenpäin

Ota johokin editoriin (tai vaikka selaimeen) .jsonp-tiedoston sisältö.
Pistä kaikki leikepöydälle.
Avaa Kelmu-editori kuten aiemminkin.
Valitse Import.
Liitä .jsonp -tiedoston sisältö aukeavaan ikkunaan ja sitten Import.
Muokkaa.
Jatka kuten edellä tallentamiskohdassa.

Valmiita animaatioita

Valmiita animaatioita löydät ACOS-sivuilta:

https://acos.cs.hut.fi/

Jos löydät mieleisen animaation, niin sitä käytetään TIMissä esimerkiksi:

``` {#ae_while2 plugin="showVideo"}
iframe: true
header: "Animaatio: Suorita aritmeettisia operaatioita"
stem: Askella silmukan suoritusta vihreällä nuolella
open: true
videoicon: false
hidetext: Piilota animaatio
type: small
videoname: "Tutki operaatioiden toimintaa"
width: 920
height: 450
file: "https://acos.cs.hut.fi/html/jsvee/jsvee-java/ae_arithmetic_v2"
```

Annotaatioiden lisääminen valmiiseen animaatioon

Käynnistä sivu
http://acos.cs.hut.fi/kelmu-editor
etsi haluamasi valmis animaatio
Lisää annotaatioita kuten edellä, paiti käytä nyt tarvittaessa myös +Substep varsinaisten askelten sisällä.
Tallenna vastaavasti kuin yllä.
Lisää TIMiin tyyliin:

``` {plugin="showVideo" #hello1}
iframe: true
header: "Animaatio: Tutki sanojen merkitystä"
stem: Askella  vihreällä nuolella
open: true
videoicon: false
hidetext: Piilota animaatio
type: small
videoname: "Tutki operaatioiden toimintaa"
width: 920
height: 360
file: "https://acos.cs.hut.fi/html/jsvee/jsvee-csharp/hello?kelmuUrl=https://www.mit.jyu.fi/demowww/hello.jsonp"
```

Esimerkiksi tästä tulee tällainen animaatio:

# hello1animaatio