Harjoitus 1: Perusteet, navigointi ja tekstinsyöttö ( )!

Transkriptio

1 Tietokoneavusteinen opetus, 2017 Harjoitus 1: Perusteet, navigointi ja tekstinsyöttö ( ) Tietokoneavusteinen opetus -kurssilla opetetaan Adobe Flash CS6:n käyttämistä ja HTML5-tekniikoita neljänä kertana: 10.3., 14.3., ja Harjoituskerroilla tutustutaan työvälineiden käyttöön harjoitusten avulla. - Jokaisena harjoituspäivänä järjestetään kaksi harjoitusryhmää, joissa käsitellään sama sisältö. - Harjoitukset järjestetään klo 10:15-12:00 ja 12:15-14:00 mikroluokassa B Harjoitusryhmiin saa saapua vapaasti ei ennakkoilmoittautumista. - Harjoituskerran tehtävät julkaistaan etukäteen osoitteessa - Tehtävät käydään läpi yhteisesti harjoituksissa ratkaisuja ei tarvitse tehdä ennen harjoituksia. Flash Professional CS6 -Kehitysympäristö Tutustutaan Flash-ohjelmointiympäristöön ja sen peruskäsitteisiin. i. Avaa uusi Flash-tiedosto alkuvalikosta (Create new ActionScript 3.0) tai File-valikon kautta. Ohjelma avaa projektin perusnäkymän, joka koostuu seuraavista osista: 1. Näyttämö (Stage) 2. Aikajana (Timeline) 3. Kehykset (Frames) 4. Tasot (Layers) 5. Työkalut (Tools) 6. Ominaisuudet (Properties) Ohjelman perusnäkymä on pitkälle muokattavissa, ja perusnäkymän osia ja muita ikkunoita on mahdollista piilottaa ja tuoda näkyviin Window-valikon kautta. Voit vapauttaa lisää näkymätilaa tai tuoda kaikki tarvitsemasi näkymän osat esille tarpeidesi mukaan. ii. Flash-ohjelma perustuu elokuva-metaforaan, johon Flash-ohjelman tekoprosessi perustuu ja jonka mukaan Flash-kehitysympäristön peruskäsitteistö on määritelty. Seuraavassa esitellään Flash-ohjelman keskeistä sanastoa. Elokuvan (Movie) näyttämöllä (Stage) näkyy yhdellä kertaa yhden aikajanan (Timeline) päällekäisillä tasoilla (Layers) olevien kehysten (Frame) sisältö. Vain aktiivisen kehyksen sisältö näytetään näyttämöllä kerrallaan. Käsite Movie (Elokuva) Scene (Kohtaus) Määritelmä Flash-ohjelma mielletään elokuvaksi, joka alkaa ohjelman alkaessa ja päättyy kun ohjelma suljetaan. Elokuvan sisältö rakennetaan näyttämölle. Flash-elokuva koostuu kohtauksista, joita voi sisältyä useita yhteen elokuvaan. Kohtausten avulla Flash-elokuva voidaan jakaa loogisiin kokonaisuuksiin, mikä helpottaa laajojenkin elokuvien hallintaa. Flash:n käyttöliittymässä käsitellään yhtä kohtausta kerrallaan. Flash-elokuvan oletustoiminto on, että elokuva etenee Scene 1:n alusta loppuun ja siirtyy sitten Scene 2:n alkuun jne. Ohjelman etenemistä voidaan kuitenkin hallita useilla komennoilla, joilla voidaan muokata aikajanan toimintaa ja siirtyä kohtausten välillä elokuvan logiikan mukaan. " 1 / " 7

