Flash-peliohjelmointi tutorial

 

 

Teoria

 

Monistekoodien lisäohjeita: 04.12

1) Hello world esimerkki:

 

1. luo kaksi tiedostoa, jotka ovat tyyppiä: fla tiedosto (Actionscript 3.0 ) ja Actionscript 3.0 Class tyyppinen
2. Actionscript 3.0 Class dialogiboxissa kohdassa Class anna luokkanimeksi Tervehdys
3. täydennä koodi monisteen mukaiseksi
4. tallenna luokka tiedosto luokan nimellä: Tervehdys.as
5. tallenna fla tiedosto
6. linkitä luokkatiedosto fla tiedostoon: properties paneelissa kirjoita luokan nimi ilman .as päätettä eli: Tervehdys

1b-c) Teksti luokka

1. samat ohjeet kuin edellä mutta nyt käytössä kaksi .as luokkatiedostoa: Teksti ja TekstiTesti
2. fla: properties paneelissa linkitys TekstiTesti luokkaan
   

   näytä

2) muuttujat ja 2B)  funktiot

1. samalla tavalla kuin 1) Hello world esimerkki:
2. luo fla tiedosto ja as-luokkatiedosto
3. linkitä luokkatiedosto fla tiedostoon

3) Lentsikka proj.

esimerkin kuvaus: tee ohjelma, joka tuo kirjastosta kaksi movieclippiä stagelle määrättyihin x ja y kordinaatteihin.

1. sama kuin edellä: luo fla ja as-luokkatiedostot ja linkitä luokkatiedosto fla-tiedostoon
2. luo kaksi MovieClippiä:
   1. piirrä lentokoneen siivet
   2. muuta grafiikka symboliksi: Modify > convert to symbol
   3. anna symbolin nimeksi: Lentokone
   4. klikkaa Export for Actionscript Advanced osiosta
   5. piirrä potkuri
   6. luo potkurista movieclip: anna symbolin nimeksi: Propelleri
   7. klikkaa Export for Actionscript Advanced osiosta
3. tarkista MovieClippien x ja y kordinaatit ja muuta koodissa x ja y arvot
• valitse movieclip stagella ja katso properties paneelista x ja y arvot
4. kun movieclipit on luotu poista ne Stagelta
5. tarkista portkurin akselin kohta eli portkuri movieclipin rekisteröintipiste ja korjaa y kordinaattia yhtä paljoin kuin rekisteröinti piste siirtyi
6. huom: kommentoi pois seuraavat rivit:
   
   /* potkuri.width = 126;
   potkuri.height= 126;*/

3B) enterframe

esimerkin kuvaus: ohjelma tuo kirjastosta kaksi movieclippiä stagelle määrättyihin x ja y kordinaatteihin ja pyörittää toista movieclippiä.

1. lisää koodi edelliseen esimerkkiin

näytä

 

4) Ehtolauseet

esimerkin kuvaus: Tee ohjelma, joka tuo kirjastosta stagelle movieclipin ja alkaa siirtämään sitä, jokaisella framella vasemmalle. Kun movieclippi siirtyy stagen vesemman reunan taake se palautuu oikeasta reunasta sisään.

1. luo fla tiedosto, jossa movieclip, joka liitetään Katuvalo luokkaan
   1. movieclip properties > Export for actionscript > Class: Katuvalo
2. KatuvaloTesti luokka tiedosto linkitetään fla tiedostoon: fla dokumentin properties paneelin Class tekstikenttään KatuvaloTesti

näytä

6)    Seikkailukirja projekti

1. luo fla tiedosto, jossa kolme movieclip:iä (kirjastoon, stagella ei ole mitään): ja linkitys kunkin movieclipin Properties paneelissa luokkiin: AloitusSivu, VuoristoNakyma ja LampiNakyma (Export for actionscript ruksi ruutuun)
2. tee nappulat jokaiseen movieclippiin:AloitusSivu:lla kaksi nappulaa, jotka vie lammelle ja vuorelle sekä VuoristoNakyma:ssä ja LampiNakyma:ssä takaisin nappula
3. nappulat EI linkity actionscriptiin Properties paneelissa vaan niille instanssin nimet kuten koodissa: hillButton, pondButton, backToStartButton
4. linkitä FLA tiedosto Seikkailu luokkaan: properties paneelissa Class tekstikenttään luokan nimi: Seikkailu

