Nie marzysz o niczym innym, jak o własnym odtwarzaczu plików MP3 we Flashu? Bez obaw, z nami dowiesz się, jak to zrobić! Stworzenie niepowtarzalnego odtwarzacza MP3 – poprzez nadanie mu wyjątkowej funkcjonalności lub zintegrowanie z innymi systemami – nie jest zadaniem aż takie trudne, jak mogłoby się wydawać.
Jest kilka takich projektów, które każdy szanujący się programista działający we Flashu powinien w swoim zawodowym życiu zrobić. Odtwarzacz plików MP3 to właśnie jeden z takich pomysłów, całkiem zresztą popularny. Zaprojektowanie własnego playera jest teraz prostsze niż kiedykolwiek wcześniej, a różnego rodzaju firmy bardziej niż kiedyś szukają wzorów na własne niepowtarzalne wersje aplikacji, ubranych w firmowe skórki (tzw.skiny).
Na szczęście stworzenie niepowtarzalnego odtwarzacza MP3 – poprzez nadanie mu wyjątkowej funkcjonalności lub zintegrowanie z innymi systemami, takimi jak np. podcasty – nie jest zadaniem aż takie trudne, jak mogłoby się wydawać.
Podstawowe reguły
Istnieje wiele przepisów na stworzenie kodu i designu
odtwarzacza MP3, ale z perspektywy głównych czynności wykonywanych przez program i ich efektu – odtworzenia pliku muzycznego – wszystkie rozwiązania
są do siebie podobne. Nasz przewodnik pokaże, w jaki sposób można stworzyć niepowtarzalnego playera MP3 wyposażonego w podstawowe funkcje (odtwarzanie, pauza i stop) oraz kontrolę głośności. Dowiesz się także, jak wygląda przygotowanie listy odtwarzania z użyciem pliku XML, zawierającego listę plików MP3 określonych przez ciebie lub twoich użytkowników.
Flash będzie korzystał z danych zawartych w pliku XML do wyświetlania nazw plików. Będą one dostępne do odsłuchania. Gdy zostanie wybrany element z listy, nazwa pliku posłuży do stworzenia nowego obiektu dźwiękowego we Flashu. Ten właśnie obiekt będzie powiązany z funkcjami startu, stopu, pauzy i zmiany głośności dla każdego utworu.
Po ukończeniu pracy nad rdzeniem odtwarzacza zajmiemy się jego wyglądem w taki sposób, aby pasował do każdego designu – wszystkie komponenty we Flashu obsługują skórki, nakładające różne tła, rollovery, rollouty i kolory czcionki. Możliwości są nieograniczone, dlatego nasz projekt skupia się na przedstawieniu głównie podstawowych elementów kodu i designu, niezbędnych do stworzenia niepowtarzalnego
odtwarzacza MP3.
A gdy poznasz już techniki opisane w artykule, czemu by nie rozwijać dalej projektu samodzielnie? W poszukiwaniu inspiracji przyjrzyj się najpopularniejszym
odtwarzaczom na rynku, takim jak np. iTunes (http://www.itunes.com). Oceń, które funkcje chciałbyś dodać do interfejsu, a następnie wprowadź swoje plany w życie! Po przeczytaniu naszego przewodnika będziesz w stanie stworzyć co tylko zechcesz, w szybki i skuteczny sposób.
Etap pierwszy: Przygotuj interfejs
{tlo_1}
Krok 1. Pierwsze kroki
Otwórz Flasha i wybierz opcję \”Size\” w panelu właściwości (Window > Properties
> Properties). Zmień szerokość (Width) na 300 pikseli, a wysokość (Height) na 150 pikseli. Otrzymasz w ten sposób podstawową bryłę dla przyszłego odtwarzacza.
{/tlo}
{tlo_0}
Krok 2. Zdefiniuj elementy GUI
Aby stworzyć odtwarzacz, który będzie zawierał listę piosenek i listę akcji powiązanych z każdą z nich, powinieneś przygotować kilka elementów interfejsu. Najpierw stwórz listę (List), na której będą wyświetlane tytuły piosenek,
a następnie grupę elementów, które posłużą za poszczególne akcje.
{/tlo}
{tlo_1}
Krok 3. Wyświetl listę odtwarzania
W celu wyświetlenia listy odtwarzania we Flashu dodaj komponent \”List\” z panelu komponentów (Window > Components). Wystarczy, że w tym celu przeciągniesz komponent \”List\” na scenę i odpowiednio dostosujesz
jego wielkość, tak jak pokazano na ilustracji.
{/tlo}
{tlo_0}
Krok 4. Dodaj przyciski funkcyjne
Żeby odtwarzacz MP3 pozwalał kontrolować piosenki, niezbędne są przyciski funkcyjne. Dodamy teraz dwa: start i stop. Znajdziesz je w panelu
komponentów (Components), przeciągnij je na scenę. Możesz teraz nadać im opis, wypełniając pole \”Label\” w panelu \”Property\”.
{/tlo}
{tlo_1}
Krok 1. Stwórz listę odtwarzania w XML
Przygotowanie nowej listy odtwarzania jest stosunkowo proste. Potrzebujesz
jedynie wypisać nazwy plików dla każdej z piosenek, tak jak to pokazano na ilustracji. Lista obejmuje główny węzeł nazwany \”files\” i węzły w nim zagnieżdżone (childNode) nazwane \”file\”.Pamiętaj, żeby dodać do listy tylko te pliki, co do których posiadasz prawa autorskie.
{/tlo}
{tlo_0}
Krok 2. Ustanów obiekt XML
Aby załadować XML we Flashu, musisz wpierw stworzyć obiekt XML, który załaduje plik. Zacznij od nazwania obiektu \”fileList\”, a następnie ustanów wartość \”true\” dla \”ignoreWhite\”, aby pominąć puste tagi XML i przyśpieszyć proces ładowania. Nie chcesz chyba, aby cała konstrukcja działała powoli, nawet na tym etapie.
{/tlo}
{tlo_1}
Krok 3. Załaduj listę w XML
Wgrywanie listy odtwarzania w XML jest tak proste, jak użycie metody \”load\” dla naszego obiektu \”fileList\” i przekazanie nazwy pliku jako parametru:
komenda brzmi \”fileList.load(\’files.xml\’)\”. Następnie ustanów zdarzenie \”onLoad\”, aby wyłapywało dane XML.
{/tlo}
{tlo_0}
Krok 4. Parsowanie XML
Koncepcja kryjąca się za parsowaniem XML nie zawsze jest łatwa do zrozumienia
– w uproszczeniu polega to na wskazaniu konkretnych rzeczy oraz ich wartości w strukturze pliku. W naszym przykładzie parsujesz nazwy plików dla każdej z piosenek na liście. Na szczęście nasza lista ma nieskomplikowaną
strukturę, więc parsowanie przebiega łatwo.
{/tlo}
{tlo_1}
Krok 5. Parsowanie nazw plików
Aby wskazać nazwy plików, musisz najpierw przedrzeć się przez hierarchię
pliku XML. Wskazujesz pierwsze dziecko (firstChild) każdego węzła (childNodes) i pobierasz jego konkretną wartość (nodeValue). Są to nazwy plików
zapisane w pliku XML, które możesz teraz zamieścić na liście odtwarzania.
{/tlo}
{tlo_0}
Krok 6. Zapełnienie listy
W celu zapełnienia listy odtwarzania nazwami plików, które właśnie sparsowałeś, należy dodać metodę \”addItem\”, która pozwoli na dodanie prostego ciągu lub etykiety i powiązanych danych. Dla potrzeb tego konkretnego
projektu, dodasz etykietę, do której będziesz mógł się odwoływać, kiedy zechcesz odtworzyć piosenkę.
{/tlo}
{tlo_1}
Krok 7. Zdefiniuj akcje listy odtwarzania
Aby zdefiniować akcje dla listy odtwarzania,
powinieneś stworzyć obiekt powiadamiany o wystąpieniu zdarzenia. Nazwij go \”listListener\” i dodaj do \”playList\” za pomocą metody \”addEventListener\”, ustanawiając go na nasłuchiwanie zdarzenia o nazwie \”change\”.
{/tlo}
{tlo_0}
Krok 8. Dołącz akcje listy odtwarzania
Nasz nowy obiekt stale wypatruje zdarzenia \”change\” na liście odtwarzania,
zatem gdy użytkownik wybierze pozycję na liście, zdarzenie ma wreszcie miejsce. Obiekt zdarzenia służy tutaj za parametr, który może posłużyć do uzyskania dostępu do danych zawartych w każdym elemencie listy.
{/tlo}
{tlo_1}
Krok 1. Wybierz piosenkę
Zaznaczone zdarzenie zawiera kod pobierający etykietę, którą nadaliśmy wcześniej dla każdego pliku z listy. Ta etykieta może teraz zostać przekazana
metodzie, którą stworzymy, aby odtworzyć piosenkę. W celu wskazania wybranej nazwy pliku, wybierz obiekt zdarzenia, który trafił do zdarzenia \”change\” i wskaż jego etykietę \”selectedItem\”.
{/tlo}
{tlo_0}
Krok 2. Rozpoczęcie odtwarzania utworu
Metoda, którą stworzymy do odtworzenia piosenki, nazywa się \”playSong\”.
Pobiera ona parametr nazwy pliku, który pochodzi od zdarzenia \”change\”. Sprawdź najpierw, jakie są ustawienia dla \”currentSound\” i czy jest to ten sam plik, który przekazujesz jako parametr.
{/tlo}
{tlo_1}
Krok 3. Zatrzymanie utworu
Zatrzymanie odtwarzania utworu jest proste, ponieważ nasz odtwarzacz
MP3 nie musi nawet wiedzieć, która piosenka jest aktywna, aby wykonać tę komendę. Wystarczy, że użyjesz metody \”stopAllSounds\” w celu anulowania aktualnego procesu odtwarzania. Gdy użytkownik wskaże następny
utwór, odtwarzanie rozpocznie się na nowo.
{/tlo}
{tlo_0}
Krok 4. Przełączanie piosenek
Aby przełączyć się z odtwarzania jednej piosenki na drugą, potrzebne będzie
stworzenie nowego obiektu \”Sound\” za każdym razem, gdy zostanie wybrana nowa pozycja z listy. Kiedy to nastąpi, odpal metodę \”playSong\” i sprawdź, czy wybrany plik jest aktualnie odtwarzany. Jeżeli nie, stwórz nowy obiekt \”Sound\”. Nadpisze on aktualny obiekt i rozpocznie nowy utwór.
{/tlo}
{tlo_1}
Krok 5. Dodaj kontrolę głośności
Ta istotna funkcja może wydawać się trudna do implementacji, ale się nie poddawaj. Pokażemy ci w miarę prosty sposób na dodanie tej opcji, tak abyś mógł wykorzystać tę technikę również w przypadku przyszłych projektów. Zwróć uwagę na suwak, który powinien znaleźć się u góry odtwarzacza.
{/tlo}
{tlo_0}
Krok 6. Przygotuj suwak
Na samym początku powinieneś zaprojektować
suwak służący do regulowania poziomu głośności. Stwórz zwykły prostokątny przycisk z centralnym położeniem \”registration point\” i nazwij go \”slider\”. Użytkownik będzie mógł go chwycić i przesuwać, ale wpierw trzeba przygotować linię, po której ma on się poruszać.
{/tlo}{tlo_1}
Krok 7. Stwórz pasek suwaka
Będzie to linia, która posłuży za prowadnicę suwaka. Powinien to być movie clip o następującej charakterystyce: szerokość 100 pikseli, z registration
point usytuowanym po lewej stronie w poziomie i centralnie w pionie. Są to niezbędne właściwości, ponieważ suwak wykorzysta je do wyznaczenia, jak daleko może zostać przesunięty.
{/tlo}
{tlo_0}
Krok 8. Połącz suwak i pasek suwaka
Gdy stworzysz już suwak i pasek suwaka, powinieneś połączyć oba te elementy w jeden movie clip, który nazwiemy \”volume\”. Powinien on zawierać \”registration point\” po lewej stronie w poziomie i centralnie w pionie (tak jak pasek suwaka).
{/tlo}
{tlo_1}
Krok 9. Ogranicz ruch suwaka głośności
Dodaj ograniczenia do metody \”startDrag\”, jak następuje: \”left\” jako właściwość \”_x\”, \”top\” jako \”_y\”, \”right\” jako \”_x\” oraz \”width\” i \”bottom\” jako \”_y\”. Kiedy użytkownik chwyci za suwak, będzie on poruszał się jedynie od lewej do prawej, pomiędzy dwoma końcami paska.
{/tlo}
{tlo_0}
Krok 10. Ustaw głośność
Podczas czynności przeciągania, cały czas działa metoda \”onEnterFrame\”
ustawiająca poziom dźwięku na poziomie _x wartości suwaka głośności. Mieści się ona w przedziale od 0 do 100 (przypomnij sobie 100 pikseli szerokości paska, które ustawiłeś w punkcie 7). Gdy suwak zostanie puszczony, \”onEnterFrame\” zostaje ustawione na zero w celu jego zatrzymania, a wywoływana jest metoda \”stopDrag\”.
{/tlo}
Czas się zatrzymać
{tlo_1}
Krok 1. Stwórz przycisk
To najłatwiejsza część zadania. Stwórz przycisk
służący do włączania pauzy i nadaj mu nazwę \”pauseButton\”. Dwa paski symbolizujące pauzę to uniwersalny znak rozpoznawczy tej opcji. Umieść nowy element obok przycisku odtwarzania.
{/tlo}
{tlo_0}
Krok 2. Zatrzymanie odtwarzania pliku
Aktywacja pauzy w momencie naciśnięcia przycisku to jedynie kwestia zatrzymania
odtwarzanego aktualnie pliku przy użyciu komendy \”currentSound.stop\”. Jednak kontynuacja odtwarzania od tego samego miejsca wymaga już pewnej technicznej wiedzy.
{/tlo}
{tlo_1}
Krok 3. Ponowne odtwarzanie
Funkcja \”playSound\” rozpoczyna aktualną piosenkę (currentSound), ustanawiając aktywny fragment jako punkt startowy. Aby to osiągnąć, podziel parametr \”position\” przez 1000, konwertując go na sekundy. Sprawi to, że odtwarzanie
rozpocznie się od właściwego momentu.
{/tlo}