2 Käsite Timeline (Aikajana) Layer (Taso) Frame (Kehys) Määritelmä Jokaisella kohtauksella on oma aikajana, joka kuvaa kohtauksen aikaan tai tilaan perustuvia vaiheita. Lisäksi eri elementeillä (kuten painikkeilla) voi olla omia aikajanoja. Aikajanat koostuvat tasoista ja kehyksistä. Aikajana on jaettu tasoihin, joiden sisältö voi muuttua kohtauksen edetessä. Tasot toimivat varsinaisina säilytyspaikkoina kohtaukseen sisältyville symboleille, skripteille, äänille, ym. elementeille. Tasoja kannattaa käyttää kohtaukseen sisältyvien elementtien jaotteluun siten, että kokonaisuuden hallitseminen helpottuu. Yleinen käytäntö on, että jokaiselle elementille tehdään oma tasonsa, ellei se sisälly selkeästi tiettyyn loogiseen kokonaisuuteen, jolloin saman kokonaisuuden elementit voidaan niputtaa samalle tasolle. Jos aikajana mielletään kohtauksen filmirullaksi, kehys mielletään filmirullan yhdeksi ruuduksi. Päällekkäisten tasojen kehyssisällöt näytetään näyttämöllä aikajanan edetessä. Flash-elokuvan aikajana on harvoin suoraviivainen elokuvatyyppinen esitys, johon katsoja ei voi vaikuttaa. Esityksen etenemiseen voidaan vaikuttaa skripteillä, joilla voidaan pysäyttää elokuvan eteneminen, siirtyä määrättyyn kehykseen tai vaihtaa kohtausta kesken esityksen. Symbol & Library (Symbolit & kirjasto) Keyframe: Avainkehyksessä voidaan suorittaa visuaalinen muutos tai toiminto. Avainkehys kopioi näyttämön sisällön edelliseltä kehykseltä, jolloin koko näyttämöä ei tarvitse rakentaa uudelleen (vrt. blank keyframe). Blank Keyframe: Tyhjässä avainkehyksessä voidaan suorittaa visuaalinen muutos tai toiminto. Tyhjä avainkehys ei kopioi edellisen kehyksen sisältöä näyttämölleen, jolloin näyttämö voidaan rakentaa uudelleen puhtaalta pöydältä (vrt. keyframe). Frame: Tavallisten kehysten sarjaa edeltää aina avainkehys, joka määrittää näyttämän sisällön ja toiminnot. Tavalliset kehykset kopioivat sisältönsä edeltävältä kehykseltä ja jatkavat avainkehyksessä määriteltyjä toimintoja. Esimerkiksi animaatiot määritellään avainkehyksessä, mutta animaatio koostuu useista peräkkäisistä kehyksistä. Kirjastoon kootaan kuvaus jokaisesta elokuvaan sisältyvästä symbolista, kuten kuvista, teksteistä, painikkeista, jne. Kirjastoon sisältyvästä symbolikuvauksesta voidaan luoda näyttämölle yksi tai useampi symbolin esiintymä, eli instanssi. Jokainen saman symbolin instanssi jakaa kirjastossa olevan kuvauksen ominaisuudet, mutta niille voi myös lisätä omia ominaisuuksia, kuten toimintoja, joita ei haluta jakaa kaikkien saman symbolin esiintymien kanssa. Symboleilla on usein oma aikajana, jota voidaan käsitellä kuten kohtauksen aikajanaa, mutta joka vaikuttaa vain kyseisen symbolin toimintaan. Graphic: Graafinen symboli on yksinkertainen, yleensä liikkumaton kuva. Graafinen symboli voi sisältää useamman kehyksen, mutta sen aikajana on sidottu kohtauksen aikajanaan. Graafiselle symbolille ei voi antaa instanssinimeä, eikä siten käsitellä skriptissä. Movie Clip: Elokuvaleikkeillä voidaan toteuttaa kohtauksen animoituja ja interaktiivisia osuuksia. Elokuvaleikkeellä on oma aikajana, joka on riippumaton kohtauksen aikajanasta. Elokuvaleikkeelle voidaan antaa instanssinimi, jonka mukaan siihen voidaan viitata skriptissä. " 2 / " 7

