Flash ActionScript osa 2

Transkriptio

1 Liiketalus syksy 2012 Flash ActinScript sa 2 Scripti-kieli Skriptikieli n tarkitettu skriptien eli kmentsarjjen tekemiseen. lyhyitä hjeita, siitä kuinka svelluksen tulisi timia Skripteillä autmatisidaan tehtäviä. Skriptikieli ei le varsinainen hjelmintikieli, vaikka se muistuttaa hjelmintia. ActinScript ActinScript 3.0 n uusin versi jka tuli markkinille CS3 mukana. Termejä Syntaksi (kielippi) Funkti Yleinen kaikille kielille, ei pelkästään hjelmintikielille Ohjaa sen miten sanista vidaan mudstaa lauseita Ei määritä sitä mitä esim. jkin sana tarkittaa Puhuttua kieltä vi ymmärtää, vaikka kaikki ei menisikään ihan kielipin mukaan -> tietknemaailmassa tilanne n tinen funkti n timintaa, se kert kuinka bjekti tekee jtain funktit vat itsenäisiä Metdi metdi n timintaa, se kert kuinka bjekti tekee jtain metdi n määritetty lin sisäisesti kuten minaisuus

2 Liiketalus syksy 2012 Kielippisääntöjä jkainen rivi lppuu pulipisteeseen ; Lauseet vat muta: Substantiivi, verbi ja adjektiivi/adverbi ("Obekti (kuka) tekee jtain (mitä) ja jtenkin (miten)") Pekka juksee npeasti Pekka juksee 5 km/h Instanssi (li, ilmentymä), metdi ja muuttuja Pekka.juksee(5); Kdi n jukk hjeita, jtka kertvat tietkneelle mitä sen pitäisi tehdä Kappale (hjelmalhk) alkaa aaltsululla lppuu aaltsulkuun Miten tekee Käsky instanssi metdi Muuttuja pekka juksee 5 Kmmentit kdissa kdi pitää kmmentida hyvin, jtta sitä lisi helpmpi lukea, varsinkin kun jku tinen jutuu lukemaan //yhden rivin kmmentti /* usean rivin kmmentti alkaa... ja lppuu */

3 Liiketalus syksy 2012 Skriptin lunti ensiksi pitää valita tehdäänkö ActinScript 2.0- vai 3.0- versilla tällä kurssilla tehdään versilla 3.0 ActinScript-kdi vidaan tallentaa: Flash-dkumentin aikajanaan (ActinScript 3.0) sceneen erilliseen Flash ActinScript-tiedstn (ActinScript File) ActinScript-kdi kirjitetaan Actin-paneelissa Actin-paneeli vi avata painamalla F9. ActinScript-ikkunan työkalurivi Lisää Script sa Etsi Khteen plku Tarkista syntaksi Kdin autmaattinen mutilu Näytä/piilta vihjeet Virheenkrjaus asetukset Tiivistä kaikki kdit Tiivistä valittu kdi Laajenna kdi Yhden rivin kmmentti Mnen rivin kmmentti Pista kmmentit Näytä/Piilta työkaluikkuna Snippetit Scripti valitsin Apuva Prperties-paneelissa annetaan instansille nimi, jka timii linkkinä skriptin ja graafisen käyttöliittymän välillä

4 Liiketalus syksy 2012 Tehtävä 1 Ensimmäinen skripti Objektin minaisuuksien muuttaminen Tehdään skripti, jka muuttaa surakulmin kn ja määrittää sille paikan. 1. Alita uusi dkumentti (stagen kk n 1000px x 500px) ja piirrä sinne surakulmi (rectangle), jka n kapea ja krkea. Anna taslle spiva nimi. 2. Muunna surakulmi symbliksi. Valitse tyypiksi MvieClip. MvieClip n hyvä ja mnipulinen tyyppi ActinScripteissä 3. Lu uusi tas nimeltä Actins 4. Valitse surakulmi ja Prperties-paneelissa anna Instance Name -kenttään instanssin nimeksi minunpalikka. Tällä Instance name -tiedlla skriptille kerrtaan mihin bjektiin käsky khdistuu eli js n mnta samanlaista bjektia, niin tiedetään mihin käsky khdistuu. 5. Valitse Actins-tasn ensimmäinen kehys ja avaa Actinspaneeli (F9). 6. Kirjita seuraavat rivit Actins-paneeliin: minunpalikka.width = 150; minunpalikka.height = 75; minunpalikka.x = 300; minunpalikka.y = 225; // surakulmin leveys // krkeus // paikka suunnassa x (vaaka) // paikka suunnassa y (pysty) Objektin x- ja y-nllapiste määritellään symbliksi muunnn yhteydessä (Registratin) 7. Napsauta Syntaksin tarkastus -painiketta 8. Kats elkuva 9. Lisää kummallekin taslle kehykseen 40 uusi tyhjä kehys (Insert frame) 10. Lisää Actins-taslle kehykseen 20 uusi avainkehys (Insert Keyframe)

