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

Indtil videre har vi oprettet et sound objekt med to knapper, en afspil/pause knap og en stop knap. Derudover har viser vi også brugeren hvor mange minutter og sekunder der er blevet afspillet. Den samlet kode ser 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/************************************************************************
SoundObjektet initialiseres
************************************************************************/
 
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);
 
 
 
/************************************************************************
Knapper
************************************************************************/
 
//Stop knap
stopBtn.onRelease = function(){
 ff_lyd.stop();
 pausePlayBtn.gotoAndStop(3);
 soundPlaying = false;
 pausedAt = 0
}
 
 
//Afspil/Pause knap
var pausedAt:Number = 0;
var soundPlaying:Boolean = true;
 
pausePlayBtn.onRollOver = function(){
  this.gotoAndStop(this._currentframe+1);
}
 
 
pausePlayBtn.onRollOut = function(){
  this.gotoAndStop(this._currentframe-1);
}
 
 
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
************************************************************************/
 
//Displayed viser minutter og sekunder. Når nummeret er færdigt, vises 00:00. 
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;
      }
        if (minutes<10) {
          minutes = "0"+minutes;
        }
    timeTxt.text = minutes + ":" + seconds;
  
      if(currentSec == totalSec){
        delete onEnterFrame;
        timeTxt.text = "00:00";
      }
  }
}
soundTime();

Volume slider

Det næste vi skal lave på afspilleren er en volume slider, der kan skrue op og ned for lyden. Se eksemplet inden du starter på koden, så du forstår hvordan den skal fungere.

Det første vi gør er, at lave et movieclip med instance-navnet volume, der indeholder følgende grafik elementer.

Øverste lag indeholder et transperant mc med navnet dragBtn som har størrelsen 50x16 px. Det er det movieclip der har en blå ramme om sig på billedet.

Dernæst har jeg lavet en maske, som sørger for, at slideren (det er den grønne kasse) har form som en trekant. Det er den røde figur på billedet. Den har ikke noget instance-navn.

Slideren, som er den grønne kasse der skal skaleres op og ned alt efter hvor brugeren klikker, har størrelsen 25x16 px og instance-navnet slider. Grunden til at den er halvt så stor som de resternde elementer kommer jeg ind på senere.

Til sidst er der baggrunden, som fortæller brugeren hvad maximum lydstyrke. Det er den grå trekant i baggrunden.

Det første vi gør er, at sætte lydens styrke til 50 med setVolume. På den måde brager lyden ikke ud af højttalerne, og samtidig er det mere logisk for brugeren, at vedkommende kan trække i den grønne slider. Det var derfor at slider mc’et skulle være halv størrelse

ff_lyd.setVolume(50);

Dernæst starter vi en onEnterFrame event når brugeren klikker på dragBtn og holder musseknappen nede.

1
2

