Nörttitytöt

Oletko kyllästynyt samoihin iänikuisiin suklaa- ja kuvakalentereihin, joita myydään vuodesta toiseen joka ikisessä marketissa? Haluaisitko vaihteeksi jotain erilaista, mieluiten nörtähtävää? Mikäli itse tehty joulukalenteri juuri omaan makuun kuulostaa hyvältä, olet tullut oikeaan paikkaan! Digitaalinen joulukalenteri Adoben Flash-ohjelmistolla on melko näppärä tapa tehdä joko itselle tai ystävälle joulunodotuksesta himpun verran hauskempaa.

Tästä oppaasta saavat eniten irti ne, joilla on Flashin peruskäyttö hallussa, tai jos on vähintäänkin näppärä googlettamaan perustoiminnot.
 

Valmistelut

Julkaisuasetukset

Ennen kuin itse kalenteria pääsee tekemään, on valmisteltava projektitiedosto. Valitsin itse kalenterin kooksi 800×600 pikseliä ja lähdin työstämään ActionScript 3 -pohjaista kalenteria, sillä se on itselleni tutuin. Uudessa Flashin versiossa on valittavissa myös HTML5 Canvas, joka tuottaa millä tahansa uudella selaimella näkyvän HTML5-tekniikkaa käyttävän elementin Flash Playeriä vaativan elementin sijaan. Vaihdoin myös julkaisuasetuksista JPEG-laadun maksimiin kuvanlaadun säilyttämiseksi.

Asettelua helpottamaan laitoin näkyviin dokumentin rajoille suuntaviivat, sillä Flashissa kuvaelementit menevät lopputuotteessa näkyvän alueen (stage) reunojen yli ja piilottavat ne näkyvistä.
 

Visuaaliset elementit

Kalenterin taustakuva on varsin helppo tuoda paikalleen: raahaa haluamasi kuva Flashin kirjastoon (library), josta voit raahata sen stagelle. Voit liikuttaa kuvaa joko hiirellä tai nuolinäppämillä, kun kuva on valittuna. Kuvan voi myös keskittää joko vaaka- tai pystysuunnassa tai halutessaan tasata Modify->Align -valikosta.

Nimetyt layerit ovat pop.

Selvyyden vuoksi kannattaa luoda omat tasonsa (layer) myös luukuille sekä niiden sisällölle ja samalla nimetä ne aikajanalla (timeline). Järjestyksessä ylempänä olevat tasot näkyvät lopullisessa tuotoksessa muiden tasojen yläpuolella, joten taustan sisältävä taso kannattaa tietysti jättää alimmaiseksi.

Luukkunumerot tein itse yksinkertaisesti piirtämällä hieman läpikuultavan neliön, jonka muutin MovieClipiksi ja keskitin neliön päälle numeron. Muutin edelleen nämä yhdessä MovieClipiksi, johon tein 24 keyframea – jokaiseen eri numero.

Kun taustakuva ja luukkunumerot ovat paikallaan, voi itse luukkukuvia alkaa lätkiä esille. Kukin kuva kannattaa muuttaa symboliksi (MovieClip) ja tehdä vielä näiden ympärille yksi yhteinen MovieClip niin, että lopputuloksena on esimerkiksi MovieClip “kuvat”, jonka sisältä löytyy yksi kalenterin kuva per keyframe.

Kuvien alle laitoin itse visuaalisen selkeyden vuoksi tumman, hieman läpikuultavan tason. Jos kuvat ovat samankokoisia kuin stage, tämä ei ole tietenkään tarpeellista, mutta muutoin suosittelen. Tasolla oleva kuva tulee myös muuttaa MovieClipiksi, jotta sen näkyvyyttä voidaan koodilla manipuloida.

Ennen varsinaisen koodaamisen aloittamista tulee stagelle lisätyt elementit vielä nimetä, jotta niitä voidaan koodissa käsitellä. Oma nimeämiskäytäntöni meni seuraavasti:

  • luukkujen instanssinimet: door1-24
  • tumma “verho”: shader
  • luukkukuvat: img

 

