Multimedieutvikling i Flash

Kapittel 6 - Interaktivitet

Stikkord (og noen kommentarer) til

som må kunnes og vil bli gjenstand for vurdering.

Begreper:

Interaktivitet:

Med interaktivitet mener vi at bruker kan gi input til applikasjonen og styre hva applikasjonen skal gjøre.

For å få til dette må vi ha input-komponenter (knapper, tekstfelt, nedtrekksbokser osv.) som må
kobles til kode vi lager og legger i
lytter-funksjoner.

(Vi kan enten bruke standard komponenter fra Components dialogen, eller lage våre egne med new Symbol og velge Button istedenfor MovieClip.)

Denne tilkoblingen gjøres ved å koble sammen eksempelvis et museklikk (hendelse/event) til en knapp med en lytter-funksjon, omtrent slik:

 
knapp.addEventListener(MouseEvent.CLICK,lytterfunksjon);

Det registreringsfunksjonen addEventListener gjør er å sette opp en "meldingsforbindelse" mellom deler av systemet og det kan illustreres omtrent slik:

 

Kompilerte og Tolkede programfiler: (s. 165-166)

Vi kommer tilbake til dette, men det som står i læreboken er ikke helt riktig, så en liten presisering:

Kompilerte programfiler:

Tokede programfiler:

Tolkede programmer kjøres ikke av en virtuell maskin, men av et eget program (oversetter/tolker) som kjører kildekoden direkte,
og oversetter til maskinkode, linje for linje. Da programmet må oversettes fra kildekode hver gang det kjøres, går dette
anslagsvis 10-100 ganger langsommere enn kompilerte programfiler, enten de er maskinkode for reelle eller virtuelle prosessorer.

Eksempler på språk som blir tolket er Basic, JavaScript, php,

Feilen i boken er at de sier at Flash Player tolker og oversetter. Flash Player inneholder faktisk en virtuell maskin, Tamarin, og har derfor
ikke en tolk/oversetter. .swf-filer er derfor ikke kildekode, men er blanding av data og maskinkode for Tamarin.)

Knapper i Flash:

Knapper (button) er eksempel på Komponenter, det vil si input-dingser vi kan plassere på skjermen for å gi brukeren mulighet til interaktivitet.

Vanlige komponenter er Button, TextInput, TextArea, ComboBox, Radiobutton, CheckBox, NumericStepper, Slider, ProgressBar, Slider, ColorPicker,...

Se i dialogen som kommer etter menyvalget: Window, Components !
(Der har vi standard knapper, hvis vi ikke ønsker spesielt utseende og lager dem selv med new Symbol og velger Button istedenfor MovieClip.)

Enkel koding i ActionScript:

Musehendelser:

Ligger i klassen MouseEvent.

Navigasjon på tislinjen:

Kan navigere på tidslinjen til et MovieClip objekt med navn "navn" med metodene (funksjoner i objekt)::

Kan få tak i viktig informasjon med egenskapene:

(Kan også hoppe til en navngitt scene, istedenfor en ramme.)

Eksempel på navigasjon hvor nøkkelrammer velges av knapper: (Se eksempel side 178-180.)

knapp1.addEventListener(MouseEvent.CLICK, gaTilEn);
knapp2.addEventListener(MouseEvent.CLICK, gaTilTo);
knapp3.addEventListener(MouseEvent.CLICK, gaTilTre);
knapp4.addEventListener(MouseEvent.CLICK, gaTilFire);

function gaTilEn(evt: MouseEvent):void {
	innhold.gotoAndStop(1);
}//gaTilEn()

function gaTilTo(evt: MouseEvent):void {
	innhold.gotoAndStop(2);
}//gaTilTo()

function gaTilTre(evt: MouseEvent):void {
	innhold.gotoAndStop(3);
}//gaTilTre()

function gaTilFire(evt: MouseEvent):void {
	innhold.gotoAndStop(4);
}//gaTilFire()

Eksempel på kode hvor vi velger nøkkelrammer med bare to knapper, right og left:

var nr: int = 1;	//Husker hvor vi er. Bilde 1 default

left.addEventListener(MouseEvent.CLICK, gaTilVenstre);