volume.dragBtn.onPress = function() {
this.onEnterFrame = function(){

Så tjekker vi, om musen er inde over dragBtn knappen med en if sætning. Hvis den er det, skal vi ændre bredden af slideren (den grønne kasse). Bredden bliver bestemt, af musens x-position i volume mc’et ved hjælp af this.xmouse. 

1
2

if(this._xmouse < this._width && this._xmouse > 0){
this._parent.slider._width = this._xmouse;

Da dragBtn knappen er 50 px, vil slider mc’ets bredde variere mellem 0 og 50. Derfor har vi et lille problem, når vi skal sætte lydstyrken for vores lydobjekt, da intervallet spænder fra 0 til 100. Hvad gør vi så? jo vi finder ud af hvor meget vi skal sætte volumen til, når slider mc’et er 1 px bred ved at dividere 100 med slider mc’ets bredde (50). Dvs. når slider mc’et er 1 px bred, sætte volumen til 2. Hvis slider mc’et derimod er 10 px bred sætter vi volumen til

100/50*10 = 20

ff_lyd.setVolume((100/this._width)*this._parent.slider._width);

Husk at afslutte if sætning med en }.

Er vi så færdige? Nej, for vi skal jo også tage stilling til, hvad der skal ske, når musseknappen er nede og musens position er mindre end 0 eller større end 50.
Hvis musens position er mindre end 0 sætter vi slider mc’et til 0 px og volumen til 0. Hvis musens position er større end 50, sætter vi slider mc’et til 50 px og volumen til 50.

1
2
3
4
5
6
7
8
9

if(this._xmouse > this._width){
this._parent.slider._width = this._width;
ff_lyd.setVolume((100/this._width)*this._parent.slider._width);
}
        
if(this._xmouse < 0 ){
this._parent.slider._width = 0;
ff_lyd.setVolume((100/this._width)*this._parent.slider._width);
}

Husk at aflsutte onPress eventen, med en }.

Når brugeren giver slip på musseknappen inde over dragBtn eller uden for dragBtn skal vi lige sørge for, at vores onEnterFrame event bliver afsluttet med delete this.onEnterFrame.

1
2
3

volume.dragBtn.onRelease = volume.dragBtn.onReleaseOutside = function() {
 delete this.onEnterFrame;
}

Det vil sige, at den samlet kode til volume knappen ser 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

ff_lyd.setVolume(50);
 
volume.dragBtn.onPress = function() {
 this.onEnterFrame = function(){
    if(this._xmouse < this._width && this._xmouse > 0){
      this._parent.slider._width = this._xmouse;
      ff_lyd.setVolume((100/this._width)*this._parent.slider._width);
    }
      if(this._xmouse > this._width){
        this._parent.slider._width = this._width;
        ff_lyd.setVolume((100/this._width)*this._parent.slider._width);
      }
        if(this._xmouse < 0 ){
          this._parent.slider._width = 0;
          ff_lyd.setVolume((100/this._width)*this._parent.slider._width);
        }
  }
}
 
volume.dragBtn.onRelease = volume.dragBtn.onReleaseOutside = function() {
 delete this.onEnterFrame;
}

Preloader

Sandsynligheden for at vores mp3 afspiller kommer til at spille mp3 filer som fylder mellem 4-6 Mb er ret stor. Her tænker jeg på musikfiler fra en kunstner som gennemsnitlig varer 3 minutter. Derfor er det en god ide, at have en preloader, der sørger for, at sangen ikke hakker på computere med langsomme internetforbindelser.

For at vores lydobjekt kan begynde at spille inden nummeret er hentet 100% ændre vi lige i vores koden

1
2
3
4
5
6
7
8
9
10

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

Vi fjerner
ff_lyd.start();

og ændre Boolean værdien i loadSound til true, så lyden streamer.

Det første vi gør er, at lave grafikken til vores preloader bar. Jeg har lavet en linie der er 470 px bred og 1 px høj. Denne omdanner jeg til et movieclip og giver den instance-navnet preloaderBar.

Det er det eneste stykke grafik vi skal bruge til preloaderen, så nu skal vi i gang med koden.

Vi laver en funktion der hedder preloader så vi kan kalde den hver gang der skal loades en nye sang. Lige nu er der kun en sang der skal loades, men senere får vi brug for at kunne kalde den flere gange.

function preloader() {

Nu skal vi starte en onEnterFrame event, så vi kan begynde at tjekke hvor mange kilobytes der bliver loadet.

this.onEnterFrame = function(){

For at finde ud af, hvor mange kilobytes vi skal loade – altså størrelsen på sangen burger vi getBytesTotal() metoden som returnerer et tal. Men vi vil jo også gerne vide hvor mange kilobytes der løbende bliver loadet, og til det formål bruger vi metoden getBytesLoaded, som ligeledes returnerer et tal.

1
2

var numBytesLoaded:Number = ff_lyd.getBytesLoaded();
var numBytesTotal:Number = ff_lyd.getBytesTotal();

Så langt så godt. Ud fra de to ovenstående værdier, kan vi med simpel matematik finde ud af hvor mange procent af nummeret der er blevet loadet. Og derefter bruge _xscale metoden som skalerer et objekt i procent. Værdien af _xscale påfører vi vores preloaderBar så brugeren kan følge med i hvor meget af nummeret der er blevet hentet.

var numPercentLoaded:Number = Math.floor(numBytesLoaded / numBytesTotal * 100);

Math.floor metoden runder ned til nærmeste hele tal.

Nu kan vi, som nævnt tidligere, skalere vores preloaderBar efter værdien af numPercentLoaded

preloaderBar._xscale = numPercentLoaded;

Vi opretter en if sætning som tjekker for, om hele mp3 filen er blevet hentet. det gør vi ved, at tjekke om mere end 99% af nummeret er blevet hentet. Hvis dette er tilfældet sletter vi vores onEnterFrame, med delete this.onEnterFrame

1
2
3

if(numPercentLoaded > 99){
 delete this.onEnterFrame;    
}

og så skal koden bare afsluttes. Hele preloader koden kommer til at se således ud:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function preloader() {  
  this.onEnterFrame = function(){  
    var numBytesLoaded:Number = ff_lyd.getBytesLoaded();
    var numBytesTotal:Number = ff_lyd.getBytesTotal();
    var numPercentLoaded:Number = Math.floor(numBytesLoaded / numBytesTotal * 100);   
    
    preloaderBar._xscale = numPercentLoaded;
    
    if(numPercentLoaded > 99){
      delete this.onEnterFrame;     
    }
  }
}
preloader();