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.

  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



  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ó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.



  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.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
    
  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.



Pobierz program Flash Designer

Chcesz skomentować ten tutorial?

Jeśli chcesz skomentować krótko ten artykuł, możesz napisać komentarz poniżej (długość do 255 znaków): *


Twój email: (tylko jeśli oczekujesz odpowiedzi)


W pole poniżej wpisz wynik działania matematycznego, cyfrę: 4+2+2 (podpowiedź: osiem).
Jest to zabezpieczenie przed spamem.

* pole wymagane

| Strona główna | Zamówienie | Pobierz | O programie | Wsparcie | Przykłady |
Copyright © 1999-2017 Selteco Flash Software. All rights reserved.