Odtwarzacz MP3 we flashu

Flash Designer – TWORZENIE – ćwiczenie 11
Odtwarzacz MP3 we flashu
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.
Aby załadować do odtwarzacza własny dźwięk trzeba będzie 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.
1. Otwórz program Flash Designer i ustaw rozmiar ramki na 400 x 64, a czas ramki Frame 1
na Stop.
2. Narysuj prostokąt, który będzie tłem i wypełnij go gradientem o orientacji pionowej.
3. 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.
4. Narysuj ikony przycisków rysując linie przy użyciu narzędzia Kształt i wypełnij je
gardientem o różnej kolorystyce.
5. Utwórz grupy z poszczególnych trzech składowych każdego przycisku
© Multimedialne Centrum Informacyjne – Zespół Szkół Zawodowych Nr 3 – 2007
Flash Designer – TWORZENIE – ćwiczenie 11
6. Narysuj „wyświetlacz” odtwarzacza: czarny prostokąt z szarym obramowaniem grubości 3
pikseli.
7. Dodaj 2 pola edycji i nazwij je „playedtime” i „totaltime” (nazwy pól pokazujących wartości
zmiennych), użyj tekstu białego koloru
8. Narysuj pasek postępu - prostokąt wielkości 110x10, bez obramowania, z zielonym
gradientowym wypełnieniem orientacji pionowej.
9. Przekonwertuj go na sprite i nazwij go „sndbar”, zaznacz opcję Obiekt w ActionScript.
10. Dodaj znak oddzielający „/” pomiędzy „playedtime” a „totaltime”
11. Stwórz regulację głośności: dodaj trójkąty wskazujące do góry i do dołu z galerii (Wstaw >
Nawigacja) i pomniejsz je. Dodaj ikonkę głośnika (do pobrania z POBIERALNI
www.ekonomik.edu.pl - opcjonalnie) lub utwórz np. w Paint’e. Jako tło dodaj prostokąt o
wymiarach 19x47 pikseli z wypełnieniem szarym pionowym gradientem.
12. 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.ekonomik.edu.pl/index.php?page=pliki&cd=Informat
yka/sound.mp3,true);
volume = 100;
pause=0;
function f1()
{
// procent załadowania
buffered=Math.floor((mySnd.getBytesLoaded()/mySnd.getBytesTotal())*100);
© Multimedialne Centrum Informacyjne – Zespół Szkół Zawodowych Nr 3 – 2007
Flash Designer – TWORZENIE – ćwiczenie 11
// 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
13. Ustaw kod akcji kliknięcia dla przycisku Play
mySnd.start(0,100);
pause=0;
action="play";
14. Ustaw kod akcji kliknięcia dla przycisku Stop
mySnd.stop();
action="stop";
15. Ustaw kod akcji kliknięcia dla przycisku Pause
if(pause==1){
pause=0;
mySnd.start(pausepos/1000);
} else {
pause=1;
}
16. Wciśnij klawisz F9 aby uzyskać podgląd odtwarzacza.
© Multimedialne Centrum Informacyjne – Zespół Szkół Zawodowych Nr 3 – 2007