Demo 11 - Flash II ja 7. oppimistehtävä

• Symbolit
• Pathit ja Classic Motion Guide
• Ease
• Maskit
• Actions
• Flash-animaation julkaisu
• Materiaalien tuominen näyttämölle
• Oppimistehtävä 7
  • Opettajanäkökulma: havainnollistus animaatiolla
  • Oppilasnäkökulma: animaatio oppilastyön tuotantovälineenä

Jatketaan edellisessä demossa aloitettua interaktiivisen vektorigrafiikka-animaation (Flash) tuottamisen harjoittelua Adobe Flash Professional CS5 -ohjelmalla. Ohjelma on maksullinen ja se on asennettuna ainoastaan Agoran mikroluokan C331.3 MAC-koneille. Ohjelman käyttöön löytyy ohjeita demomateriaalien lisäksi myös 6. luennon materiaaleista. Kannattaa katsoa etenkin luentovideo, jossa on esimerkkejä ohjelman käytöstä. Jos edellisen demon tehtävät jäivät kesken, niin jatka niiden tekemistä ennen tätä demoa.

Flash CS5:seen saa ilmaiseksi 30 päivän kokeilulisenssin ja netistä löytyy myös jonkun verran ilmaisia Flash-editoreita. Siispä, jos et pääse tekemään demoa ja oppimistehtävää Agoralle, niin voit kokeilla asentaa omalle koneellesi jonkun kokeilu-/ilmaisversion alla olevista vaihtoehdoista. Suositeltavin näistä editoreista on luonnollisesti Adobe Flash Professional CS5, jonka käyttöä demo-ohjeissa opastetaan. Muiden editoreiden käytöstä kurssin vetäjällä ei ole juurikaan kokemuksia, mutta niilläkin Flashin tekeminen pitäisi onnistua.

Adobe Flash Professional CS5:ssa on mahdollista tehdä animaatioita käyttäen joko ActionScript 2.0 tai ActionScript 3.0 -ohjelmointikieltä. Demoja tehdessä kannattanee valita ActionScript 2.0, koska se on paremmin yhteensopiva myös vanhempiin Flash-ohjelman versioihin. Valinta tehdään ennen kuin aletaan luoda uutta työtä. Alkuvalikosta valitaan Create New -> ActionScript 2.0. Toki voi tehdä myös ActionScript 3.0:lla, mutta tällöin ohjelmointikomentojen (joita kokeillaan vain muutamia) yhteydessä ei voi ihan suoraan noudattaa demo-ohjeita.

• Adobe Flash Professional CS5 - mahdollisuus ladata Trial-versio (asennustiedosto 858 Mt - 1.61 Gt)
• http://www.3dfa.com/ - 3D Flash Animator
• http://www.topshareware.com/Free-Flash-Editor-download-42820.htm - Free Flash Editor 1.0

Muutamia perusvinkkejä ohjelman käyttöön:

• Yleensä järkevin näyttötila ohjelmassa on CLASSIC. Näyttötilan valinta on ohjelmaikkunassa ylhäällä oikealla.
• Animaation fyysisen koon saa valita Scenen asetuksista. Oletuksena se on 550 x 400 px, joka käy hyvin demoihin.
• MAC-koneissa "hiiren kakkospainikkeen" takaa löytyviin valintoihin pääsee käsiksi klikkaamalla hiirellä ctrl-näppäin pohjassa. Siispä kun demo-ohjeessa lukee "klikkaa hiiren kakkospainikkeella...", niin MACissä klikataan hiiren (ainoaa) painiketta pitämällä samaan aikaan ctrl-näppäin pohjassa.

Demo ja oppimistehtävä on tehtävä viimeistään 1.11.2010 klo 16 mennessä!

Symbolit

Tehdään esimerkin mukainen liikkuva auto-animaatio. Aloita uusi Flash-dokumentti ja tallenna se verkkolevyllesi sopivaan hakemistoon (tekovaiheessa voi käyttää myös paikallisen kiintolevyn hakemistoja). Vaihda heti aluksi animaation nopeudeksi 12 framea sekunnissa (Scenen asetuksiin 12 FPS).

• Valitse Insert | New Symbol.... Valitse tyypiksi Graphic. Anna symbolille nimeksi esimerkiksi rengas. Tee esimerkiksi Oval-, Pencil-, 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 esimerkiksi autoksi. Rakenna auton runko olemassa olevalle pohjalayerille Pencil- tai Line-työkalulla ja ikkunat Rectangle Toolilla. Auton voi värittää Paint Bucket -työkalulla.
• Luo kaksi uutta layeriä, etu- ja takarenkaalle. Kopioi Librarystä (esim. hiirellä raahaamalla) pari rengasta paikoilleen omille layereilleen. Library löytyy ohjelmaikkunan oikean reunan toiselta välilehdeltä. Muuta renkaiden koko sopivaksi Free Transform -työkalulla.
• Lisää kaikille layereille pituutta 10 frameen asti.
• Tee rengas-layereille keyframe loppuun ja lisää niille Classic Tween ensimmäisestä framesta keyframeen.
• Valitse renkaille Properties-ikkunasta (löytyy ohjelmaikkunan oikean reunan ensimmäiseltä välilehdeltä) Rotate-ominaisuuteen valinta CW (clockwise) yhdellä kierroksella.
• Testaa renkaiden pyörimistä Enterin painalluksella.

Pathit ja Classic Motion Guide

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