näytä

 

 

8) silmukat

esimerkin kuvaus: ohjelma printtaa output paneeliin silmukan tuottamat numerot

1. Samaan tapaan kuin edellä: luo Silmukka.as luokkatiedosto ja fla tiedosto, joka linkittyy Silmukka luokkaan

8b) silmukat

1. muokkaa konstruktori metodia: lisää/muokkaa edelliseen koodiin lihavoidut rivit
2. 8a:n koodi:
   for (var i:uint = 0; i < 10; i++) {
                  trace(i);
3. korvataan koodilla:
4.     for (var i:uint = 0; i < 20; i++) {
              var particle:Partikkeli = new Partikkeli(); // MovieClip
              particle.x=i * 25+30;
              particle.y= 150;
              addChild(particle);
5. vaihda fla tiedoston taustaväriksi jokin tumma väri.
   luo 18px läpimittainen valkoinen pallo, ja tee siitä movieclip: valitse kirjastosta movieclip:in Properties ikkuna paina advanced, anna Export for Actionscript Class tekstikenttään nimeksi : Partikkeli

näytä

8c)

näytä

8d)

• huom Teksti luokkaa tarvitaan:

• package 
  {
      import flash.display.Sprite;
      import flash.text.TextField;
       
      public class Teksti extends Sprite
      {
          private var field:TextField;               
          public function Teksti( tekstia:String,x:uint,y:uint)
          {
             field = new TextField();
             field.text = tekstia;
             field.x = x;
             field.y = y;
             addChild(field);
          }
      }
  }

• kopioi ekalla tunnilla tehty Teksti.as luokkatiedosto nykyiseen projektikansioon
• jos numerot ei näy siirrä Partikkeli movieclipin rekisteröintipistettä: näin:

näytä

8e)

näytä

 

9) Partikkeli luokka

• 9 koodi menee uuteen luokkatiedostoon
• luo luokkatiedosto Partikkeli.as samaan kansioon kuin edelliset koodit ja testaa

näytä

9b)

• koodirivi:
• particle.speedY = (Math.random() * 3) +6; // tuottaa satunnaislukuja 6 ja 9 välillä

näytä

9c) korvaa koodirivi:

public var speedX:int=2;

koodilla:

public var speedX:int=(Math.random() * 4) +1;

näytä

 

 

 

 

 

 

 

Tehtäviä:

1. muokkaa esimerkkiä 1b-c: lisää rivejä TekstiTesti luokkaan niin, että näkyy useampia tekstejä
2. muokkaa esimerkkiä 4: tee variaatio, jossa liike on toiseen suuntaan
3. toteuta ohjelma, jossa ilmapallo nousee ylös. Kun ilmapallo on kuva-alueen yläreunan yläpuolella, se nousee uudelleen alhaalta ylös
4. muuta 3b esimerkin rakennetta niin, että fla:n luokkatiedosto tuo stagelle vain yhden movieclipin, jonka nimi Lentokone ja jonka sisällä on myös potkuri.
5. tehtävä: luo neljäs näkymä 6. esimerkkiin esim. peltonäkymä ja vuoristonäkymään nappula, josta sinne pääsee. Täydennä koodiin tarvittavat lisäykset.
6. Luo ohjelma, jossa kaksi luokkatiedostoa: Arvonta ja SatunnaisLuku.
   Arvonta luokan konstruktorissa on koodi:
   satunnaisluku = new SatunnaisLuku(10);
   trace(satunnaisluku.arvoLuku());
   joka tulostaa trace viestillä satunnaisluvun 1 ja 10 välillä.
7. Muokkaa Siirin tunnilla tehdystä esimerkistä versio, jossa koodi on luokkatiedostossa: esimerkki, jossa hiiren positio pyörittää movieclippiä
8. lisää lentokoneprojektiin ääni
9. toteuta ohjelma, jossa ilmapallo nousee ylös satunnaisesta kohdasta (yhdistä tehtävä 3 ja 6)
10. tuto 02