Demo 10 - Flash I

• Perusmuodot, layerit ja Motion Tween

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. 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 näistä editoreista on Adobe Flash CS4, joka on periaatteessa Macromedia Flash Professional 8 -ohjelman uudempi versio. Demo-ohjeissa on erilliset ohjeet Adobe Flash CS4 -ohjelmalle aina niissä kohdissa, missä Macromedia Flash Professional 8 -ohjelmalle tehdyt demo-ohjeet eivät toimi suoraan Adobe Flash CS4 -ohjelmassa. Muiden editoreiden käytöstä kurssin vetäjällä ei ole juurikaan kokemuksia, mutta niilläkin Flashin tekeminen pitäisi onnistua.

Adobe Flash CS4: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 CS4 - mahdollisuus ladata Trial-versio (asennustiedosto 889 Mt)
• 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 1.11.2009 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). Uuden layerin saa tehtyä valinnalla Insert | Timeline | Layer. Tarvittavat objektit voi tehdä Oval Tool () ja Rectangle Tool () -työkaluilla. 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). Tämä tapahtuu klikkaamalla aikajanalla kunkin layerin 20. framen kohdalla hiiren kakkospainikkeella ja valitsemalla Insert Frame.
• Lisää maila- ja pallokerroksien loppuun keyframe. Tämä onnistuu klikkaamalla halutun kerroksen viimeistä framea (frame 20) hiiren kakkospainikkeella ja valitsemalla Insert Keyframe. Lisää lisäksi mailakerroksien keskelle yhdet keyframet lisää framen 10 kohdalle ja siirrä mailojen paikkaa sopivaan kohtaan 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.
  • Adobe Flash CS4 -ohjelmaa käytettäessä tulee valita Create Classic 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.
  • Adobe Flash CS4 -ohjelmaa käytettäessä tulee lisätä Classic Tween.
• 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ä). Framen poistaminen tapahtuu klikkaamalla poistettavaa framea halutulla layerillä hiiren kakkospainikkeella ja valitsemalla Remove Frames.
• 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.