Flash-animaatiot - Luento 8

• Luentotaltiointi
• Animaatio opetuksen havainnollistusvälineenä
• Mikä on Flash?
  • Flash WWW-sivulle
  • Flash-esimerkkejä
  • Flash-ohjeita
• Flashin käyttö käytännössä

Käydään ensin läpi Flashin perusteita ja sen jälkeen näytetään käytännön esimerkkejä Adobe Flash Professional CS5.5 -ohjelmalla.

Animaatio opetuksen havainnollistusvälineenä

Opetusta voidaan tukea useilla eri havainnollistustavoilla. Yksi käyttökelpoinen tapa on käyttää oppimateriaalina animaatioita. Animaatiot, etenkin interaktiiviset, voivatkin parhaimmillaan olla erinomainen tapa havainnollistaa opetusta.

Tällä luennolla käsitellään vektorianimaatioiden tekemistä Flashillä. Animaatioita voi toki tehdä muillakin tekniikoilla:

• Ilmaisia Flashille vaihtoehtoisia ohjelmia animaatioiden tekemiseen ovat esim. seuraavat: OpenLaszlo, Synfig Studio, Pencil2D ja PowToon. PowToonia lukuun ottamatta kurssin opettajalla ei ole kuitenkaan henkilökohtaista kokemusta kyseisten ohjelmien käytöstä.
• 3D-animaatioita pystyy puolestaan tekemään esimerkiksi ilmaisella Blenderillä.
• Animaatioita voi toki tehdä myös HTML5:sen avulla, jos osaamista löytyy. Eräs tutoriaali aiheeseen: http://www.html5canvastutorials.com/

Mikä on Flash?

• Flash tai tarkemmin sanottuna Adobe Flash on kehitysympäristö, jolla voi tuottaa multimediaesityksiä esimerkiksi WWW-sivuille.
• Aiemmin vastaavan kehitysympäristön nimi on ollut Shockwave Flash ja Macromedia Flash, eli kaikki termit tarkoittavat saman kehitysympäristön eri "versioita".
• Flashillä tuotetaan interaktiivisia vektorigrafiikka-animaatioita.
• Flashia käytetään Internetissä esimerkiksi kuvagallerioiden, animaatioiden, opetusohjelmien, mainosten, kokonaisten web-sivustojen tai pelien luomiseen.
• Web-sivustojen tekemisessä Flash on hiipuva trendi eikä sitä enää tueta kunnolla, mutta esimerkiksi tietokoneella katsottavien animaatioiden tekemisessä sitä voi ja kannattaakin vielä hyödyntää. Mobiililaitteisiin Flash-toteutuksia ei enää kannata toteuttaa huonon tuen vuoksi.
• Tulevaisuudessa HTML5 tullee korvaamaan Flashiä yhä enemmän, etenkin mobiililaitteissa, mutta myös muille laitteille tarkoitetuilla WWW-sivustoilla ja WWW-sovelluksissa.
• Flashin sisällä toimii myös sen oma ohjelmointikieli, ActionScript. Ilman varsinaista ohjelmointiakin (koodin kirjoitusta) Flashillä saa kuitenkin paljon aikaan.
• Kuvankäsittelytaidoista on hyötyä myös Flashin kanssa, koska esimerkiksi tasot ovat Flashissä suunnilleen samanlainen peruskäsite kuin kuvankäsittelyssä. Videoeditointitaidoista on myös hyötyä, koska myös Flashissä toimitaan aikajanalla.
• Flash-kehitysympäristössä tuotettujen esitysten näyttämiseen tarvitaan toisto-ohjelma, joka on tavallisimmin selaimeen ladattava lisäosa (Adobe Flash Player).
• Kehitystyökalussa käytettävä projektitiedosto on FLA-muodossa. Internetissä julkaisua varten tiedosto muutetaan SWF-muotoon.
• Uusin versio kehitysympäristöstä on Adobe Flash Professional CC. Agoran erikoismikroluokan C331.3 MAC-koneilta löytyy versio 5.5, jolla pärjää myös mainiosti.
• Ohjelma on maksullinen, mutta siitä saa ladattua itselleen Internetistä 30 päivän kokeiluversion. HUOM! Versiot 5:sta eteenpäin vaativat 64-bittisen prosessorin. Versio 4 oli viimeinen, jonka sai myös 32-bittiselle tietokoneelle.
• CS5-versiota uudempia versioita käytettäessä kannattanee tallentaa FLA-tiedostot CS5-muodossa, niin niiden avaaminen onnistuu tarvittaessa myös erikoismikroluokan C331.3 MAC-koneilla.
• ActionScript 2.0 ja 3.0 -ohjelmointikielten eroista on kattava dokumentti: http://www.adobe.com/devnet/flash/articles/first_as3_application.html
• Flash-animaatioita voi toteuttaa myös 3D Flash Animatorilla, mutta ohjelmaa ei ole kehitetty enää vuoden 2007 jälkeen, joten järkevämpää on käyttää Adoben ohjelmia.

Flash WWW-sivulle

Flash-animaation voi liittää WWW-sivulle periaatteessa seuraavan tyyppisellä koodinpätkällä:

<object data="movie.swf" type="application/x-shockwave-flash" width="500" height="500">
    <param name="movie" value="movie.swf" />
</object>

Ohjelma osaa kuitenkin tuottaa itse valmiin HTML-tiedoston, jota (tai osaa sen koodista) kannattaa käyttää sen sijaan, että itse kirjoittaisi liittämiskoodin WWW-sivulle. Kyseisen tiedoston object-elementti on huomattavasti monimutkaisempi kuin yllä oleva esimerkki, joten sitä ei tarvitsekaan osata ulkoa.

SWF-tiedosto tulee aina upottaa WWW-sivulle, jotta se toimii täysin oikein. Pelkkää SWF-tiedostoa ei siis kannata linkittää.

Flash-esimerkkejä

• Example
• NaCl
• Pythagoras
• Fotosynteesi

Flash-ohjeita

• Demojen 13 ja 14 materiaalit
• Flash Developer Center
• Flash Perfection

Flashin käyttö käytännössä

Näytetään seuraavaksi Adobe Flash Professional CS5.5 -ohjelman käyttöä käytännössä ja tehdään ohjelmalla esimerkkejä. Demoissa tullaan tekemään saman tyyppisiä tehtäviä.

Käydään läpi seuraavia toimintoja:

• Perusteet
• Perusmuodot
• Tasot
• Liike (Tweenit)
• Symbolit
• Pathit ja Guidet
• Kiihtyvyys (Ease)
• Materiaalien tuominen
• Painikkeet (Actions, ActionScript 3.0)
• Julkaisu