Työstönäkymä

Työstönäkymä

 

Koodia kehiin!

Kun elementit ovat paikallaan, alkaa toiminnallisuuden rakentaminen! Aivan ensimmäiseksi kerromme Flashille, mitä koodikirjastoja haluamme käyttää:

import flash.events.MouseEvent;
import flash.events.Event;
import flash.display.MovieClip;
import flash.media.Sound;
import flash.net.URLRequest;

Kaksi ensimmäistä kirjastoa nimensä mukaisesti antavat käyttöön hiiren käyttöön liittyviä toimintoja, kuten kursorin liikkeiden havainnointiin ja klikkauksiin liittyviä “kuuntelijafunktioita.” Käytämme näitä kalenteriluukkujen avaamiseen ja sulkemiseen. MovieClip-kirjasto puolestaan antaa laajat mahdollisuudet manipuloida symboleiksi muutettuja kuvia, ja Sound tottakai on äänentoistoa varten. URLRequest-kirjaston tarvitsemme tässä tapauksessa äänitiedoston sijainnin välittämiseen Flashille.

Kalenteri ei kuitenkaan vielä käytännössä tee mitään. Seuraavalla koodinpätkällä saadaan luukut klikattaviksi:

var door:MovieClip;
for (var i:int = 1; i<25; i++) {
door = this["door"+i];
door.buttonMode = true;
door.mouseChildren = false;
door.addEventListener(MouseEvent.CLICK, doorClick);
door.addEventListener(MouseEvent.MOUSE_OVER, doorHover);
door.addEventListener(MouseEvent.MOUSE_OUT, doorHoverOut);

door.gotoAndStop(i);
}

Mitä tämä sitten tekee? Luodaan ensin luukkujen käsittelyä varten muuttuja door, jonka avulla for-loopissa asetetaan jokaiselle luukulle muutama olennainen ominaisuus sekä lisätään niille kuuntelijat hiirtä varten. buttonModen avulla luukut saadaan näppärästi toimimaan kuten napin odottaisi toimivan, mouseChildren puolestaan estää hiiren reagoimisen luukkuelementtien sisällä oleviin alielementteihin, ja kuuntelijat huolehtivat siitä, että kukin luukku reagoi halutulla tavalla tiettyihin hiiren toimintoihin. Tässä tapauksessa olen määrittänyt tapahtuman klikatessa nappia sekä hiiren tullessa napin päälle ja lähtiessä sen päältä pois. Viimeinen rivi asettaa vuorollaan jokaisen luukkunumeron oikein ja pysäyttää MovieClipin animaation siihen.

Jos tässä vaiheessa projektia yrittää käynnistää (Ctrl+Enter), Flash herjaa puuttuvista funktioista. Ja miksipä ei herjaisi, sillä sille ei ole vielä kerrottu, mitä doorClick, doorHover ja doorHoverOut pitävät sisällään. Korjataan tilanne:

function doorHover(e:MouseEvent) {
e.target.alpha = 0.5;
}

function doorHoverOut(e:MouseEvent) {
e.target.alpha = 1;
}

Nämä funktiot lisäävät täysin kosmeettisen lisän kalenteriin: kun hiiri osuu luukun päälle, se muuttuu läpinäkyvämmäksi. Hiiren poistuessa näkyvyys palautuu ennalleen.

Joukon kolmas funktio, doorClick, määrittelee luukkua avatessa suoritettavat toiminnot. Ennen sen kirjoittamista auki onkin hyvä aika lisätä koodiin luukuista paljastuviin kuviin liittyvät kuuntelijat ja ominaisuudet, sillä ne ovat olennainen osa doorClick-funktiota.

var shader:MovieClip;
shader.visible = false;
shader.addEventListener(MouseEvent.CLICK, hideImage);

