Harjoitus 2: Oppijan aktivointi ( )

Transkriptio

1 Harjoitus 2: Oppijan aktivointi ( ) Tietokoneavusteinen opetus -kurssilla opetetaan Adobe Flash CS6:n käyttämistä neljänä kertana: , , ja Harjoituskerroilla esitellään Flashin toimintoja ja tehdään harjoituksia. Kunakin perjantaina on kaksi harjoitusryhmää, joissa kaikissa käsitellään sama sisältö. Harjoitusryhmät järjestetään kello ja mikroluokassa Pinni B1083. Harjoitusryhmiin saa saapua vapaasti ei ennakkoilmoittautumista. Flash-harjoituksien tiedotussivu on osoitteessa: 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. Toisen harjoituskerran aiheita ovat erilaiset tavat oppijan aktivointiin sekä tällaisten vuorovaikutteisten osuuksien toteuttaminen Flashin ActionScript-ohjelmoinnilla. Vuorovaikutteisia toimintoja ovat esimerkiksi tekstinsyöttö, raahaus ja pistelaskenta. Harjoituksissa opetetaan mm. tapahtumien käsittelyä Flashissa. Tämän kerran tavoitteena on tutustua erilaisiin tapoihin aktivoida oppijaa ja miten tällaisia vuorovaikutteisia osuuksia saadaan aikaiseksi Flashin ActionScript-ohjelmoinilla. ActionScript-ohjelmointi perustuu järjestelmässä syntyvien tapahtumien (event) käsittelyyn. Näitä tapahtumia on kahdenlaisia: käyttäjän aiheuttamia (user event) ja järjestelmän luomia (system event). Käytännössä siis Flash-ohjelmointi on näiden tapahtumien käsittelyä. CS6:ssa tapahtumia käsitellään siten, että sovelluksen tekijä määrittelee tapahtumankäsittelyfunktion ja liittää sen ko. tapahtumia aikaansaavan komponentin tapahtumakuuntelijoiden joukkoon metodilla addeventlistener. instanssinimi.addeventlistener(tapahtuma, tapahtumakasittelija); Tapahtuma on merkkijono. Useimmat valmiit tapahtumatyypit, kuten hiiritapahtuma, määrittelevät merkkijonovakiot tapahtumille. Näitä vakioita voi käyttää tavallisten merkkijonojen sijasta. Seuraavat kaksi esimerkkiä ovat identtiset toiminnaltaan: instanssinimi.addeventlistener( click, tapahtumakasittelija); instanssinimi.addeventlistener(mouseevent.click, tapahtumakasittelija); Näissä harjoituksissa keskitytään käyttäjän aiheuttamien tapahtumien, kuten hiiritapahtumat, käsittelyyn. Tapahtumankäsittelijä on tavallinen ActionScript-funktio, joka saa parametrinaan funktiokutsun laukaisseen tapahtuman: function tapahtumakasittelija( tapahtuma ) { // Oma koodi tänne. ; Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 1 / 5

2 Hiiritapahtumia (MouseEvent) ja niitä vastaavia merkkijonoja ovat mm.: CLICK "click" CLOSE "close" DOUBLE_CLICK "doubleclick" MOUSE_DOWN "mousedown" MOUSE_LEAVE "mouseleave" MOUSE_MOVE "mousemove" MOUSE_OUT "mouseout" MOUSE_OVER "mouseover" MOUSE_UP "mouseup" MOUSE_WHEEL "mousewheel" ROLL_OUT "rollout" ROLL_OVER "rollover" Tapahtuman kohteena voi olla nykyinen elokuva ja sen aikajana: function handler( event ) { stop(); Tai kohteena voi olla nimetty instanssi: function stopmovieclip( event ) { toinenmovie.stop(); 0. Navigointi eri kohtausten (Scene) välillä Tehdään viime kerrasta tutut painikkeet, joilla voi navigoida kohtausten välillä. Kohtauksen voi nimetä uudelleen tuplaklikkaamalla sitä Scene-paneelissa (Window Design Panels Scene tai Shift+F2). Voit käyttää myös viime kerran ohjelmaa pohjana tai ladata malliohjelman osoitteesta: Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 2 / 5

3 1. Tekstinsyöttö Tehdään tietovisa, jossa käyttäjä vastaa kysymykseen kirjoittamalla vastauksen tekstikenttään. Tämän jälkeen käyttäjä painaa tarkista-painiketta ja saa palautetta vastauksestaan. Luo kysymys teksti-työkalulla. Aseta tekstin tyypiksi Properties-lehdellä Static Text. Tee vastaukselle toinen tekstikenttä ja aseta sen tyypiksi Input Text. Varmista, että teksti on Classic Text, eikä TLF. Valitse behavior -kohdasta Single Line. Anna tekstikentän instanssille nimi vastaus, eli kirjoita kentän ominaisuuksissa kohtaan <instance name> vastaus. Nyt pääset käsittelemään kentän sisältöä skriptistä käsin. Tee vielä palautteelle yksi tekstikenttä ja aseta tämän tyypiksi Dynamic Text. Anna tekstikentälle instanssinimi palaute. Lisää vielä tarkista-painike. Voit hakea painikkeen kirjastosta tai tehdä sellaisen itse viime kerralla opitulla tavalla. Anna painikkeen instanssille nimi, vaikkapa tarknappi. Liitä painikkeeseen seuraava tapahtumankuuntelija: function tarkasta_vastaus( event ) { // Korvaa oikea vastaus // oman kysymyksesi oikealla vastauksella. if (vastaus.text == "oikea vastaus") { palaute.text = "Hyvä Oikein meni"; else { palaute.text = "Väärin."; Jos tekstit eivät näy oikein, kokeile fontin vaihtamista toiseen, esim. Verdanaan. 2. Raahaus Tehdään uuteen kohtaukseen raahaustehtävä, jossa raahataan palloja laatikkoon. Tee piirtotyökaluilla Stagelle yksi pallo ja yksi laatikko. Muuta nämä MovieClip-olioiksi: Valitse objekti Stagella ja valitse hiiren oikealla painikkeella avautuvasta valikosta Convert to Symbol. Nimeä objektit. Valitse koko objekti valintatyökalun avulla, pelkkä klikkaus valitsee vain keskustan mutta ei ääriviivaa. Anna laatikolle instanssinimi maali. Luo palloja kolme kappaletta raahaamalla kirjastosta. Anna myös palloille instanssinimet. Tee vielä yksi tekstikenttä (Dynamic Text) ja anna sille instanssinimi palaute2. Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 3 / 5

4 Lisää tapahtumakäsittelijät hiiren painamiselle ja vapauttamiselle. Jokaiseen tapahtumaan on sidottu se elementti joka saa tapahtuman aikaiseksi. Ko. elementti löytyy tapahtumaparametrin (event) target ominaisuudesta (property). stop(); var x_koord = 0; // näihin muuttujiin asetetaan liikutettavan var y_koord =0; // elementin alkuperäiset x- ja y- // koordinaatit. Ensin ne kuitenkin nollataan // sijoittamalla niihin arvo nolla. palaute2.text ="Raahaa"; // asetetaan alkuteksti palautekenttään function drag_on( event ) { palaute2.text = ""; // tyhjennetään palaute x_koord = event.target.x; // ja otetaan liikutettavan // kappaleen (event.target) // koordinaatit y_koord = event.target.y; // talteen event.target.startdrag(); // aloitetaan raahaus { function drag_off( event ) event.target.stopdrag(); // lopetetaan raahaus // droptarget kertoo sen elementin joka on pudotettavan // kappaleen alla, jos alla ei ole mitään, droptarget on // null. droptarget on alin mahdollinen primitiivi eli // tässä tyyppiä shape,. Jotta homma saadaan toimimaan // meidän täytyy katsoa mihin elementtiin ko. shape // kuuluu. Tämä tapahtuu parent ominaisuuden kautta. // && on looginen ja, = on eri suuri kuin eli // seuraavalla rivillä katsotaan onko alla // kappaletta JA jos on niin mikä sen instanssinimi on. if ( event.target.droptarget = null && event.target.droptarget.parent.name == "maali") { palaute2.text = "Hyvä"; else { // Joko alla ei ole kohdetta tai se ei ole maali. // Palautetaan raahattavalle kappaleelle alkuperäiset // koordinaatit ja annetaan palautetta. event.target.x= x_koord; event.target.y= y_koord; palaute2.text = "Ei osunut."; Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 4 / 5

5 Lisää tapahtumakuuntelijat jokaiselle pallolle. pallox.addeventlistener( MouseEvent.MOUSE_DOWN, drag_on ); pallox.addeventlistener( MouseEvent.MOUSE_UP, drag_off ); Meneekö kaikki niin kuin pitääkin? Jos pallo menee raahattaessa maalin taakse, tuo pallo etualalle tai siirrä maali taka-alalle arrange-valikon avulla. 3. Pistelaskenta Lisätään äsken tehtyyn raahaustehtävään pisteiden laskenta. Tee dynaaminen tekstikenttä ja anna sille nimi pisteet. Lisää ensimmäiseen Frameen skripti, joka nollaa pisteet: pisteet.text = 0 ; Lisää drag_off-tapahtumankäsittelijän if-lauseeseen rivit, joilla pisteitä lisätään: pisteet.text = String(Number(pisteet.text)+1); Tässä siis sijoitetaan pisteet.text tekstikenttään merkkijono (String), joka muodostetaan numerosta, mikä koostuu pisteet-kentän aiemmasta sisällöstä, johon on lisättynä yksi. Tekstikentän sisältö pitää aluksi muuttaa numeroksi (Number), jotta sitä voi kasvattaa ja tämän jälkeen numero on muutettava takaisin merkkijonoksi, jotta sen voi sijoittaa tekstikenttään. Tietokoneavusteinen opetus 2016 Joel Luukka (Alkup. dok. Juha Kari, Lauri Immonen) 5 / 5