Wśród podstawowych projektów, które każdy programista we flashu musi zaliczyć w czasie swojej kariery, jednym z najpopularniejszych jest budowa odtwarzacza MP3. Zbudowanie go to obecnie proste zadanie. W naszym poradniku wyjaśnimy zawiłości jego budowy, pokażemy jak przystosować go do naszych oczekiwań oraz jak rozszerzyć możliwości odtwarzacza przeznaczonego dla naszej strony WWW.
Przystosowanie odtwarzacza MP3 do własnych
potrzeb – poszerzenie jego funkcjonalności,
zintegrowanie go z podcastami
lub innymi technologiami wykorzystującymi
dźwięk nie jest aż tak trudne, jak to może się
z pozoru wydawać.
Odtwarzacz MP3 można zaprojektować i zaprogramować
na wiele sposobów. Jednak pod
względem podstawowych funkcji oraz sposobu
pracy wszystkie odtwarzacze sa do siebie podobne.
Nasz poradnik podpowie, jak zbudować
własny odtwarzacz MP3 wyposażony w podstawowe
przyciski funkcyjne i regulacje głośności.
Nauczymy sie tez, jak za pomocą XML-a tworzyć
własna listę odtwarzania, która będzie zawierać
listę plików MP3 wprowadzonych przez nas lub
naszych klientów. Flash korzysta z tej listy odtwarzania
XML do wyświetlania nazw plików
w odtwarzaczu. Owe pliki będzie można odtwarzać,
gdy dodamy cała funkcjonalność opisana
w poradniku.
Gdy już główna funkcjonalność będzie gotowa,
odtwarzacz można wzbogacać o dodatki.
Możliwości są nieskończone – w tym projekcie
skupimy się na podstawowym kodzie oraz
zaprojektowaniu niezbędnych elementów
odtwarzacza.
{tlo_1}
Krok 1. ustawianie właściwości
Otwieramy flasha i wybieramy przycisk Size w panelu Properties.
Jeśli nie mamy go otwartego, możemy to zrobić
wybierając Window | Properties |Properties. Gdy już okno
dialogowe jest otwarte, zmieniamy szerokość (Width) na
300 pikseli, a wysokość (Height) na 150 pikseli.
{/tlo}
{tlo_0}
Krok 2. definiowanie elementów GUI
Utworzenie odtwarzacza obsługującego liste odtwarzania,
gdzie do każdego utworu przypisane sa określone operacje,
wiąże sie z koniecznością przygotowania kilku elementów
interfejsu. Po pierwsze tworzymy listę umożliwiająca wyświetlanie
tytułów utworów, następnie grupę elementów,
które będą ich operacjami.
{/tlo}
{tlo_1}
Krok 3. wyświetlenie playlisty
Aby móc wyświetlać listę odtwarzania we flashu, dodajmy
pozycje List z panelu Component. Nie jest ona obecnie otwarta,
znajdziemy ja wybierając Window |Components.
Gdy panel jest już dostępny, przenosimy element List na
nasz projekt i odpowiednio zmieniamy jego rozmiar, tak jak
pokazano na zrzucie.
{/tlo}
{tlo_0}
Krok 4. dodanie przycisków funkcyjnych
Aby odtwarzacz MP3 mógł kontrolować odtwarzanie utworów,
konieczne sa dodatkowe przyciski. Dwa, które dodamy
to Odtwarzanie oraz Stop. Znajdziemy je w panelu
Component i przenosimy na projekt. Teraz możemy zmienić
tekst przycisków za pomocą pola Label w panelu Property.
{/tlo}{tlo_1}
Krok 5. playlista w XML-u
Wystarczy utworzyć listę nazw plików dla każdego utworu
w postaci prostej struktury, jak to pokazano na zrzucie ekranu.
Ta lista składa sie z głównego węzła o nazwie files
oraz childNodes dla każdej nazwy pliku o nazwie file. Będziemy
musieli dodać własne nazwy plików ze względu na
prawa autorskie.
{/tlo}
{tlo_0}
Krok 6. ustawienie obiektów XML
Uzyskanie dostępu do XML-a we flashu wiąże sie z koniecznością
utworzenia obiektu XML, dzięki czemu można załadować
plik. Zaczniemy od nazwania tego obiektu fileList,
następnie ustawimy właściwości {stala}ignoreWhite{/stala} na true, aby
pozbyć sie pustych znaczników XML i zagwarantować
sprawny proces ładowania. Nie chcemy, by do systemu
wkradły sie błędy.
{/tlo}{tlo_1}
Krok 7. załadowanie playlisty XML
Zastosujemy {stala}metode load{/stala} z obiektu {stala}fileList{/stala} i wprowadzimy nazwę pliku jako parametr ciągu znaków: {stala}fileList(\’files.cml\’){/stala}. Ustawiamy
zdarzenie onLoad jako funkcje przejmowania danych XML, po tym jak w całości zostaną załadowane.
{/tlo}
{tlo_0}
Krok 8. parsowanie XML
Koncepcja stojąca za parsowaniem XML-a nie zawsze jest
łatwa do zrozumienia. Zasadniczo chodzi o to, ze wybieramy
pozycje w strukturze i uzyskujemy dostęp do ich wartości.
Tutaj, parsujemy nazwy plików dla każdego utworu
na naszej liscie odtwarzania. Na szczęście lista odtwarzania
to prosta struktura, wiec parsowanie łatwo przeprowadzić.
{/tlo}
{tlo_1}
Krok 9. parsowanie nazw plików
Aby zaadresować nazwę pliku, konieczna jest iteracja poprzez
{stala}childNodes{/stala} w pliku XML. Po drodze wybieramy {stala}first-
Child{/stala} z każdego węzła i będziemy w stanie przejrzeć jego
indywidualny {stala}nodeValue{/stala}. Owe {stala}nodeValue{/stala} to nazwy plików
z XML-a, które od tej pory będzie można dodawać do listy
odtwarzania.
{/tlo}
{tlo_0}
Krok 10. ładowanie playlisty
Aby załadować listę odtwarzania z nazwami plików, które
właśnie parsowaliśmy, użyjemy metody additem, które
umożliwia dodawanie prostych ciągów tekstowych i kojarzenie
danych. W naszym projekcie dodamy etykietę, do
której będziemy sie odwoływać podczas odtwarzania danego
utworu.
{/tlo}
{tlo_1}
Krok 11. definiowanie listy akcji
Zdefiniowanie listy akcji wiąże się z utworzeniem obiektu
odbiornika zdarzeń dla komponentu listy. Nazwiemy obiekt
{stala}listListener{/stala}, dodamy go do naszej playList za pośrednictwem
metody {stala}addEventListener{/stala} i ustawimy odbiornik na
zdarzenie nazwane change.
{/tlo}
{tlo_0}
Krok 12. zastosowanie listy operacji
Nowy odbiornik monitoruje zmiany w liście odtwarzania. Gdy użytkownik wybierze jakiś utwór, uruchamia zdarzenie change.
Przejmuje ono obiekt zdarzenia jako parametr, który jest użyty do dostępu do danych przechowywanych w każdej pozycji
listy.
{/tlo}
{tlo_1}
Krok 13. wybór utworu
W wybranym zdarzeniu mamy kod, który pozwala przejrzeć
etykietę, która została ustawiona podczas zastosowania
nazw plików. Każda nazwa pliku jest przekazywana do metody
(która utworzyliśmy). Aby zaadresować nazwę pliku,
użyjemy obiektu zdarzenia, który jest przekazywany do zdarzenia
change i adresuje jego etykietę {stala}selectedItem{/stala}.
{/tlo}
{tlo_0}
Krok 14. odtworzenie utworu
Metoda stosowana do odgrywania utworów nosi odpowiednia
nazwę {stala}playSong{/stala}. Pobiera ona parametr nazwy pliku,
który przechodzi ze zdarzenia change. Należy sprawdzić
czy obecne sa ustawienia {stala}currentSound{/stala} i czy jest to ten sam
plik, który przeszedł jako parametr.
{/tlo}{tlo_1}
Krok 15. zatrzymanie odtwarzania
Zatrzymanie utworu jest proste, gdyż nasz odtwarzacz MP3
nie potrzebuje nawet wiedzieć, która piosenka jest uaktywniona,
by przenosić komendę. Po prostu użyjemy metody
{stala}stopAllSounds{/stala}, by przerwać wszystko, co jest obecnie odtwarzane.
Gdy użytkownik wybierze nowy utwór, dźwięk
znowu będzie odtwarzany.
{/tlo}
{tlo_0}
Krok 16. przełączanie miedzy utworami
Aby przełączyć z jednego utworu na inny, konieczne jest
utworzenie nowego obiektu Sound za każdym razem, gdy
wybieramy nowa pozycje. Po jej wybraniu inicjujemy metodę
playSong i sprawdzamy czy utwór jest odtwarzany. Jesli
nie, tworzymy nowy obiekt Sound. Nadpisujemy nim obecny
obiekt i uruchamiamy odtwarzanie utworu.
{/tlo}
{tlo_1}
Krok 17. kontrola głośności
Dodanie tej istotnej funkcji może sie wydawać trudne, jest
jednak konieczne. Pokażemy stosunkowo prosty sposób
zbudowania regulacji głośności; będzie ja można zastosować
w jakimkolwiek odtwarzaczu MP3, jaki zbudujemy
w przyszłości. Na zrzucie widzimy suwak, którego zbudowanie
jest naszym celem.
{/tlo}
{tlo_0}
Krok 18. tworzenie suwaka
Przede wszystkim opracujemy suwak w taki sposób, by
można było regulować głośność obserwując zmiany ustawienia.
Tworzymy przycisk w kształcie prostokąta z centralnie
ustawionym punktem rejestrującym, który nazwiemy
slider. To właśnie ten obiekt będzie przesuwany, gdy użytkownik
pochwyci go wskaźnikiem myszy. Teraz musimy
utworzyć rynienkę, po której będziemy przesuwać suwak.
{/tlo}
{tlo_1}
Krok 19. tworzenie rynienki
Rynienka to linia, która służy jako prowadnica dla suwaka.
Ten element musi być klipem filmowym o następującej charakterystyce:
linia o szerokości 100 pikseli z punktem rejestracji
po jego lewej stronie w poziomie i w środku płaszczyzny
pionowej. Służą one do narzucenia ograniczeń w ruchu
suwaka.
{/tlo}
{tlo_0}
Krok 20. połączenie suwaka z rynienka
Gdy już utworzyliśmy rynienkę i suwak, łączymy te dwa
elementy w jeszcze jeden klip filmowy i nazywamy go volume.
Tworzymy ów klip filmowy z punktem rejestrującym po
jego lewej stronie w poziomie i w środku płaszczyzny pionowej
(podobnie jak w przypadku rynienki).
{/tlo}
{tlo_1}
Krok 21. ograniczenie kontroli głośności
Wprowadzamy ograniczenia w metodzie {stala}startDrag{/stala}: lewy
jako właściwość _x rynienki, góra jako _y, prawy jako
_x oraz szerokość i dół jako _y. Gdy użytkownik będzie poruszać
paskiem, będzie sie on przesuwać od lewej do prawej,
i z jednej strony rynienki do przeciwnej.
{/tlo}
{tlo_0}
Krok 22. ustawienie głośności
Podczas przesuwania suwaka uruchomiona jest onEnterFrame, która ustawia głośność dla własności _x suwaka. Gdy już
pościmy suwak, {stala}onEnterFrame{/stala} jest ustawiany na wartość zerowa, co powoduje jego zatrzymanie. Odwołujemy sie do metody
{stala}stopDrag{/stala}.
{/tlo}
Pauza na przemyślenie
Nikt nie będzie puszczać piosenki od początku, za każdym razem, gdy kliknie
przycisk Stop – oto sposób, jak wprowadzić funkcje pauzy.
Przycisk
Tworzymy przycisk dla funkcji Pauza i nazwiemy go pause-
Button. Dwie linie użyte do utworzenia ikony są uniwersalnym
oznaczeniem komendy Pauza. Umieszczamy przycisk
tuz obok przycisku Odtwarzaj w layoucie naszego odtwarzacza.
Pauzowanie
Wrzucenie Pauzy, gdy użytkownik wciśnie przycisk jest
prostym przypadkiem zatrzymania obecnego odtwarzania
za pomocą komendy {stala}currentSound.stop{/stala}.
Ponowne odtwarzanie pliku
Funkcja playSound uruchamia currentSound (jeśli istnieje)
i ustawia pozycje startowa dla pozycji utworu. Aby to
uzyskać podzielimy parametr position przez 1,000, aby
przekonwertowac go na sekundy. To zapewni dalsze odtwarzanie
utworu od właściwego punktu.
