Demo 10 - Flash-perusteet ja 7. oppimistehtävä

• Videotaltiointi
• Perusmuodot, layerit ja Motion Tween
• Symbolit
• Pathit ja Motion Guide
• Ease
• Maskit
• Actions
• Flash-animaation julkaisu
• Oppimistehtävä 7
  • Opettajanäkökulma: havainnollistus animaatiolla
  • Oppilasnäkökulma: animaatio oppilastyön tuotantovälineenä
• Sovellusesimerkkejä

Harjoitellaan interaktiivisen vektorigrafiikka-animaation (Flash) tuottamista Macromedia Flash Professional 8 -ohjelmalla. Ohjelma on maksullinen ja se on asennettuna ainoastaan Agoran mikroluokan B503 -koneille. Ohjelman käyttöä voi opetella ennen demotehtävien tekemistä (ja niiden aikana) katsomalla demoon liittyvät opetusvideot tältä sivulta. Lisäksi kannattaa tutustua Timo Sirviön Flash-opetusmateriaaliin.

Netistä löytyy myös jonkun verran ilmaisia Flash-editoreita tai sitten kaupalliseen editoriin saa esimerkiksi 30 päivän ajan kokeilulisenssin. Näiden editoreiden käytöstä kurssin vetäjällä ei ole juurikaan kokemuksia, mutta niilläkin Flashin tekeminen pitäisi onnistua. Siispä, jos et pääse tekemään demoa ja oppimistehtävää Agoralle, niin voit kokeilla asentaa omalle koneellesi jonkun ilmais-/kokeiluversion esimerkiksi alla olevista vaihtoehdoista.

• http://www.adobe.com/products/flash/ - Adobe Flash (mahdollisuus ladata Trial-versio)
• http://www.3dfa.com/ - 3D Flash Animator
• http://www.topshareware.com/Free-Flash-Editor-download-42820.htm - Free Flash Editor 1.0

Demo ja oppimistehtävä on tehtävä viimeistään 4.11.2007 mennessä!

Perusmuodot, layerit ja Motion Tween

Tee Flash-ohjelmalla esimerkin mukainen pong-animaatio. Aloita uusi Flash-dokumentti ja tallenna se U-asemalle sopivaan hakemistoon (tekovaiheessa voi käyttää myös C:\MyTemp-hakemistoa). Muista tallentaa työtäsi tasaisin väliajoin!

• Luo tausta, musta maila, punainen maila ja pallo omille layereilleen (kerroksilleen). Nimeä layerit (klikkaa hiiren kakkospainiketta layerin päällä -> Properties) sopivasti, niin niiden käsittely helpottuu.
  • Vaihda väritykset ja reunan koko sopiviksi.
  • Taustan väriliukua voi säätää oikean laidan Color-palkista ja Gradient Transform Tool -työkalulla.
  • Laita pallo kiinni mustaan mailaan.
• Lisää frameja (ruutuja) noin 20 jokaiselle layerille (kerrokselle).
• Lisää maila- ja pallokerroksien loppuun keyframe. Lisää mailakerroksien keskelle yhdet keyframet lisää framen 10 kohdalle ja siirrä mailojen paikkaa.
  • Objektin valinnassa on käytettävä tuplaklikkausta, jolloin myös reuna tulee valituksi.
• Lisää mailakerroksille liike (Motion Tween) sekä alusta ensimmäiseen keyframeen että keyframesta loppuun. Liikkeen saa lisättyä klikkaamalla haluamaansa keyframea (liikkeen alkukohta) hiiren kakkospainikkeella ja valitsemalla Create Motion Tween.
• Lisää pallolle 3 keyframea lisää tasaisin väliajoin ja siirrä ensimmäinen ylös, toinen oikean mailan kohtaan ja kolmas alalaitaan.
• Lisää liike (Motion Tween) myös pallolle jokaisen keyframen väliin.
• Kokeile testata animaatiota valinnalla Control | Test Movie.
• Pienen nykäisyn kierroksen alussa saa pois, kun teet keyframet pallo- ja mailalayereille frameen 19 ja poistat framet 20 kaikista layereistä (myös pelilautalayeristä).
• Tallenna työsi viimeistään nyt, kun se on valmis.

