Demo 10 - Flash I
Tällä ja seuraavalla demokerralla 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öön löytyy ohjeita demomateriaalien lisäksi myös 6. luennon materiaaleista. Kannattaa katsoa etenkin luentovideo, jossa on esimerkkejä ohjelman käytöstä.
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. Suositeltavin lienee Adobe Flash CS3, joka on periaatteessa Macromedia Flash Professional 8 -ohjelman uudempi versio.
Adobe Flash CS3:ssa on mahdollista tehdä animaatioita käyttäen joko ActionScript 2.0 tai ActionScript 3.0 -ohjelmointikieltä. Demoja tehdessä kannattanee valita ActionScript 2.0 (Macromedia Flash Professional 8 käyttää sitä), jolloin demo-ohjeita pystyy soveltamaan paremmin. Valinta tehdään ennen kuin aletaan luoda uutta työtä. Alkuvalikosta valitaan Create New -> Flash File (ActionScript 2.0). Toki voi tehdä myös ActionScript 3.0:lla, tällöin kannattaa lukea versioiden 2.0 ja 3.0 eroavaisuuksista: http://livedocs.adobe.com/flex/2/langref/migration.html.
- Adobe Flash CS3 - mahdollisuus ladata Trial-versio (asennustiedosto 403 Mt) esimerkiksi seuraavista osoitteista (Google löytänee muitakin):
- http://www.3dfa.com/ - 3D Flash Animator
- http://www.topshareware.com/Free-Flash-Editor-download-42820.htm - Free Flash Editor 1.0
Demo on tehtävä viimeistään 2.11.2008 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 keyframejen kohdalla.
- Objektin valinnassa on käytettävä tuplaklikkausta, jolloin myös reuna tulee valituksi.
- Lisää mailakerroksille liike (Motion Tween) sekä alusta ensimmäiseen keyframeen että kyseisestä 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ä palloa keyframejen kohdalla siten, että pallon sijainti on loogista mailojen sijainteihin nähden.
- 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 (toiseksi viimeinen frame) ja poistat framet 20 (viimeiset framet) kaikista layereistä (myös pelilautalayeristä).
- Tallenna työsi viimeistään nyt, kun se on valmis. Työ palautetaan seuraavan demon yhteydessä. Muista siirtää työsi verkkolevyllesi seuraavaa demoa varten, jos teit työtä C:\MyTemp-hakemistossa.
Käyttäjien kommentit