Flash 1
- Luentotaltiointi
- Perusmuodot, layerit ja motion tween
- Symbolit
- Pathit ja motion guide
- Ease
- Maskit
- Sovellusesimerkki - heittoliikkeen demonstrointi
Harjoitellaan interaktiivisen vektorigrafiikka-animaation tuottamista Flash-ohjelmalla.
Perusmuodot, layerit ja motion tween
Tee Flash-ohjelmalla esimerkin mukainen pong-animaatio.
- Luo tausta, musta maila, punainen maila ja pallo omallille 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 noin 20 jokaiselle layerille.
- 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.
Symbolit
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. Tee siihen auton runko Pen-työkalulla.
- 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).
- Testaa renkaiden pyörimistä.
Pathit ja motion guide
Laitetaan auto liikkumaan mäkiseen maastoon.
- 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.
- 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 siten, että rekisteröintipiste koskettaa viivaa.
- Lisää autokerrokselle Motion tween. 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.
Ease
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.
Maskit
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.
Sovellusesimerkki - heittoliikkeen demonstrointi
Kokeile toteuttaa Flashilla seuraavanlainen lukiofysiikan demonstraatioesimerkkiä heittoliikkeestä. Vinkkejä:
- Pallon y-liike kannattaa tehdä movie clip -symbolina. (Mieti, miksi motion path ei käy tähän.)
- Painovoiman vaikutusta voidaan simuloida sopivilla ease in ja ease out -graafeilla.
- Pallon x-liike tehdään normaalina vaakasuuntaisena motion tweeninä y-suunnassa liikkuvalle symbolille.