Flash-perusteet

Harjoitellaan interaktiivisen vektorigrafiikka-animaation tuottamista Flash-ohjelmalla.

Luentotaltiointi

Tee Flash-ohjelmalla esimerkin mukainen pong-animaatio. Aloita uusi Flash-dokumentti ja tallenna se U-asemalle sopivaan hakemistoon.

Luo tausta, musta maila, punainen maila ja pallo omille layereilleen.
- Vaihda väritykset ja reunan koko sopiviksi.
- Taustan väriliukua voi säätää oikean laidan Color-palkista ja Gradient Transform -työkalulla.
- Laita pallo kiinni mustaan mailaan.
Lisää frameja (suom. ruutuja) noin 20 jokaiselle layerille (suom. kerrokselle).
Lisää maila- ja pallokerroksien loppuun keyframe. Lisää mailakerroksien keskelle yhdet keyframet lisää framen 10 kohtaan ja siirrä mailojen paikkaa.
- Objektin valinnassa on käytettävä tuplaklikkausta, jolloin myös reuna tulee valituksi.
Lisää pallolle 3 keyframea lisää ja siirrä ensimmäinen ylös, toinen oikean mailan kohtaan ja kolmas alalaitaan.
Kokeile testata animaatiota Control | Test Movie.
Pienen nykäisyn kierroksen alussa saa pois kun teet keyframet kaikkiin layereihin frameen 19 ja poistat framet 20.

Tehdään esimerkin mukainen liikkuva auto-animaatio.

Valitse Insert | New Symbol.... Valitse tyypiksi Graphic. Tee Oval-, Pen- 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. Luo uusi Layer ja rakenna siihen auton runko Pen-työkalulla ja ikkunat Rectangle Toolilla.
Luo kaksi uutta layeriä, etu- ja takarenkaalle. Kopioi Librarystä pari rengasta paikoilleen.
Lisää kaikille layereille pituutta 10 frameen asti.
Tee rengas-layereille keyframe loppuun ja merkitse Valitse renkaille Properties-ikkunasta Rotate-ominaisuuteen valinta CW (clockwise) yhdellä kierroksella.
Testaa renkaiden pyörimistä.

Tee esimerkiksi Oval-työkalulla isohko vihreä alue näyttämön alareunaan, 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 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 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 oikealla 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, 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. Valitse Properties-palkista Rotate-kohdan alta Orient to path. Nyt auto kääntyy myös viivan mukaan.

Laitetaan auto kiihtymään alamäissä.

Valitse Properties-palkista Ease-kohdan vierestä Edit.
Valitse Propertyksi Position ja muokkaa käyrää jotakuinkin seuraavanlaiseksi:
Kokeile Play-painikkeella aina välillä liikkeen toimintaa.

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

Valitse File | Publish. Aloita uusi flash-dokumentti.
Valitse File | Import | Import to Stage ja valitse juuri luomasi .swf-tiedosto.
Luo uusi kerros. Tee siihen Oval-työkalulla pallo, joka liikkuu mäen päältä mäen alas suoraa reittiä.
Valitse pallokerros oikealla ja ponnahdusvalikosta valinta Mask. Kokeile Control | Test Movie.

Valitse Window | Common Libraries | Buttons. Siirrä ikkuna kiinni oikeaan laitaan.
Luo uusi Layer. Etsi Buttons-kirjastosta kansio playback rounded 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 stop-nappulalle. Millä komennolla animaatio pysähtyy? :)
- Voit 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 on valittuna. Kirjoita Actions-paneeliin komento, joka pysäyttää animaation. 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.

Julkaise animaatio napauttamalla tyhjään kohtaan näyttämöä. Valitse alalaidasta kohta Publish | Settings... ja sen jälkeen nappia Publish.
Nyt projektitiedoston .fla kaverina pitäisi olla samassa hakemistossa tiedostot .swf ja .html. Ota SSH Secure Shell auki ja siirrä .swf ja .html-tiedostot html-linkin alla olevaan ope-hakemistoosi.
Kokeile mennä selaimella katsomaan omaa flash-sivuasi. Sen pitäisi löytyä osoitteesta
```
http://users.jyu.fi/~omatunnus/opekansio/flashtiedostonnimi.html
```
Lisää linkki tähän tiedostoon Moodle-keskusteluryhmään Demo 12.

Jos aikaa jäi, niin kokeile toteuttaa jokin oppimateriaalin osaksi sopiva animaatio. Alla on muutamia sovellusesimerkkejä.

Flashillä voi toteuttaa esim. seuraavanlaisen lukiofysiikan demonstraatioesimerkin heittoliikkeestä. Toteutus on ratkaistu seuraavasti:

Pallo ja pallon y-liike on tehty movie clip -symbolina.
Painovoiman vaikutusta on simuloitu sopivilla ease in ja ease out -graafeilla.
Pallon x-liike tehdään normaalina vaakasuuntaisena motion tweeninä y-suunnassa liikkuvalle symbolille.
Mieti, miksi motion path ei käy heittoliikeanimaation toteutukseen.

Käy Moodlessa Oppimistehtävä 10:n kohdalla vastaamassa kohtaan itsearviointi ja kurssipalaute.

Käyttäjien kommentit