Symbolit

Tehdään esimerkin mukainen liikkuva auto-animaatio. Aloita uusi Flash-dokumentti ja tallenna se U-asemalle sopivaan hakemistoon (tekovaiheessa voi käyttää myös C:\MyTemp-hakemistoa).

• Valitse Insert | New Symbol.... Valitse tyypiksi Graphic. Anna symbolille nimeksi esimerkiksi rengas. Tee Oval-, Pen-, Line- ja Paint Bucket -työkaluja käyttäen vanteellinen rengas. Renkaan "urat" saa sopivalla reunaviivalla.
• Luo uusi Movie Clip -tyyppinen symboli valinnalla Insert | New Symbol... | Movie Clip. Nimeä symboli järkevästi. Luo uusi layer ja rakenna siihen auton runko Pen-työkalulla ja ikkunat Rectangle Toolilla.
• Luo kaksi uutta layeriä, etu- ja takarenkaalle. Kopioi Librarystä (esim. hiirellä raahaamalla) pari rengasta paikoilleen omille layereilleen.
• Lisää kaikille layereille pituutta 10 frameen asti.
• Tee rengas-layereille keyframe loppuun ja valitse renkaille Properties-ikkunasta Rotate-ominaisuuteen valinta CW (clockwise) yhdellä kierroksella. Jos Rotate-valintaa ei näy, niin valitse ensin Tween-valinnasta Motion, jolloin Rotate-valinta tulee näkyviin.
• Testaa renkaiden pyörimistä Enterin painalluksella.

Pathit ja Motion Guide

Laitetaan auto liikkumaan mäkiseen maastoon. Jatketaan edellisen auto-dokumentin muokkaamista.

• Siirry muokkaamaan sceneä (näyttämöä) klikkaamalla Scene-valintaa aikajanan yläpuolelta.
• Tee näyttämön alareunaan esimerkiksi Oval-työkalulla isohko vihreä alue, jossa on roisoinen reuna. Lisää animaatiolle pituutta esim. 60 framea (=5s).
• Muokkaa Subselection-työkalulla ellipsin reunoja siten, että venytät muutamista kohdista reunaa ylöspäin. Muuta maaston muotoja Bezier-käyrien kontrollipisteiden avulla. Tee maastoon "mäkiä" siten, että korkein mäki alkaa aika heti vasemmasta reunasta.
• Tee uusi auto-kerros. Kopioi Librarystä auto tähän kerrokseen. Valitse Free Transform -työkalu ja pienennä auton kokoa. Siirrä valkoinen pallukka (=rekisteröintipiste) auto-objektin alalaitaan. Siirrä auto korkeimman mäen (vasemman puoleisin mäki) päälle.
• Katso, että auto-kerroksessa on yhtä monta framea kuin muissakin kerroksissa. Valitse ensimmäinen ruutu auto-kerrokselta ja napauta Create Motion Tween.
• Valitse auto-kerros hiiren kakkospainikkeella ja napauta Add Motion Guide. Piirrä uudelle kerrokselle Pencil-työkalulla maaston reunoja mukaileva viiva.
• Lisää keyframe autokerroksen loppuun. Siirrä auto viivan loppuun. Jos Motion Guide toimii oikein, niin rekisteröintipisteen pitäisi automaattisesti tarrautua viivaan kiinni.
• Testaa animaatiota. Nyt auton pitäisi kulkea viivaa pitkin. Piilota viiva, jos liike toimii hyvin.
• Mene ensimmäiseen keyframeen auto-kerroksella. Valitse Properties-palkista Rotate-kohdan alta Orient to path. Nyt auto kääntyy myös viivan mukaan.

Ease

Laitetaan auto kiihtymään alamäissä. Jatketaan edellisen auto-dokumentin muokkaamista.

• Valitse auto-kerroksen Properties-palkista Ease-kohdan vierestä Edit.
• Valitse Propertyksi Position ja muokkaa käyrää siten, että liike nopeutuu niissä kohdissa, joissa tekemässäsi maastossa on alamäkiä. Alla esimerkki muokatusta käyrästä (vastaa malliesimerkin alamäkiä):

  

  Kokeile Play-painikkeella aina välillä liikkeen toimintaa.

