Harjoitus 3: Flash-komponenttiarkkitehtuuri (18.3.2016)

Harjoitus 3: Flash-komponenttiarkkitehtuuri (18.3.2016) Tietokoneavusteinen opetus -kurssilla opetetaan Adobe Flash CS6:n käyttämistä neljänä kertana: 11.3.2016, 15.3.2016, 18.3.2016 ja 1.4.2016. Harjoituskerroilla esitellään Flashin toimintoja ja tehdään harjoituksia. Kunakin kertana on kaksi harjoitusryhmää, joissa kaikissa käsitellään sama sisältö. Harjoitusryhmät järjestetään kello 10.15 12 ja 12.15 14 mikroluokassa Pinni B1083. Harjoitusryhmiin saa saapua vapaasti ei ennakkoilmoittautumista. Flash-harjoituksien tiedotussivu on osoitteessa: http://www.uta.fi/sis/tie/tao/flash.html Tehtävät julkaistaan etukäteen webissä, mutta ne käydään läpi yhteisesti Flash-harjoituksissa perjantaisin. Toisin kuin laitoksen kurssien viikkoharjoituksissa normaalisti, tehtäviä ei tarvitse tehdä etukäteen. Tehtävät ovat luonteeltaan sellaisia, että niihin löytyy helposti apua ja lisätietoja webistä. Hakukoneen avulla on helppo löytää ainakin englanninkielisiä ohjesivuja, joilla käsitellään Flashia. Kolmannen harjoituskerran aiheita ovat Flash-luokat ja -komponenttiarkkitehtuuri. Harjoituksissa käsitellään lisää oppijan aktivointia: monivalintatehtävät ja satunnaisuuden ohjelmointi aktivoiviin toimintoihin. Flash-luokat ActionScript 2.0:sta lähtien ohjelmoija on voinut käyttää oliopohjaista lähestymismallia skriptien luonnissa. Luokat toimivat pohjana uudelle komponenttiarkkitehtuurille ja tähän mennessä Flash-harjoituksissa onkin jo käytetty huomaamattomasti useita luokkia (MovieClip, String, Number jne.). Luokkien tekeminen voi helpottaa harjoitustyön hallittavuutta ja muutettavuutta. Tässä on yksinkertainen Flash-luokka: package { import x.y.z; public class OmaLuokka { private var _count:number; public function OmaLuokka() { _count = 0; public function dosomething(str:string) { trace( str ); public function get count( ):Number { return _count; public function set count(nmbr:number) { _count = nmbr; public function increase():void { _count += 1; public function decrease():void { _count -= 1; Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 1 / 5

Luokan tiedostonimen tulee olla sama kuin luokan nimi + ".as", eli tässä tapauksessa luokka olisi tallennettava nimellä OmaLuokka.as. Luokkia käytetään skripteissä seuraavasti: Import OmaLuokka; var oma:omaluokka = new OmaLuokka(); Flash-komponenttiarkkitehtuuri Komponentit ovat esimerkiksi valmiita elementtejä graafisen käyttöliittymän tekemiseen (UI components). Käyttäjät voivat luoda komponentteja itse ja myös jakaa niitä muiden käyttöön. Tällaisia komponentteja löytyy mm. Adoben www-sivuilta. Komponentit ovat usein MovieClip-tyyppisiä luokkia, joiden parametreja, ulkoasua ja käyttäytymistä voidaan muokata. Komponentti on visuaalisen määritelmän ja luokan yhdistelmä. Näistä komponenteista luodaan ilmentymiä, kun niitä käytetään Flash-ohjelmassa. Komponenttien ilmentymiä käytetään pitkälti samalla tavoin kuin muitankin kirjaston symbolien ilmentymiä. 0. Ohjelman käyttämä ActionScript versio Tarkista, että käytät ohjelmassasi ActionScriptin versiota 3.0. Asetus löytyy File Publish Settings -asetuksista (tai Properties-ikkunasta valinta Publish: Settings ). 1. Monivalintatehtävä radiopainikkeilla Tehdään monivalintatehtävä, jossa käyttäjä voi valita vain yhden vastausvaihtoehdon. Tällöin käytetään radiopainikkeita (RadioButton). 1. Luo kysymys teksti-työkalulla. Aseta tekstin tyypiksi Static Text. 2. Avaa komponentti-ikkuna (Window Components). 3. Raahaa näyttämölle kolme radiopainiketta (kysymyksen vastausvaihtoehdot). 4. Nimeä painikkeet eri nimillä (radio1, radio2, radio3) ja aseta kaikkien parametri GroupName samannimiseksi (usein näin on jo oletuksena). Tällöin painikkeet muodostavat ryhmän, jonka jäsenistä vain yksi voi olla kerrallaan valittuna. 5. Lisää komponenteista myös uusi painike (Button) ja aseta siihen teksti Tarkista. 6. Nimeä tämä painike (tarkistapainike). 7. Luo vielä toinen tekstikenttä (Dynamic Text) ja anna instanssinimeksi palaute1. 8. Tee aikajanalle uusi kerros (Layer) ja anna sille nimeksi koodi. Usein on selkeämpää sijoittaa kaikki koodi omalle layerille. Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 2 / 5

