Mamy zbiór plików mp3. I chcielibyśmy zrobić prosty, lecz jednocześnie własny odtwarzacz do muzyki. Następnie dodać logo swojej firmy do takiego gadżetu reklamowego.

W tym tekście podpowiemy, jak przygotować prosty odtwarzacz plików mp3 za pomocą programu Macromedia Flash MX 2004.

Przygotowanie grafiki

Pracę rozpoczynamy od przygotowania grafiki, która posłuży do budowy odtwarzacza. Mam tu na myśli opracowanie wyglądu odtwarzacza wraz z wszystkimi niezbędnymi przyciskami funkcyjnymi.

W tym miejscu należy pamiętać o zasadzie: im bardziej zaawansowany projekt, czyli im więcej elementów sterujących - przycisków - tym więcej funkcji powinien zawierać nasz odtwarzacz.

1, 2, 3, 4

W początkowym projekcie dodanie wielu klasycznych funkcji odtwarzacza płyt CD do projektu może okazać się niezwykle skomplikowane. Czasami nawet niemożliwe do wykonania za pomocą standardowych funkcji programu Macromedia Flash.

W naszym przykładzie wygląd playera oparłem na klasycznym wyglądzie samochodowego odtwarzacza płyt kompaktowych 1.. Dodałem tu kilka typowych przycisków sterujących, ograniczając ich liczbę do niezbędnego (i możliwego do szybkiego utworzenia w Macromedia Flash) minimum 2..

5

W moim projekcie dokonałem następujących założeń dotyczących użytkownika naszego projektu:
1. Użytkownik ma do wyboru dziewięć utworów muzycznych zapisanych w zewnętrznych plikach mp3. Ich liczba w tym momencie jest stała. W tej sytuacji opracowałem także dziewięć przycisków sterujących, umożliwiających szybkie wybranie właściwego utworu do odtwarzania.
2. Użytkownik, podobnie jak w standardowym odtwarzaczu CD będzie miał do dyspozycji standardowe przyciski sterowania: start, stop, i pauza. Ich funkcjonalność ma odpowiadać typowym zastosowaniom dostępnym w odtwarzaczu płyt CD.
3. Użytkownik będzie miał możliwość przejścia do kolejnego/poprzedniego utworu z całej dostępnej puli plików mp3. Także w tym przypadku przygotowałem kolejne dwa przyciski: dalej i cofnij, które na ekranie odtwarzacza umożliwią dodanie takich właśnie funkcji.

Oraz dodatkowo:

6

4. W każdej chwili możliwa będzie płynna regulacja głośności odtwarzania muzyki. Zamiast typowego suwaka lub gałki, zastosowałem znane z samochodowych odtwarzaczy przyciski sterujące. Kolejne kliknięcie w przycisk, stopniowo podnosi poziom głośności lub ścisza odtwarzanie muzyki.
5. Wyłącznik odtwarzacza mp3 (kolejny przycisk) będzie działał jedynie w wersji samodzielnej aplikacji multimedialnej. Na stronie internetowej (w oknie przeglądarki internetowej) wyłącznik odtwarzacza stanowi jedynie jego atrapę.
6. Panel sterujący będzie zawierał dodatkowo szereg informacji widocznych na wyświetlaczu odtwarzacza. Podobnie jak w samochodowym odtwarzaczu CD, w oknie wyświetlacza znajdą się następujące informacje 3.:

- tytuł utworu
- wykonawca
- tytuł albumu, z jakiego pochodzi dany utwór
- rok wydania płyty CD
- całkowity czas utworu
- bieżący czas odtwarzania utworu
- bieżący poziom głośności.

7

Aby nie spędzić bardzo wiele czasu na przygotowaniu grafiki, zdecydowałem się na pewne uproszczenie.

Zamiast przygotować kolejne przyciski sterujące za pomocą Macromedia Flash, wprowadziłem etykiety tekstowe bezpośrednio w programie graficznym Adobe Photoshop (oczywiście można w tym miejscu wykorzystać każdy inny program graficzny ze szczególnym wskazaniem na kompatybilny z Flash- Macromedia Fireworks).

W ten sposób do Macromedia Flash zostanie zaimportowany w zasadzie kompletny ekran odtwarzacza. Gotowy projekt graficzny zapisałem w postaci pliku PNG. W ten sposób nie utraciłem jego jakości podczas zapisu, mając jednak możliwość dokonania kompresji za pomocą Macromedia Flash.

Aby uzyskać efekt działających przycisków, które reagują na najechanie myszki, przygotowałem jeden(!), uniwersalny przycisk i ułożyłem go ponad każdym elementem sterującym odtwarzacza 4..

Przygotowanie przycisków

Jak wspomniałem wcześniej do budowy odtwarzacza użyłem jednego uniwersalnego przycisku.

Jego działanie jest następujące 5.:
- standardowo, domyślnie (w klatce Up) - jest on niewidoczny. W tej klatce nie umieściłem żadnej grafiki.
- po najechaniu myszką w obszar przycisku (w klatce Over), pojawia się delikatne, lekko niebieskie podświetlenie. Zrealizowałem je za pomocą umieszczenia prostego symbolu graficznego - prostokąta, w kolorze błękitnym. Jego osłabienie zrealizowane jest za pomocą efektu Alpha - 30 proc. 6.
- po wciśnięciu myszki w obszarze przycisku (w klatce Down), ponownie nie umieściłem żadnej grafiki, w ten sposób uzyskałem efekt jakby przełącznika, co w tej sytuacji doskonale mi odpowiada
- bardzo istotną rolę w budowie tego przycisku pełni klatka Hit. W tym miejscu określiłem obszar aktywny przycisku i zakres jego reagowania na ruchy myszką.

W klatce tej zduplikowałem grafikę umieszczoną w drugiej (Over) klatce przycisku.

Przygotowanie całości projektu, struktura katalogu

8

Aby możliwe było wykorzystanie zewnętrznych plików mp3, jest konieczne utworzenie odpowiedniej struktury katalogów.

W naszym przykładzie wszystkie niezbędne utwory muzyczne, a także roboczy dokument Macromedia Flash zapisałem w jednym katalogu - mp3Player. Ważne jest, aby zamieścić w nim także wszystkie pliki mp3, które chcemy wykorzystać w naszym projekcie 7..

Budowa odtwarzacza - rozmieszczenie i nazwy elementów składowych

Po zaimportowaniu grafiki odtwarzacza rozmieszczamy na nim, kolejne kopie przygotowanego wcześniej przycisku.

W razie konieczności dostosowujemy jego rozmiar do wyglądu elementów sterujących odtwarzacza.

W tym miejscu pojawia się kolejny ważny krok.

Każdy przycisk musi mieć unikalną nazwę (tzw. Instance name) wprowadzoną w polu instance name, dostępne po zaznaczeniu przycisku w oknie Properties.

Ogólnie dobrą zasadą jest nadawanie nazw funkcjonalnych, które jednoznacznie opisują działanie przycisku. W naszym projekcie zastosowałem następujące nazwy przycisków:

Przyciski numeryczne: jeden_btn, dwa_btn, trzy_btn itd., aż do dziewiec_btn 8..

Co ważne, przyciski te nie powinny zawierać polskich znaków! Dodatkowa końcówka - btn ułatwia późniejsze wprowadzanie skryptów i jednocześnie jednoznacznie definiuje typ (tekst, button, Movie Clip itp.) właściwego obiektu.

Przyciski sterowania głośnością: up_btn i down_btn

Przyciski nawigacyjne: play_btn, stop_btn, pause_btn, dalej_btn, cofnij_btn 9..

Przycisk zamykania: koniec_btn