5 Liiketalus syksy Valitse Actins-taslta kehys 20 ja lisää Actins-paneeliin seuraavat rivit minunpalikka.width = 200; minunpalikka.height = 200; minunpalikka.x = 100; minunpalikka.y = 225; 12. Tarkista kdi ja kats elkuva.

6 Liiketalus syksy 2012 Funktit ja metdit Jatketaan edellistä esimerkkiä ja tteutetaan funkti siirravasemmalle, jlla siirretään surakulmita 30 pixeliä vasemmalle. functin siirravasemmalle(anymvieclip:mvieclip):vid anymvieclip.x = anymvieclip.x - 30; Kirjita funkti Actins-tasn ensimmäiseen kehykseen. Jätä rivi pari väliä surakaiteen määrityksien jälkeen, lukeminen helpttuu ja käytä sisennyksiä. Kdin pitäisi näyttää suunnilleen tältä: siirravasemmalle funktin nimi (siirrettavakappale:mvieclip) tarkittaa, että funkti saa parametrina MvieClip-tyyppisen bjektin, jta kutsutaan funktissa siirravasemmalle vid tarkittaa, että funkti ei tee laskentaa eikä palauta mitään siirrettavakappale.x = siirrettavakappale.x - 30 tarkittaa, että nykyisestä siirrettavakappale.x -arvsta vähennetään 30 ja uusi arv tallennetaan siirrettavakappale.x:n arvksi. Tämä ei vielä tee mitään. Seuraavaksi pitää laittaa funktin kutsut khdalle. siirravasemmalle(minunpalikka); siirravasemmalle n kutsuttavan funktin nimi ja minunpalikka n funktille parametrina välitettävä li Lisää avainkehykset Actins-tasn kehyksiin 5, 10, 15, 20, 25, 30 ja 35. Psta kehyksessä 20 levat kdit ja lisää kaikkiin avainkehyksiin edellä leva siirravasemmalle -funktin kutsu

7 Liiketalus syksy 2012 Tapahtumat (Events) Tapahtumia n mnenlaisia, esimerkiksi hiiren napsautus n käyttäjän aikaansaama tapahtuma elkuva päättyy viimeiseen kehykseen n Flash-animaatista jhtuva tapahtuma Tehtävä 2 Hiiren tapahtumat MuseEvent n tapahtuma, jka käynnistyy kun hiirellä (sittimella) tehdään jtain. Tapahtumalla n metdeja (methd), minaisuuksia (prperties) ja vakiita (cnstaint). Kaikki hiiren tapahtumat löytyvät esimerkiksi sitteesta Tehdään elkuva, jssa teksti vaihtuu, kun hiiri viedään palln päälle 1. Alita uusi dkumentti, piirrä ympyrä ja kirjita teksti, esimerkiksi "hiiri ulkna" 2. Muunna mlemmat sekä pall että teksti Mvie Clip -symbleiksi 3. Valitse ympyrä MvieClip -instanssi ja anna sille nimi mcympyra Prpeties-paneelissa, valitse sitten teksti ja anna nimeksi mcteksti 4. Mukkaa mcteksti-symblia (kaksisklikkaa symblia) 5. Lisää kehykseen 2 avainkehys 6. Muunna kehyksen 2 teksti "hiiri päällä" 7. Nimeä kehykset (prperites-paneli ja label-kenttä) kehys 1 "ut" ja kehys 2 "ver" 8. Klikkaa Scene 1 -välilehteä pistuaksesi symblinmukkaustilasta 9. Lisää Actins-tas 10. Lisätään seuraavaksi kuuntelija, jka seuraa hiiren liikkeitä khteen päällä ja kun hiiri n päällä niin suritetaan hiirikhteenpaalla-funkti: mcympyra.addeventlistener(museevent.mouse_over, hiirikhteenpaalla); 11. Lisätään hiirikhteenpaalla-funkti functin hiirikhteenpaalla(event:museevent):vid mcteksti.gtandstp("ver"); 12. Lisää vielä kuuntelija, jka kuuntelee kska hiiri tulee palln päältä pis ja siihen funkti jka vie ikean tekstin khdalle. Hiiren kuuntelija n tyyppiä MOUSE_OUT 13. Kkeile 14. Ja lpuksi lisää mcteksti.gtandstp(1); jtta saadaan värinä pis. Mitä tämä rivi tekee?

8 Liiketalus syksy 2012 Kdin pitäisi näyttää suurin piirtein tältä: /* Asetetaan kuuntelijat, jtka kuuntelevat hiiren asemaa mcympyra-bjektiin nähden */ mcympyra.addeventlistener(museevent.mouse_over, hiirikhteenpaalla); mcympyra.addeventlistener(museevent.mouse_out, hiirikhteenulkna); /* funkti jka suritetaan, kun hiiri n khteen päällä */ functin hiirikhteenpaalla(event:museevent):vid mcteksti.gtandstp("ver"); /* funkti jka suritetaan, kun hiiri n khteen ulkpulella */ functin hiirikhteenulkna(event:museevent):vid mcteksti.gtandstp("ut"); /* Mitä tämä tekee? */ mcteksti.gtandstp(1);