Maskit

Tehdään vielä autoa seuraava valokeila (maski, joka näyttää vain auton).

• Valitse auto-dokumentissa File | Publish. Aloita sen jälkeen uusi flash-dokumentti.
• Valitse File | Import | Import to Stage ja valitse juuri julkaisemasi .swf-tiedosto.
• Luo uusi kerros. Tee siihen Oval-työkalulla pallo, joka liikkuu mäen päältä mäen alas suoraa reittiä. Liikkeen saat tehtyä normaalisti laittamalla loppuun keyframen ja luomalla Motion Tweenin keyframejen väliin. Sinun täytyy tehdä pallon liikkeelle suunnilleen sama kiihtyvyys Easen avulla kuin autollekin, jottei auto katoa kiihdytyksissä "valokeilasta". Pallon koko tulee olla hiukan autoa suurempi, jotta auto mahtuu kuvaan myös auton käännöksissä.
• Kun pallo ja sen liike ovat valmiita, valitse pallokerros hiiren kakkospainikkeella ja ponnahdusvalikosta valinta Mask. Kokeile toimintaa valinnalla Control | Test Movie.

Actions

Toteutaan vielä napit, joilla animaation voi käynnistää ja lopettaa. Jatketaan edellisen dokumentin muokkaamista.

• Valitse Window | Common Libraries | Buttons. Siirrä ikkuna kiinni oikeaan laitaan.
• Luo uusi layer. Etsi Buttons-kirjastosta kansio playback rounded (kansio avautuu tuplaklikkamalla kansion kuvaketta, ei nimeä) ja siirrä sieltä rounded green play ja rounded green stop näyttämön vasempaan alakulmaan.
• Valitse play-nappula näyttämöltä ja sen jälkeen Window | Actions. Nyt tulet kooditilaan, jossa voidaan ohjelmoida napin toimintaa. Kirjoita seuraava Actionscript-koodinpätkä:

  on (release) {
    this.play();
  }
  

  this viittaa tässä nappulan sisältämään aikajanaan.
• Tee vastaava operaatio (pysäytys) stop-nappulalle. Millä komennolla animaatio pysähtyy? ;-)
  • Voit tarvittaessa kokeilla kirjoittaa väliaikaisesti _root., jolloin saat esiin animaatioon liittyvät metodit.
• Lisätään vielä automaattiset pysäytykset ensimmäiseen ja viimeiseen kuvaan. Valitse ensimmäinen kuva ja napauta näyttämölle johonkin tyhjään kohtaan. Tarkista, että ylin layer (napit sisältämä layer) on valittuna. Kirjoita Actions-paneeliin komento, joka pysäyttää animaation (this.play();). Et tarvitse on()-tapahtumankäsittelijöitä, sillä ohjelmakoodi käsitellään aina, kun animaatio saapuu tiettyyn ruutuun.
• Valitse viimeinen kuva. Luo siihen keyframe. Nyt voit kirjoittaa saman koodin animaation pysäyttämiseksi.
• Testaa nappien toimintaa animaation katselutilassa (Control | Test Movie).

Flash-animaation julkaisu

• Julkaise animaatio napauttamalla tyhjään kohtaan näyttämöä. Valitse alalaidasta kohta Publish | Settings... ja sen jälkeen nappia Publish. Lopuksi klikkaa OK.
• Nyt projektitiedoston .fla kaverina pitäisi olla samassa hakemistossa tiedostot .swf ja .html. Siirrä .swf ja .html-tiedostot users.jyu.fi-palvelimellesi haluamaasi hakemistoon.
• Kokeile mennä selaimella katsomaan omaa flash-sivuasi. Sen pitäisi löytyä osoitteesta

  http://users.jyu.fi/~omatunnus/valitsemasi_hakemisto/flash_tiedostonnimi.html