right.addEventListener(MouseEvent.CLICK, gaTilHoyre);

function gaTilVenstre(evt: Event):void{
   nr--;
   if(nr==0) {
      nr=4;
   }//if
   innhold.gotoAndStop(nr);
}//gaTilVentre()

function gaTilHoyre(evt: Event):void{
   nr++;
   if(nr==5) {
      nr=1;
   }//if
   innhold.gotoAndStop(nr);
}//gaTilHoyre()

Eksempel på kode hvordan vi kan klare oss med bare en lytterfunksjon:

left.addEventListener(MouseEvent.CLICK, pilknappLytter);
right.addEventListener(MouseEvent.CLICK, pilknappLytter);

function pilknappLytter(evt:MouseEvent):void {
   if(evt.target.name=="left") {        // target er referanse til sender-objektet
      nr--;
      if(nr==0) {
         nr=4;
      }//if første
   } else {
      nr++;
      if(nr==5) {
         nr=1;
      }//if siste
   }//if left/right
   innhold.gotoAndStop(nr);
}//pilknappLytter

Styre MovieClip-instanser:

Variabler og tilordning:

Hvis programmet skal ta vare på og huske tall-verdier, kan vi legge dem i variabler, som vi deklarerer(definerer) med "var":

var rammenummer: int = 1;	//Variabelen rammenummer er heltall (integer) og har startverdi 1.
var poeng: int = 0;		//Variabelen poeng er heltall og har startverdi 0.

Variabler kan etter deklarering refereres til med navn og endres med tilordning:

poeng = poeng + 1;	// poeng økes med 1.
poeng++;		// Kortversjon av instruksjonen over, poeng økes med 1.
poeng = poeng + 10;	// poeng økes med 10.
poeng+=10;		// Kortversjon av instruksjonen over, poeng økes med 10.

Variabler og tester:

For å kunne gjøre valg underveis i et program avhengig av hva som skjer underveis, må vi ha valginstruksjoner :

Den vanligste er if:

if(bildenummer > navn.totalFrames) {	//Hvis vi blar forbi siste bilde
   bildenummer = 1;			//Justere til første bilde
}
if(poeng == 1000) {		//Hvis poengsum er 1000
   poeng = poeng + 200;		//Gi 200 poeng i bonus!
} else {			//Ellers
   poeng = poeng + 10;		//Gi bare 10 poeng
}
if(ball.x > 600) {		//Hvis ballen er utenfor høyre begrensning
   fart=-fart;			//Sett farten til motsatt retning
}

Vanligste logiske tester:

Testing av tastaturhendelser:

Se side 192. Merk deg at boken bruker tungvindte tallkoder, for eksempel 37 for venstre piltast, istedenfor å bruke innebygde navn på piltaster:

Navn på taster ligger i Keyboard-klassen, tastatur-hendelser i KeyboardEvent-klassen.

stage.addEventListener(KeyboardEvent.KEY_DOWN, tastBleTrykket);	//Registrerer lytterfunksjonen
function tastBleTrykket(evt: KeyboardEvent): void {	//Lytterfunksjon:
   var tastekode = evt.keyCode;				//Husker koden som følger med hendelsesparameteren
   if(tastekode == Keyboard.RIGHT) {			//Hvis høyre piltast er trykket
      ball.x += 10;					//Flytt ballen 10 til høyre
   }else if(tastekode == Keyboard.LEFT) {		//ellers, hvis venstre piltast er trykket
      ball.x -= 10;					//Flytt ballen 10 til venstre
   }else if(tastekode == Keyboard.UP) {			//Osv. for oppover og nedover...
      ball.y -= 10;
   }else if(tastekode == Keyboard.DOWN) {
      ball.y += 10;
   }else {
	//Her kunne vi fanget opp andre tastetrykk...
   }//if
}//tastBleTrykket()

Laste inn bilder fra fil:

Hvis vi har lagt inn komponenten UILoader (Window, Components) og gitt den instans-navnet "bildeviser",
kan vi få denne komponenten til å laste inn bildet i filen bilde_x.jpg med kommandoen:

bildeviser.source = "bilde_x.jpg";

Se eksempel side 195.

Ferdigheter: