Demo 13 - Animaatiot I

• Perusmuodot, layerit ja Classic Tween
• Ääni esitykseen

Tällä ja seuraavalla demokerralla harjoitellaan interaktiivisen vektorigrafiikka-animaation tuottamista Adobe Animate CC -ohjelmalla. Ohjelma on maksullinen ja se on asennettuna Agorassa ainoastaan mikroluokan C331.3 MAC-koneille. Ohjelman käyttöön löytyy ohjeita demomateriaalien lisäksi myös 8. luennon materiaaleista. Kannattaa katsoa etenkin luentovideo, jossa on esimerkkejä ohjelman käytöstä.

Adobe Animate CC:hen saa ilmaiseksi kokeilulisenssin. Jos et siis pääse tekemään demoa Agoralle, niin voit ladata ja asentaa omalle koneellesi Animaten kokeiluversion.

Adobe Animate CC:ssä on mahdollista tehdä sekä HTML5-animaatioita että Flash-animaatioita. Nykypäivänä animaatiot kannattaa tehdä mieluummin HTML5-animaatioina, jotka toimivat Flashiä paremmin eri laitteissa.

Muutamia perusvinkkejä Adobe Animate CC -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.

Perusmuodot, layerit ja Classic Tween

Tee Animate-ohjelmalla esimerkin mukainen pong-animaatio. Aloita uusi HTML5-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!

• 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-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 | In Browser.
• 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 taustalayeristä). Framen poistaminen tapahtuu klikkaamalla poistettavaa framea halutulla layerillä hiiren kakkospainikkeella ja valitsemalla Remove Frames.
• Tallenna työsi viimeistään nyt, kun se on valmis.

Ääni esitykseen

Lisätään vielä ääniefekti esitykseen (esimerkki) aina kun musta maila osuu palloon. Jatketaan edellisen dokumentin muokkaamista.

• Voit käyttää joko omaa äänitiedostoasi tai esimerkkiääntä. Siirrä käyttämäsi äänitiedosto samaan hakemistoon esitystiedoston (.fla) kanssa.
• Tuo äänitiedosto kirjastoon valinnalla File | Import | Import to Library.
• Lisää esitykseen uusi layer (Insert | Timeline | Layer) ääntä varten.
• Valitse juuri lisätyn layerin ensimmäinen frame ja valitse sen jälkeen musiikkitiedosto käyttöön Properties-ikkunasta Sound-kohdan alta. Samassa kohdassa pääsee säätämään muitakin ääniominaisuuksia kuten toistoa, mutta muita säätöjä ei tarvitse nyt tehdä.
• Kokeile testata animaatiota äänen kanssa (Control | Test Movie | In Browser).
• Tallenna työsi lopuksi.