• Julkaise vastaavalla tavalla myös ensimmäisenä tehty pong-animaatio ja testaa senkin toiminta nettiselaimessa.
• Lisää lopuksi linkit animaatiosivuille (pong-animaatio ja auto-animaatio) Moodle-keskusteluryhmään Demo 10 - Flash - Palautusalue.

Oppimistehtävä 7

Miten interaktiivista vektorigrafiikkaa ja -animaatiota voidaan hyödyntää opetuksessa? Valitse toinen tehtävistä:

Opettajanäkökulma: havainnollistus animaatiolla

Verkko-oppimateriaali voi olla muutakin kuin pelkkää tekstiä ja muutamia kuvia. Pohdi, miten tälle viikolle valitsemasi oppiaineen (ei saa olla tietotekniikka) jossakin osa-alueessa voitaisiin hyödyntää interaktiivista animaatiota oppimateriaalina.

1. Tilanne ja tavoitteet:
   • Mihin oppiaineeseen ja sen osa-alueeseen oppimateriaali liittyy?
   • Missä yhteydessä animaatiota käytetään?
   • Mikä on kohderyhmä?
   • Millaisia tavoitteita animaatioilla voidaan saavuttaa? (oma kuvaus riittää)
   • Mitä lisäarvoa interaktiivinen animaatio tuo tässä tapauksessa perinteisiin materiaaleihin verrattuna?
2. Interaktiivisen animaation tuottaminen:
   • Tee Flash-ohjelmalla interaktiivinen animaatio oppimateriaaliksi (esim. jokin havainnollistusesimerkki).
   • Animaatiossa on hyödynnettävä monipuolisesti vektorigrafiikan tarjoamia ominaisuuksia.
   • Animaatiossa on oltava jonkinlaista interaktiota käyttäjän kanssa (esim. painikkeita, joilla voi kontrolloida animaation toimintaa).
3. Tee WWW-sivu, jossa on tavoitekuvaukset ja linkki Flash-animaatioon. Lisää WWW-sivulinkki Moodle-keskusteluryhmään Oppimistehtävä 7 - Interaktiivinen animaatio havainnollistusvälineenä.

Oppilasnäkökulma: animaatio oppilastyön tuotantovälineenä

Suunnittele valitsemaasi oppiaineeseen (ei saa olla tietotekniikka) oppimistilanne, jossa oppilaat tuottavat Flash-ohjelmalla animaation.

1. Tilanne ja tavoitteet:
   • Mihin oppiaineeseen ja sen osa-alueeseen oppimistilanne liittyy?
   • Missä yhteydessä animaatiota käytetään?
   • Mille kohderyhmälle?
   • Millainen aikataulu oppilastyöllä on?
   • Mitä tietoteknisiä tavoitteita oppilastyöllä saavutetaan? Mitä tavoitteita saavutetaan oppiaineen kannalta? (Oma kuvaus riittää, mutta saa toki peilata myös OPS:eihin.)
   • Pohdi, miksi Flash on tässä tapauksessa mielekkäämpi tuotantoväline kuin jokin muu ohjelma (esim. tekstinkäsittely, esitysgrafiikka tms.).
2. Mallianimaation tuottaminen:
   • Tee Flash-ohjelmalla interaktiivinen mallianimaatio, joka vastaa oppilaan hyvää suoriutumista.
   • Animaatiossa on hyödynnettävä monipuolisesti vektorigrafiikan tarjoamia ominaisuuksia.
   • Animaatiossa on oltava jonkinlaista interaktiota käyttäjän kanssa (esim. painikkeita, joilla voi kontrolloida animaation toimintaa).
3. Tee WWW-sivu, jossa on tavoitekuvaukset ja linkki mallituotokseen. Lisää WWW-sivulinkki Moodle-keskusteluryhmään Oppimistehtävä 7 - Interaktiivinen animaatio havainnollistusvälineenä.

Sovellusesimerkkejä

Alla muutama sovellusesimerkki vaikkapa oppimistehtävä 7:n ideointia varten.

• Kemiallisen sidoksen muodostuminen - Katri Härkönen ja Tero Ylä-Outinen
• Pythagoraan lause - Heli Melin ja Irene Venäläinen