Odtwarzacz MP3 we flashu

~ pozostałe przykłady ~

Tutorial ten przedstawia jak załadować plik MP3 do animacji flash i sterować jego odtwarzaniem, tworząc odtwarzacz MP3 we flashu w programie Flash Designer.

Możesz pobrać gotowy projekt jako plik źródłowy t1061.zip (3 KB) i dostosować go do swoich potrzeb.

Przykładowego pliku źródłowego możesz dowolnie używać w swoich projektach.

Aby zobaczyć kod, wybierz z górnego menu programu "Ramka" > "ActionScript". Aby załadować do odtwarzacza własny dźwięk należy zmienić ścieżkę do pliku w kodzie ActionScript. Jest to tutorial na poziomie zaawansowanym. Podawany jest tylko ogólny opis wykonania i potrzebny kod ActionScript.

Otwórz program Flash Designer i ustaw rozmiar ramki na 400 x 64, a czas ramki 'Frame 1' na Stop.
Narysuj prostokąt, który będzie tłem i wypełnij go gradientem o orientacji pionowej.
Stwórz dwa przyciski używając 2 okręgów wypełnionych szarym gardientem o wielkościach 39x39 pikseli i 35x35 pikseli.

Dopasuj-wyrównaj oba okręgi i powiel trzy razy.
Narysuj ikony przycisków rysując linie przy użyciu narzędzia "Kształt" i wypełnij je gardientem o różnej kolorystyce.
Utwórz grupy z poszczególnych trzech składowych każdego przycisku
Narysuj "wyświetlacz" odtwarzacza: czarny prostokąt z szarym obramowaniem grubości 3 pikseli.
Dodaj 2 pola edycji i nazwij je "playedtime" i "totaltime" (nazwy pól pokazujących wartości zmiennych), użyj tekstu białego koloru
Narysuj pasek postępu - prostokąt wielkości 110x10, bez obramowania, z zielonym gradientowym wypełnieniem orientacji pionowej.
Przekonwertuj go na sprite i nazwij go "sndbar", zaznacz opcję "Obiekt w ActionScript".
Dodaj znak oddzielający "/" pomiędzy "playedtime" a "totaltime"
Stwórz regulację głośności: dodaj trójkąty wskazujące do góy i do dołu z galerii ("Wstaw" > "Nawigacja") i pomniejsz je. Skopiuj ikonkę głośnika z oryginalnego pliku projektu (opcjonalnie). Jako tło dodaj prostokąt o wymiarach 19x47 pikseli z wypełnieniem szarym pionowym gradientem.

Ustaw kod ActionScript dla pietrwszej ramki "Frame 1"

mySnd = new Sound(); // tworzy obiekt dźwięku
sndbar._visible = false; // ukrywa pasek odtwarzania dźwięku na początku


// onLoad wykonuje się gdy dźwięk załaduje się do końca
mySnd.onLoad = function(){
 // wyświetla czas w sekundach w "wyświetlaczu" odtwarzacza
 totalseconds = Math.floor(mySnd.duration/1000);
 totaltime=Math.floor(totalseconds/60) + ":" + totalseconds%60;
 // pokazuje pasek odtwarzania dźwięku
 sndbar._visible = true;

}

// aby załadować swój własny plik dźwiękowy, umieść go w Internecie
// i zmień poniższą ścieżkę dostępu
mySnd.loadSound("http://www.flashdesignerzone.com/tutorials/sound.mp3",true);



volume = 100;
pause=0;


function f1()
{
 // procent załadowania
 buffered=Math.floor((mySnd.getBytesLoaded()/mySnd.getBytesTotal())*100);

 // pokazuje pasek postępu
 if(buffered<100) { totaltime=buffered; totaltime = totaltime+"%"; }

 // rozszerza pasek odtwarzania
 sndbar._xscale=(mySnd.position/mySnd.duration)*100;

 // pokazuje ile sekund zostało odtworzone
 playedseconds=Math.floor(mySnd.position/1000);
 playedtime=Math.floor(playedseconds/60) + ":" + playedseconds%60;

 // usuwa pasek odtwarzania gdy nastąpi kliknięcie na Stop
 if(action=="stop"){ sndbar._xscale=0; }

 if(pause==1){
  pausepos=mySnd.position;
  mySnd.stop();
 }

}

setInterval(f1,100); // odświerza f1 co 0,1 sekundy

Ustaw kod akcji kliknięcia dla przycisku Play
```
mySnd.start(0,100);
pause=0;
action="play";
```
Ustaw kod akcji kliknięcia dla przycisku Stop
```
mySnd.stop();
action="stop";
```

Ustaw kod akcji kliknięcia dla przycisku Pause

if(pause==1){
 pause=0;
  mySnd.start(pausepos/1000);
} else {
 pause=1;
}

Wciśnij klawisz F9 aby uzyskać podgląd odtwarzacza.

Odtwarzacz MP3 we flashu

Chcesz skomentować ten tutorial?