Lyd i Flash - del 2

Se et eksempel på hvad du kommer til at lave
Download .fla filen

Hvis du ikke har læst den første tutorial, kan du læse den her.

Nu da vi har fået lavet vores første lydobjekt og dermed kan afspille mp3 filerne i flash, vil det selvfølgelig være rart, for os selv og brugeren af playeren, at kunne styre lyden.

1
2
3
4
5
6
7
8
9
10
11

var ff_lyd:Sound = new Sound(); 
ff_lyd.onLoad = function(success:Boolean) {
 if (success) {
 ff_lyd.start();
 status_txt.text = "Lyden blev hentet korrekt";
 } else {
 status_txt.text = "Der gik et eller andet galt";
 }
};
 
ff_lyd.loadSound("ff_lifehouse.mp3", false);

Med ovenstående kode, vil mp3 filen blive afspillet en gang fra start til slut. Det er selvfølgelig ikke altid lige hensigtsmæssigt, så derfor vil vi gøre det muligt for brugeren, at starte, stoppe og pause mp3 filen.

Stop knap

Det første vi gør er, at lave en Stop knap, som vi giver instance navnet stopBtn. Denne har 4 actions

• Stopper sangen med en stop(); action.
• Sørger for, at Afspil/Pause knappen ændres til Afspil, så brugeren kan starte nummeret igen. gotoAndStop(3);
• Ligeledes sættes pausedAt variablen til 0, da sangen er blevet stoppet og tiden derfor nulstilles – dette bliver forklaret senere.
• soundPlaying holder styr på, om sangen spiller lige nu, den sættes til false, da sangen jo netop er blevet stoppet.

1
2
3
4
5
6

stopBtn.onRelease = function(){
 ff_lyd.stop();
 pausePlayBtn.gotoAndStop(3);
 pausedAt = 0;
 soundPlaying = false;
}

Hvis vi tester vores film nu (Ctrl + Enter) og klikker på stop knappen, vil lyden stoppes som tiltænkt. Nu skal vi så kunne starte lydobjektet igen. Derfor laver vi en Afspil/Pause knap (MovieClip) som indeholder disse stadier

Afspil/Pause knap

Ideen er, at lyden afspilles når brugeren åbner applikationen og Afspil/Pause knappen har teksten ”Pause” da brugeren kan klikke på knappen og pause lyden. ”Pause” teksten er tonet ned (60% alpha) og hvis brugeren fører musen hen over Afspil/Pause knappen skifter den til frame to hvor ”Pause” teksten er tonet op (100 alpha). Hvis brugeren klikker på knappen sættes lyden på pause og knappen skifter til frame 3 hvor ”Afspil” er tonet ned til 60% alpha. Her er princippet det samme som med Pause knappen. Hvis du er helt forvirret nu, så se de fire nedenstående illustrationer. Afspil/Pause knappen kalder vi for pausePlayBtn

Første frame hvor knappen ”Pause” er inaktiv (alpha 60%). Her sættes en stop action.

stop();

Anden frame hvor knappen ”Pause” er aktiv (alpha 100%)

Tredje frame hvor knappen ”Afspil” er inaktiv (alpha 60%)

Fjerde frame hvor knappen ”Afspil” er aktiv (alpha 100%)


Først laver vi rollOver og rollOut funktionerne. Lige meget om sangen afspilles eller er sat på pause, skal den gå en frame frem ved rollOver og en frame tilbage ved rollOut.

1
2
3
4
5
6
7

pausePlayBtn.onRollOver = function(){
  this.gotoAndStop(this._currentframe+1);
}
 
pausePlayBtn.onRollOut = function(){
  this.gotoAndStop(this._currentframe-1);
}

Derefter laver vi en onRelease action på knappen

1
2
3

pausePlayBtn.onRelease = function(){
  
}

hvori vi fylder nedenstående kode i.

For at kunne pause et lydobjekt, skal man først vide hvor mange sekunder af lyden der er blevet afspillet. for at finde denne værdi bruger vi egenskaben

Sound.position

der fortæller os hvor mange millisekunder inde i nummeret vi er. Herefter stopper man så filen med en stop(); action. Hvis man så vil starte lyden igen efter at den har været sat på pause, bruger man

start(det antal sekunder man var nået til i sangen).

Når brugeren så klikker på knappen tjekker vi om lyden spiller eller ej med en if/else sætning. Derfor har vi sat en variabel der hedder soundPlaying, som indeholder værdien true hvis lyden afspilles og false, hvis lyden er sat på pause.

Hvis lyden spiller og brugeren vil pause den sætter vi først pausedAt variablen lig med det antal sekunder af sangen der er blevet afspillet

ff_lyd.position/1000;

Derefter stoppes lyden

ff_lyd.stop();

og Afspil/Pause knappen går til frame fire (”Afspil”)

this.gotoAndStop(4);

Til sidst opdaterer vi lige variablen soundPlaying da lyden jo ikke spiller mere. Så værdien er

soundPlaying = false;

Hvis lyden derimod er sat på pause, skal vi have mp3 filen til at spille fra det sted hvor satte den på pause. Derfor afspilles lyden altid fra værdien af pausedAt. Denne bliver jo altid opdateret når vi klikker på stop knappen (værdien sættes til 0) eller på Afspil/Pause knappen (værdien bliver sat til position værdien).