3 Käsite Määritelmä Button: Painikesymboli on elokuvaleikkeen erikoistapaus, jonka aikajana käsittää aikaan perustuvien kehysten sijaan painikkeen tilaan perustuvia kehyksiä. Painikkeen tilat ovat Up, Over, Down ja Hit. Flash sisältää perusnäkymän lisäksi useita näkymiä, jotka ovat tarpeellisia Flash-elokuvan totauttamisessa. Tärkeimpiä ovat Properties-, Actions-, Scenes- ja Movie Explorer -näkymät. Kaikki nämä näkymät saa asetettua näkyviin tai piilotettua Window-valikon kautta. Navigointi kohtausten välillä Toteutetaan yksinkertainen Flash-esitys, jossa käytetään painikkeita kohtausten välillä navigoimiseen. 1. Aloita avaamalla uusi, tyhjä Flash-projekti. 2. Luo uusi Scene (Insert Scene). Siirry takaisin sceneen 1. Scenejen välillä voidaan siirtyä yläreunan klaffipainikkeesta tai valitsemalla kohtauksen scene-ikkunasta (Shift+F2). + Scenet voidaan uudelleennimetä scene-ikkunan kautta. Hyvin nimetyt scenet auttavat kokonaisuuden hallintaa erityisesti silloin, kun esityksessä on suuri määrä scenejä. 3. Luo painike (Insert New Symbol). Anna painikkeelle nimeksi esim. "NavigointiPainike" ja valitse tyypiksi "Button". Kun klikkaat "OK", muuttuu ohjelman näkymä perusnäkymästä uuden painikkeen muokkausnäkymään. 4. Muokkaa painikkeelle sen omalla aikajanalla erinäköiset tilat "Up", "Over" ja "Down". Painikkeen aikajana esittää siis painikkeen eri tiloja, joille voidaan määrittää oma ulkonäkö. Piirrä painikkeelle ulkomuoto tilaan "Up" ja muokkaa sitä hieman kussakin painikkeen tilassa. Saat kopioitua edellisen tilan ulkomuodon uuteen tilaan klikkaamalla aikajanaa hiiren oikealla painikkeella tilan framen kohdalta ja lisäämällä keyframen. 5. Navigoi takaisin kohtauksen perusnäkymään ylälaidan murupolun kautta. 6. Uuden painikkeen symboli on nyt kirjasto-välilehdeltä (Ctrl+L). Luo painikkeesta instanssi raahaamalla symboli kirjastosta näyttämölle. 7. Anna painikkeelle instanssinimi "seuraava_painike" properties-välilehdellä. 8. Lisää scenelle 1 uusi taso ja anna sille nimeksi "koodi". Layer voidaan luoda valitsemalla (Insert Timeline Layer) tai layer-ikkunan alalaidassa olevan painikkeen avulla. Layer voidaan uudelleennimetä tuplaklikkaamalla sen nimeä. 9. Avaa actions-ikkuna valitsemalla (Window Actions) tai painamalla F Kirjoita koodi-tason frameen 1 seuraava skripti: 1 stop(); 2 seuraava_painike.addeventlistener(mouseevent.click,mene_seuraavaan); Skriptissä tapahtuu seuraavaa: rivin 1. stop-komento käskee aikajanaa pysähtymään. Rivillä 2 painikeinstanssiin "seuraava_painike" liitetään tapahtumakuuntelija, joka reagoi, kun hiirtä " 3 / " 7

4 klikataan painikkeen päällä. Painikkeeseen kohdistuvan klikkauksen yhteydessä suoritetaan funktio nimeltä "mene_seuraavaan", joka määritellään kohdassa Toista kohdat scenellä Lisää sceneen 1 skripti: 1 function mene_seuraavaan(event){ 2 nextscene(); 3 } + nextscene on aikajanaan liittyvä funktio, joka käskee aikajanaa siirtymään seuraavaan kohtaukseen. Flash:ssa on vastaavasti funktio prevscene, joka käskee aikajanaa siirtymään edelliseen kohtaukseen. 13. Tallenna työ ja kokeile sen toimintaa valitsemalla valikosta Control Test Movie. Tekstin syöttö & käsittely Lisätään ohjelmaan tervehdystoiminto, joka pyytää käyttäjän nimen ja tervehtii tätä nimeltä, jos nimi on annettu. 14. Siirry sceneen Lisää näyttämölle staattinen (static) tekstikenttä, ja kirjoita sen tekstisisällöksi "Syötä nimesi:". + Flash:ssa on kolme tekstikenttätyyppiä: staattinen- (static), dynaaminen- (dynamic) ja syötetekstikenttä (input). + Staattisen tekstikentän avulla voidaan esittää tekstiä, mutta sen sisältöä ei voida muuttaa. + Dynaaminen tekstikenttä esittää tekstiä, ja sen tekstisisältöä voidaan muuttaa skriptin avulla. + Syötetekstikentän avulla voidaan ottaa vastaan tekstiä käyttäjältä. 16. Lisää näyttämölle syötetekstikenttä (input) ja anna sille instanssinimeksi esim. "nimikentta". 17. Lisää näyttämölle dynaaminen (dynamic) tekstikenttä ja anna sille instanssinimeksi esim. "tervehdyskentta". 18. Luo uusi painike nimen tarkastamista varten kohtien mukaan. 19. Lisää näyttämölle nimentarkistuspainike ja anna sille instanssinimeksi esim. "tarkista_nimi_painike". 20. Liitä painikkeeseen seuraava skripti: " 4 / " 7