9. Kirjoita ensimmäiseen kehykseen seuraava skripti: stop(); tarkistapainike.addeventlistener("click", tarkistavalinnat); function tarkistavalinnat(event) { if (radio2.selected == true) { palaute1.text = "Hyvä"; else { palaute1.text = "Ei ole. Yritä uudestaan."; Tarkista-painikkeeseen siis liitettiin tapahtumakuuntelija (EventListener), joka reagoi tapahtumaan click suorittamalla tapahtumankäsittelyfunktion tarkistavalinnat. Voit palauttaa muistiin tapahtumankäsittelyn edellisen harjoituskerran tehtäväpaperista. 2. Monivalintatehtävä valintaruuduilla Tehdään toinen monivalinta, jossa voi olla useita oikeita valintaruutuja (CheckBox). 1. Tee uusi Scene. 2. Lisää navigointinapit Sceneille, jotta pääset testaamaan myös Scene 2:n toimintaa. Vaihtoehtoisesti voit käyttää Control-valikon Test Scene -toimintoa. 3. Raahaa uuden Scenen näyttämölle esim. kolme valintaruutua yksi jokaista vastausvaihtoehtoa varten. 4. Nimeä ne eri nimillä (esim. valinta1, valinta2, valinta3 ) 5. Tee uusi staattinen tekstikenttä kysymykselle. 6. Tee palautteelle uusi dynaaminen tekstikenttä ja anna sille nimeksi palaute2. 7. Tee uusi tarkistuspainike. 8. Kirjoita tapahtumankuuntelija ja liitä se kuuntelemaan painikkeen tapahtumia (oikeat vastaukset ovat tässä esimerkkifunktiossa valinta2 ja valinta3): function tarkistavalinnat2(evt) { if (valinta2.selected == true && valinta3.selected == true && valinta1.selected == false) { palaute2.text = "Hyvä, juuri näin."; else if ( (valinta2.selected valinta3.selected) && valinta1.selected == false) { palaute2.text = "Yksi oikein, toinen puuttuu vielä."; else { palaute2.text = "Yritäpä uudestaan."; Kuten huomataan, valintaruutujen kanssa jokaisen arvo on tarkistettava erikseen, jotta nähdään, vastasiko käyttäjä oikein (rastit kaikissa halutuissa ruuduissa, muissa ei rasteja). Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 3 / 5

3. Satunnaisuuden ohjelmointi Satunnaisuuden ohjelmointia tarvitaan moneen erilaiseen tarkoitukseen käyttäjää aktivoivissa Flash-sovelluksissa. Esimerkiksi useita peräkkäisiä kysymyksiä esittävän tietovisasovelluksen olisi hyvä esittää kysymykset satunnaisessa järjestyksessä, jotta sovelluksen jokainen suorituskerta ei olisi samanlainen. Satunnaislukuja puoliavoimelta väliltä [0, 1[ saadaan Math.random()-metodin avulla. Kun tämä satunnaisluku kerrotaan x:llä, saadaan luku puoliavoimelta väliltä [0, x[. Lukujen arvontaa varten voidaan kirjoittaa oma funktio: function arvosatunnaisluku(max:number) { var n = Math.random() * max; return n; Huomaa, että arvosatunnaisluku()-funktio palauttaa liukuluvun, joka voidaan tarvittaessa pyöristää kokonaisluvuksi Math.round()-funktiolla. Jos luku halutaan sijoittaa tekstikenttään, se täytyy vielä muuttaa merkkijonoksi. Toteutetaan seuraavaksi Flash-esitys, joka arpoo tekstikenttään satunnaisen kokonaisluvun, kun käyttäjä klikkaa painiketta. Sovella aiempia taitojasi. 1. Luo uusi Flash-esitys. 2. Luo näyttämölle staattinen teksti Arvotaan satunnaisluku. 3. Luo näyttämölle tyhjä dynaaminen tekstikenttä ja anna sille instanssinimi. 4. Raahaa valmis Common Libraries -kirjaston painike omaan kirjastoon. 5. Luo oman kirjaston painikkeesta instanssi raahaamalla se näyttämölle. 6. Anna näyttämöllä olevalle painikkeelle instanssinimi. 7. Avaa käsittelemäsi kerroksen koodinäkymä (Actions) ja kirjoita koodiin ylempänä kuvattu arvosatunnaisluku()-funktio. 8. Kirjoita samaan koodinäkymään uusiluku()-tapahtumankäsittelyfunktio: function uusiluku(event) { var liukuluku = arvosatunnaisluku(10); var kokonaisluku = Math.round(liukuluku); satunnaisluku.text = String(kokonaisluku); 9. Lisää samaan koodinäkymään rivi, joka kytkee click -tapahtuman käsittelyfunktioksi uusiluku()-funktion: arvontapainike.addeventlistener("click", uusiluku); 10. Kokeile Flash-esitystä (Ctrl+Enter). Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 4 / 5

4. Sekalaisia komentoja & vinkkejä trace(lause) Tulostaa output-ikkunaan lauseen sisällön, mikä voi olla tekstiä, muuttujien arvoja tai näiden yhdistelmää. Tämä on todella kätevä komento virheiden etsinnässä sekä ohjelman toiminnan selvittämisessä Kehysten merkintä Voit antaa jokaiselle avainkehykselle nimen, jota voi käyttää esimerkiksi navigoinnin apuna. gotoandplay() ja gotoandstop() Hyppää tiettyyn kehykseen ja vaihtoehtoisesti jatkaa toistoa tai pysähtyy. 5. Buttons-kirjasto gotoandplay(42); Hyppää kehykseen 42. gotoandstop(512, "Scene 2"); Hyppää Scene 2:n kehykseen 512. gotoandplay("lab1"); Hyppää merkittyyn kohtaan lab1. Flashistä löytyy valikoima valmiita painikkeita, jotka voivat olla hyödyllisiä harjoitustyötä tehdessä. Window Common Libraries Buttons. 6. Lisää luokista ja satunnaisuuden ohjelmoinnista Lue Flash-harjoitussivujen lisämateriaalit Perustietoa luokista ja Tietovisa. Avaa tietovisaesimerkki Adobe Flashissa ja tutustu esimerkin sisältämään ActionScript-koodiin. Lisämateriaali julkaistaan Flash-harjoitussivuilla. Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 5 / 5