ff_lyd.start(pausedAt);

Derefter sørger vi for at Afspil/Pause knappen går til frame to og at soundPlaying værdien sættes til true, da lyden jo er i gang med at spille.

Dvs at koden til Aspil/Pause knappen kommer til at således ud:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

pausePlayBtn.onRollOver = function(){
 this.gotoAndStop(this._currentframe+1);
}
 
pausePlayBtn.onRollOut = function(){
 this.gotoAndStop(this._currentframe-1);
} 
 
 
var pausedAt:Number = 0;
var soundPlaying:Boolean = true;
 
pausePlayBtn.onRelease = function(){
 if(soundPlaying == true){
 pausedAt = ff_lyd.position/1000;
 ff_lyd.stop();
 this.gotoAndStop(4);
 soundPlaying = false;    
 }
 else{
 ff_lyd.start(pausedAt);
 this.gotoAndStop(2);
 soundPlaying = true;
 }
}

Tid

Nu vil vi gerne kunne vise brugeren, hvor mange sekunder der er blevet spillet af sangen så vi starter med at oprette en funktion neden under vores knapper der hedder soundTime

function soundTime(){

og starter så en onEnterFrame event handler der hele tiden (24 gange i sekundet hvis din framerate står på 24 fps) tjekke hvor mange sekunder af sangen der er blevet afspillet

onEnterFrame = function(){

I den event handler, sætter vi to variabler totalSec og currentSec. Førstnævnte variabel indeholder antallet af sekunder som nummeret varer - duration/1000. Anden variabel indeholder det antal sekunder som der er blevet afspillet af sangen indtil videre position/1000.

1
2

var totalSec:Number = ff_lyd.duration/1000;
var currentSec:Number = ff_lyd.position/1000; 

Derefter sætter vi to nye variabler, som vi skal skrive ud til skærmen – antal minutter (minutes) og antal sekunder (seconds). For at undgå kilometer lange decimal tal, bruger vi Math klassen til at runde tallene ned ved, at skrive Math.floor foran udregningerne.
For at regne ud hvor mange minutter af sangen der er blevet afspillet bruger vi variablen currentSec, som vi satte tidligere, og dividerer denne med 60. På den måde får vi f.eks. 2,5568946 og ved at runde ned, når vi frem til et helt tal, som er udgør antal minutter.

Men vi skal jo også finde ud af hvor mange sekunder der er tilbage – det er jo decimalerne, som vi lige har rundet af. Derfor bruger vi modulo operatoren (%) som returnerer overskudet af ét tal divideret med et andet. Det er lidt svært at forklare, så lad os lige se på et par eksempeler.

8%3 vil returnere tallet 2, fordi 3 går op i tallet 8, 2 gange hvilket giver seks, og så er der 2 tilbage for at nå 8. Er du med? Lad os tage et eksempel mere. 43%6 giver resultatet 1 fordi 6 går op i tallet 43, 7 gange som giver 42, og for at nå 43 er der 1 tilbage.

1
2

var minutes = Math.floor(currentSec/60);
var seconds = Math.floor(currentSec%60); 

Nu kan vi sådan set godt begynde at skrive tallene ud i et tekstfelt, så lad os lave et tekstfelt der har instance navnet timeTxt med følgende tekst

timeTxt.text = minutes + ":" + seconds;

Det ser meget fint ud når der f.eks. står 10 minutter og 35 sekunder

10:35

Men hvis der f.eks. kun er 1 minut og 8 skunder tilbage ser det lige pludselig ikke så fint ud

1:8

Derfor skal vi lige have fyld nogle nuller ind i teksten, så der står

01:08

Det gøres meget enkelt med to if sætninger, hvor vi tjekker om antal minutter og antal sekunder har to decimaler. Hvis ikke, så tilføjer vi et

1
2
3
4
5
6
7

if (seconds<10) {
 seconds = "0"+seconds;
} 
 
if (minutes<10) {
 minutes = "0"+minutes;
}

Så er vi efterhånden nået til vejs ende i denne del, det eneste vi lige mangler er, at afslutte vores event handler, hvis sangen er færdig. Og til det formål kan vi tjekke om currentSec er lige med eller større end totalSec. Hvis det er tilfældet slutter vi handleren med delete onEnterFrame. Derefter skriver vi 00:00 ud til tekstfeltet der viser tiden.

1
2
3
4

if(currentSec >= totalSec){
 delete onEnterFrame;
timeTxt.text = "00:00";
} 

Aller sidste opgave er at kalde den funktion vi lige har kreeret med

soundTime();

Hele koden

Den færdige funktion der holder styr på tiden vil derfor se således ud:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function soundTime():Void{
 onEnterFrame = function(){
 var totalSec:Number = ff_lyd.duration/1000;
 var currentSec:Number = ff_lyd.position/1000; 
 
 var minutes = Math.floor(currentSec/60);
 var seconds = Math.floor(currentSec%60);
    
 if (seconds<10) {
 seconds = "0"+seconds;
 }
 else if (minutes<10) {
 minutes = "0"+minutes;
 }
 
 timeTxt.text = minutes + ":" + seconds;
  
 if(currentSec >= totalSec){
 delete onEnterFrame;
 timeTxt.text = "00:00";
 }
 }
}
soundTime();

• Download: lyd-i-flash-del-2.fla