5 1 function tarkista_nimi(event){ 2 if(nimikentta.text=""){ 3 tervehdyskentta.text = "Tervehdys, " + nimikentta.text; 4 } 5 else{ 6 tervehdyskentta.text = "Syötä nimesi syötekenttään."; 7 } 8 } 21. Kokeile ohjelman toimintaa. Lisätehtäviä Navigointi Flash-ohjelmassa tapahtuu harvoin kahden perättäisen kohtauksen välillä. Tästä syystä komentoja nextscene ja prevscene hyödyllisempi komento on gotoandplay, jonka avulla voidaan määrittää kehys ja kohtaus, johon halutaan siirtyä. Esimerkiksi komento gotoandplay(1,"scene 2"); käskee ohjelmaa siirtymään nimetyn kohtauksen "Scene 2" ensimmäiseen kehykseen. Toteuta ohjelma, jossa on yksi valikkokohtaus ja kolme kohtausta, joihin päästään valikkokohtauksesta ja joista voidaan palata valikkokohtaukseen. 22. Luo uusi ActionScript 3.0 projekti ja lisää kohtauksia, kunnes tarvittavat neljä kohtausta on luotu. 23. Nimeä kohtaukset uudelleen scene-ikkunan kautta esim. nimillä "Paavalikko", "Osio1", "Osio2" ja "Osio3". 24. Luo uusille navigointipainikkeille symbolit: - "PalaaPainike" vie takaisin päävalikkoon - "Osio1Painike" vie Osio1-kohtaukseen - "Osio2Painike" vie Osio2-kohtaukseen - "Osio3Painike" vie Osio3-kohtaukseen 25. Lisää kohtauksien näyttämöille tarvittavat painikeinstanssit ja anna niille sopivat instanssinimet. 26. Lisää actions-ikkunassa jokaiselle luodulle painikeinstanssille tapahtumakuuntelija, joka suorittaa sopivan tapahtumakäsittelijäfunktion: - "siirry_paavalikkoon" -funktio vie päävalikkoon - "siirry_osioon_1" -funktio vie osioon 1 - "siirry_osioon_2" -funktio vie osioon 2 - "siirry_osioon_3" -funktio vie osioon Toteuta tapahtumakäsittelijäfunktiot Paavalikko-kohtauksessa. Varsinaiset funktiot tarvitsee toteuttaa vain yhteen kohtaukseen. Käytä tapahtumakäsittelijäfunktiossa gotoandplaykomentoa. " 5 / " 7

6 28. Muista lisätä stop-komento jokaisen kohtauksen alkuun. 29. Kokeile ohjelman toimintaa. Tekstinsyöttökentän avulla voidaan toteuttaa harjoitus, jossa käyttäjän tulee kirjoittaa oikea vastaus. Toteutetaan yksinkertainen tehtävä, joka tarkistaa käyttäjän vastauksen ja antaa palautetta vastauksen oikeellisuuden mukaan. 30. Lisää näyttämölle staattinen tekstikenttä, joka esittää kysymyksen, syötetekstikenttä vastauksen syöttämiseen ja dynaaminen tekstikenttä palautetta varten. Anna syötetekstikentälle ja dynaamiselle tekstikentälle instanssinimet. 31. Luo tarkistuspainikkeelle symboli ja lisää sen instanssi näyttämölle. Anna painikkeelle instanssinimi. 32. Liitä tarkistuspainikkeeseen seuraava skripti: 1 // Huom Korvaa if-lauseen "oikea vastaus" 2 // kysymyksesi oikealla vastauksella 3 function tarkista_vastaus(event){ 4 if(syotekentta.text=="oikea vastaus"){ 5 palautekentta.text = "Oikein"; 6 } 7 else{ 8 palautekentta.text = "Yritä uudelleen."; 9 } 10 } 33. Kokeile ohjelman toimintaa. Motion Tween -animaatio on yksinkertainen animointikeino, jossa animaatio toteutetaan esittämällä animoidun objektin välivaiheet ([be]tween). Flash:ssa tween-animaatio voidaan toteuttaa pääosin aikajanan avulla. 34. Piirrä näyttämölle esim. pallo. 35. Valitse piirtämäsi objekti, klikkaa sitä hiiren oikealla painikkeella ja valitse "convert to symbol". Valitse tyypiksi "MovieClip". 36. Klikkaa objekti hiiren oikealla painikkeella ja valitse "create motion tween". Huomaa, että aikajana siirtyi 24. kehykseen. Siirrä objekti johonkin toiseen paikkaan näyttämöllä. 37. Korvaa ensimmäisen kehyksen stop-komento komennolla "play();". 38. Kokeile ohjelman toimintaa. + Miksi kohtaus vaihtuu animaation päätyttyä? Kohtauksen lopussa ei ole erillistä stopkomentoa, joten ohjelma tulkitsee kohtauksen päättyneeksi ja siirtyy seuraavaan. Ohjelma saadaan pysähtymään animaation päätteeksi lisäämällä aikajanalle animaation loppupäähän keyframe, johon lisätään actions-ikkunassa stop-komento. + Miksi muille layereille lisäämäni elementit katoavat? Elemettien elinkaari päättyy, kun niiden kerroksella olevat kehykset loppuvat. Elementit saadaan säilymään koko animaation ajan lisäämällä kehyksiä animaation loppuun asti. Voit lisätä kerralla " 6 / " 7

7 tarpeeksi kehyksiä klikkaamalla aikajanaa hiiren oikealla painikkeella animaation viimeisen kehyksen kohdalla sillä tasolla, johon haluat lisätä kehyksiä ja valitsemalla "insert frame". " 7 / " 7