Demo 10 - Flash I

• Perusmuodot, layerit ja Classic Tween

Tällä ja seuraavalla demokerralla harjoitellaan interaktiivisen vektorigrafiikka-animaation (Flash) tuottamista 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ä.

Flash CS5.5:seen (uusin versio, ei poikkea merkittävästi versiosta 5) 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.5, jonka edeltäjäversion (5) 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ä. Demot ohjeistetaan uudemmalla ActionScript 3.0 -kielellä. Toki voi tehdä myös vanhemmalla ActionScript 2.0:lla, mutta tällöin ohjelmointikomentojen (joita kokeillaan vain muutamia) yhteydessä ei voi ihan suoraan noudattaa demo-ohjeita. ActionScript 2.0 ja 3.0 kielten -välisistä eroista löytyy hyvä taulukko osoitteesta: http://www.adobe.com/devnet-archive/actionscript/as3_migration_table.html

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

Muutamia perusvinkkejä Adobe Flash Professional CS5 -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 on tehtävä viimeistään 1.11.2011!

Perusmuodot, layerit ja Classic Tween

Tee Flash-ohjelmalla esimerkin mukainen pong-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). Muista tallentaa työtäsi tasaisin väliajoin! CS5.5-versiota käytettäessä kannattanee tallentaa fla-tiedostot CS5-muodossa, niin niiden avaaminen onnistuu myös erikoismikroluokan C331.3 MAC-koneilla.

• 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. Oval Tool löytyy Rectangle Tool -työkalun painikkeen "alta". (MACissä klikkaa painiketta hiirellä cmd-painike pohjassa, niin pääset käsiksi painikkeen alta löytyviin työkaluihin.) 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-painikkeen takaa löytyvillä valinnoilla ja Gradient Transform Tool -työkalulla (väriliuku täytyy luoda ennen työkalun käyttöä).
  • 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 (Classic Tween) sekä alusta ensimmäiseen keyframeen että kyseisestä keyframesta loppuun. Liikkeen saa lisättyä klikkaamalla haluamaansa keyframea (liikkeen alkukohta) hiiren kakkospainikkeella ja valitsemalla 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 (Classic Tween) myös pallolle jokaisen keyframen väliin.
• Kokeile testata animaatiota valinnalla Control | Test Movie | Test.
• 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ä paikallisen kiintolevyn hakemistossa.