• Siirry muokkaamaan sceneä (näyttämöä) klikkaamalla Scene-valintaa aikajanan alapuolelta.
• Tee näyttämön alareunaan esimerkiksi Oval-työkalulla isohko vihreä alue, jossa on rosoinen reuna. Lisää animaatiolle pituutta esim. 60 framea (= 5 sekuntia, jos muutit alussa framerateksi 12 fps).
• 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 sopivaksi. 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 (lisää frameja tarvittaessa). Napauta auto-kerroksen ensimmäistä framea hiiren kakkospainikkeella ja valitse Create Classic Tween.
• Valitse auto-kerros hiiren kakkospainikkeella ja napauta Add Classic Motion Guide. Piirrä uudelle kerrokselle Pencil-työkalulla maaston reunoja mukaileva viiva.
• Lisää keyframe autokerroksen loppuun. Siirrä auto viivan loppuun. Jos Classic Motion Guide toimii oikein, niin rekisteröintipisteen pitäisi automaattisesti tarrautua viivaan kiinni.
• Testaa animaatiota (paina Enteriä). Nyt auton pitäisi kulkea viivaa pitkin. Jos liike toimii hyvin, piilota viiva klikkaamalla Guide-layerillä "silmäsarakkeen" pistettä.
• Mene ensimmäiseen keyframeen auto-kerroksella. Valitse Properties-ikkunasta 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.

• Klikkaa auto-kerroksen Properties-ikkunasta Ease-kohdan vierestä kynäkuvaketta (Edit easing).
• Jos kohdassa Use one setting for all properties on ruksi, ota se pois.
• 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 layer. Tee siihen Oval-työkalulla pallo (pallossa täytyy olla joku täyteväri), joka liikkuu mäen päältä mäen alas suoraa reittiä. Liikkeen saat tehtyä normaalisti laittamalla loppuun keyframen ja luomalla Classic 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 | Test.

Actions

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

• Valitse Window | Common Libraries | Buttons, jolloin avautuu ikkuna, josta löytyy painikkeita.
• Luo uusi layer. Etsi Buttons-kirjastosta kansio playback rounded (kansio avautuu tuplaklikkaamalla kansion kuvaketta, ei nimeä) ja raahaa sieltä hiirellä 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 2.0 -koodinpätkä:

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

  this viittaa tässä nappulan sisältämään aikajanaan. Macissä {-merkin saa näppäinyhdistelmällä alt + shift + 8 ja }-merkin näppäinyhdistelmällä alt + shift + 9.
• 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 frameen. Valitse ensimmäinen frame ja napauta näyttämölle johonkin tyhjään kohtaan. Tarkista, että ylin layer (napit sisältävä layer) on valittuna. Kirjoita Actions-ikkunaan komento, joka pysäyttää animaation (this.stop();). Et tarvitse on()-tapahtumankäsittelijöitä, sillä ohjelmakoodi käsitellään aina, kun animaatio saapuu tiettyyn ruutuun.
• Valitse viimeinen frame. Luo siihen keyframe. Nyt voit kirjoittaa siihen saman koodin animaation pysäyttämiseksi.
• Testaa nappien toimintaa animaation katselutilassa (Control | Test Movie | Test).

HUOM! Tässä tehtävässä kokeiltiin vain pintaraapaisun verran ActionScript-ohjelmointikieltä Flash-esityksessä. Tehtäessä laajempia ja monipuolisempia animaatioita juuri ActionScript-ohjelmointi tulee keskeiseen asemaan. Sillä pystyy siis tekemään paljon paljon muutakin kuin vain yksinkertaisia painikkeita. ;-)

Flash-animaation julkaisu

• Julkaise animaatio napauttamalla tyhjään kohtaan näyttämöä. Valitse ohjelman valikoista File | Publish | Settings... ja klikkaa 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.
  • Ohjeet W-levyn saamiseen näkyviin yliopiston MAC-koneissa: https://www.jyu.fi/thk/ohjeet/how-to-nain-tehdaan/verkkolevyjen-etakaytto-macintoshilla (sivun loppupuolella kohta Yliopiston W-levyn etäkäyttö Macintoshilla).
• Kokeile mennä selaimella katsomaan omaa flash-sivuasi. Sen pitäisi löytyä osoitteesta

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

  • MACissä ~-merkin saa painamalla alt-näppäin pohjassa näppäintä, joka sijaitsee Å-kirjaimen ja Enterin välissä.
• Julkaise vastaavalla tavalla myös ensimmäisenä tehty pong-animaatio (demo 10) ja testaa senkin toiminta nettiselaimessa.
• Lisää lopuksi linkit animaatiosivuille (pong-animaatio ja auto-animaatio) Moodle-keskusteluryhmään Demot 10-11 - Flash - palautusalue.

Materiaalien tuominen näyttämölle

Tämä ohje on lisätietona, eli ei liity demotehtäviin.

• Useasti esityksiä tehtäessä voi olla hyödyllistä tuoda esitykseen valmista materiaalia, esimerkiksi kuvia. Tämä onnistuu valikon File | Import | Import to Stage kautta.
• Tuonnin jälkeen tuotuja objekteja voi käsitellä kuten itse Flashillä tehtyjä objekteja.
• Tuodun objektin voi myös muuttaa grafiikaksi, painikkeeksi tai Movie Clipiksi klikkaamalla tuodun objektin päällä hiiren kakkospainikkeella ja valitsemalla Convert to Symbol.

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 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 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ä.