var img:MovieClip;
img.mouseChildren = false;
img.addEventListener(MouseEvent.CLICK, hideImage);
img.visible = false;

Kuten aiemmin mainitsin, shader on itse kalenterin ja luukuista paljastuvien kuvien väliin tuleva tummennus, jonka tehtävä on tehdä kalenterista visuaalisesti selkeämpi. img puolestaan on luukkukuvat sisältävä MovieClip. Molemmat asetetaan aluksi näkymättömäksi ja niille asetetaan kuuntelijat. Kun luukku on avattuna, kuuntelijan avulla voidaan laukaista funktio hideImage, jolla kuvat saadaan taas kalenterin edestä piiloon:

function hideImage(e:MouseEvent) {
shader.visible = false;
img.visible = false;
}

Tähän mennessä olemme saaneet määriteltyä kaikki tarvittavat muuttujat ja kalenteri toimii visuaalisesti varsin nätisti – luukut eivät kuitenkaan vielä aukea. Määritelläänpä siis vielä viimeinen funktio, jonka jälkeen kaiken pitäisi toimia kuin unelma:

function doorClick(e:MouseEvent) {
var doorID:String = e.target.name.replace(/[^\d]+/, "");
var imgFrame:int = parseInt(doorID);

if (img.totalFrames < imgFrame) {
var error:Sound = new Sound(new URLRequest("errorbaa.mp3"));
error.play();
} else {
shader.visible = true;
img.gotoAndStop(imgFrame);
img.visible = true;
}
}

Tämä tärkein palanen koodia on myös vaikeaselkoisin, mutta koitetaanpa selvittää, mitä se pitää sisällään: Nappaamme ensin doorID-muuttujaan hiirikuuntelijan kautta saamamme luukun nimen (e.target.name) ja poistamme siitä kaikki ei-numeraalit. Saamamme luku on kuitenkin String-muodossa (eli tekstinä), joten muunnamme sen imgFrame-muuttujaan numeromuotoisena (int eli integer eli kokonaisluku). Nyt tätä numeroa voidaan verrata luukkukuviemme lukumäärään, eli img-MovieClipin framemäärään. Jos luukkunumeroa vastaava kuva (frame) löytyy, näytetään kuva. Muutoin soitetaan “virheääni.”

Valmis!

Valmis kalenteri
 

Jakaminen

Kun kalenterisi on valmis ja toimivaksi testattu, sinun ei tarvitse tehdä muuta kuin varmistaa vielä, että .swf-tiedosto on uusin mahdollinen painamalla Ctrl+Enter, ja voit vaikkapa lähettää sen eteenpäin sellaisenaan (mahdollisten äänitiedostojen kera!). Tiedoston voi myös ladata sivutilaan ja jakaa sen siellä, mutta silloin kannattaa vielä tarkistaa, että kalenteri näkyy oikein, sillä se venyy isommaksi selaimessa katsottuna.

Oman mallikalenterini lähdemateriaaleineen voi ladata tästä linkistä: https://www.dropbox.com/sh/5l41zkz8y707paw/AAAW6JYmI4bx5ZuCFzfeJZ1ka?dl=0
 

Linkkejä

Flash Professionalin ilmaisen kokeiluversion voi ladata Adoben sivustolta.

Kalenterin tekemiseen voi käyttää Flashin sijaan myös aloittelijaystävällisempiä ohjelmistoja, kuten esimerkiksi Scratchiä tai Stencyliä. Näillä ei tarvitse osata koodata sitäkään vähää, mitä Flash vaatii.

Kuvankäsittelyyn käytän itse Adobe Photoshopia, jolle ilmainen vaihtoehto on esimerkiksi avoimen lähdekoodin Gimp.


Kalenterissani käyttämäni kuvat:

Samuel Kvarnbrink – straw goats

bagsgroove – happy goat family

Tc Morgan – Baby Goat

Alice Whale – Farm Life.

Ääni:

Flash Kit – Sheep Baa