ActionScripti õppematerjal

1. Pildigalerii navigeerimisnuppudega

Tagasi sirvima

Loome väikese fotogalerii, kus iga pilt oleks eraldi võtmekaadril. Piltide sirvimiseks lisame navigeerimisnupud ning kirjutame nende ActionScripti koodi. Iga pildi alla kuvame pealkirja andmete massiivist.

Õpime:

• Kasutama muutujaid ning massiive
• Kuvama infot dünaamilisse tekstikasti
• Kasutama animatsioonis liikumiseks nuppe
• Kirjutama ActionScripti mitmele kaadrile

Näidetest failid nav.fla, nav.swf

1. Esmalt impordime pildid Flashi objektikogusse (Library).
2. Lohistame iga pildi eraldi võtmekaardile esimesel kihil. Peale viimast pildiga võtmekaadrit teeme veel ühe võtmekaadri, mis edaspidi hakkab suunama esimesele võtmekaadrile.
3. Lisame uue kihi (Insert Layer). "Layer 1" võib selguse mõttes ümber nimetada kihiks "Fotod", tekitatud "Layer 2" kihiks "Vahendid".

Joonis 1.1 - Võtmekaadri lisamine

4. Loome uued objektid: nupp edasi, nupp tagasi ning graafilise sümboli tekstiKast. Sümbol tekstiKast koosneb ristkülikust (rectangle), staatilisest tekstikastist fotode autori nimega ning dünaamilisest tekstikastist infoKast.
5. Lohistame vastloodud objektid selleks loodud uuele kihile soovitud kohtadele laval. Uus kiht peab olema pikendatud eelviimase kaadrini, viimaseks kaadriks samamoodi tühi võtmekaader.
6. Anname nuppudele edasi ja tagasi instantsinimed Edasi ja Tagasi. Selleks tuleb vastav objekt selekteerida ning seadistuste (Properties) paneelil instantsinime (Instance name) lahtrisse (valiku Button all) kirjutada vastavalt Edasi ja Tagasi.
7. Avame Actions-paneeli, valides menüüst Windows > Actions või vajutades klaviatuuril F9.
8. Jälgida tuleb, et koodi hakataks kirjutama Vahendite kihi esimesele (võtme)kaadrile. Esmalt paneme tööle nupud. Eelmisele/järgmisele kaadrile liikumiseks on kasutada funktsioonid nextFrame() ja prevFrame(), teeme nii, et vastav funktsioon käivituks siis, kui vabastame hiireklahvi nupul Edasi või Tagasi.

Kasutame näites sündmust onRelease(), kirjutame:

Edasi.onRelease = function(){
   nextFrame();
};

Tagasi.onRelease = function(){
   prevFrame();
};

Kontrollida tulemust.

Eeldame, et tahame piltide all näha ka pealkirju või kommentaare. Taolisi fotogaleriisid luues võivad fotograafid soovida, et näha oleks ka foto pealkiri, tehnilised näitajad (nagu säriaeg, diafragma arv) jm.

Probleemi võib lahendada kahte moodi. Võib kopeerida igale kaadrile kindlasse kohta staatilise tekstivälja ning sisestada sinna soovitud info. Meie näites on kasutusel dünaamiline tekstiväli, mis väljastab info andmemassiivist vastavalt kaadrile, millel parasjagu asutakse.

9. Dünaamiline andmeväli sai graafilisse objekti tekstiKast lisatud punktis nr. 4, nüüd pole muud, kui see soovitud informatsiooni kuvama saada.Esmalt delegeerime muutuja kaadriNr (numbriline andmetüüp) ning omistame talle väärtuseks _currentframe, mis on Flashi enda konstant. Senise koodi algusesse kirjutame:

var kaadriNr:Number = _currentframe;

10. Nupul klõpsates soovime, et kaadri number suureneks või väheneks ühe võrra. Selleks kirjutame vastavate funktsioonide juurde lisaks
    kaadriNr++; (edasi) ja
    kaadriNr--; (tagasi).

    kaadriNr++ on sama, mis kirjutada: kaadriNr = kaadriNr + 1.

11. Kuvame kaadri numbri ka meie infokasti. Et kaadri numbrit uuendatakse, on järgnev koodirida vaja kopeerida nii nuppude funktsioonide sisse kui ka põhikoodi (et Flashi esitlusse sisenedes kuvataks tekst ka siis, kui hiirega polegi veel kuhugi klõpsatud). infoKast.text = kaadriNr;

12. Teeme massiivi piltide pealkirjadest. Massiivi saab hoida hulka ühetüübilisi andmeid. Massiivi esimeseks elemendiks on null-element. Jätame selle lihtsuse mõttes tühjaks, et kaadrile 1 vastaks pealkiri[1], mitte pealkiri[0] jne.

    var pealkiri:Array = new Array();
    pealkiri[0] = "";
    pealkiri[1] = "M/S Rotterdam";
    pealkiri[2] = "Päikeseloojang rannas";
    pealkiri[3] = "Ootamatu külaline";
    pealkiri[4] = "Moderne rehetare";

13. Viimaks lisame pealkirja kuvamise praegusele kaadrinumbri näitamisega:

    infoKast.text = kaadriNr + ": " + pealkiri[kaadriNr];

14. Viimase sammuna lisame "Vahendite" kihi viimasele kaadrile koodi:

    gotoAndStop(1);

    Niimoodi hüpatakse peale viimasel pildil edasi klõpsamist tagasi esimesele kaadrile.

Kogu valminud rakenduse kood:

• Kiht "Vahendid", kaader 1:

  var kaadriNr:Number = _currentframe;
  
  var pealkiri:Array = new Array();
  pealkiri[0] = "";
  pealkiri[1] = "M/S Rotterdam";
  pealkiri[2] = "Päikeseloojang rannas";
  pealkiri[3] = "Ootamatu külaline";
  pealkiri[4] = "Moderne rehetare";
  
  infoKast.text = kaadriNr+": "+pealkiri[kaadriNr];
  
  Edasi.onRelease = function():Void {
  	kaadriNr++;
  	infoKast.text = kaadriNr+": "+pealkiri[kaadriNr];
  	nextFrame();
  }
  
  Tagasi.onRelease = function():Void{
  	if(kaadriNr == 1){
  	}else{
  		kaadriNr--;
  		infoKast.text = kaadriNr+": "+pealkiri[kaadriNr];
  		prevFrame();
  	}
  };
  
  stop();

• Kiht "Vahendid", viimane kaader:

  gotoAndStop(1);

Tagasi sirvima