MP3 player (jednostavni)

Vazan dio svake multimedije je i zvuk. U ovom tutorijalu napraviti cemo jednostavam Flash Mp3 player koji ce svirati samo jednu pjesmu koju ce dinamicki ucitati “izvana”. Imati ce sve osnovne osobine Mp3 playera - play, pauza, stop, vrijeme, podesavanje jacine zvuka.









Download Ovdje mozete skinuti source

Zelio bih napomenuti da citajuci tutorijal gledate u source koji sam vam dao na download. Krenuti cemo sa dizajniranjem samog playera.
Prvo sto cu napraviti na jednom layeru jest grafika playera (bez dugmica). U mom slucaju to izgleda ovako:Mp3 player grafika

Slijedi dizajniranje dugmica - play, pauza, stop. Svaki od ovih dugmica ce imati 3 frejma (primjer na slici za play dugmic)

Mp3 player

  1. frame - normalni prikaz dugmica
  2. frame - rollOver
  3. frame - selektiran

Mp3 player

Na layeru actions je samo akcija stop(); Na layeru simbol se nalazi simbol tog dugmica (npr. za pauzu II). Na layeru bkg se nalazi grafika dugmica, tj. u svakom frameu toga layera je druga boja pozadine.
Svaki od tri dugmica (play, pauza, stop) su isti, osim naravno simbola tog dugmica.
Bitno je da dobro postavite Instance name od svakog tog dugmica i to za:

  • dugmic play - instance name je d_play
  • dugmic pauza - instance name je d_pauza
  • dugmic stop - instance name je d_stop

Slijedi izrada volume slidera. Nacrtajte grafiku u obliku trokuta (vidi sliku). Neka sirina bude 100px.
Mp3 player
Selektirajte nacrtano i pretvorite u Movie clip (tipka F8). Postavite Registration na donji lijevi kut. OK. Postavite u properties prozoru Instance name - vol_slider. Zatim dvoklik na novo nastali MC. Napravite novi layer (Layer 2). Na njemu nacrtajte mali kvadrat koji ce nam sluziti kao slider. Selektirajte ga i pretvorite u MC (tipka F8). Postavite Instance name - drag. Izidite na glavnu scenu. Slijedi nam jos samo dodavanje dinamickog tekst boxa u koji cemo ispisivati statusne poruke. Postavite dinamicki tekst gdje zelite - u mom slucaju to je lijevo od tipke Play. Instance name tog dinamickog teksta neka bude display_status.

S ovim smo zavrsili sa dizajniranjem naseg Mp3 playera. Slijedi onaj tezi dio, a to je ActionScript. Sav ActionScript cu staviti na 3 layera, da bi se lakse snalazili.
Vidi sliku:

Mp3 player


Akcije za layer actions >sound
Stvaramo novi sound object muzika u koji cemo poslije ucitati mp3. Takoder postavljamo glasnocu na 100.

  • muzika = new Sound();
    muzika.setVolume(100);

Postavljamo pocetne uvjete - ispisujemo Ucitavam muziku i onemogucavamo klikanje po dugmicima

  • display_status.text=”Učitavam muziku”;
    d_play.enabled=d_pauza.enabled=d_stop.enabled=false;

Slijedi funkcija koja ce se izvrsiti kada se mp3 ucita. Izracunati cu trajanje pjesme u sekundama i spremiti u varijablu duration. Takoder cu omoguciti klikanje po dugmicima play, pauza, stop. setInterval naredba ce pozivati funkciju funk_status svakih 100 milisekundi koja ispisuje trenutno vrijeme / ukupno vrijeme trajanja pjesme.

  • muzika.onLoad = function(){
    duration= Math.floor(this.duration/1000);
    d_play.enabled=d_pauza.enabled=d_stop.enabled=true;
    setInterval(funk_status,100);
    }

Sljedecom naredbom pokrecem ucitavanje mp3 pjesme u objekt muzika

  • muzika.loadSound(”http://www.as-flash.com/swf/muzika.mp3″,false);

Ovo je ona funkcija koju naredba setInterval poziva. Ispisuje u display_status trenutno/ukupno vrijeme pjesme

  • function funk_status() {
    trenutna_pozicija=Math.floor(muzika.position/1000);
    display_status.text=Math.floor(trenutna_pozicija/60) + “:” + Math.floor(trenutna_pozicija%60)+ ” / “+Math.floor(duration/60) + “:” + duration%60;
    }




Nastavak na sljedecoj stranici…

Pages: 1 2

One Response to “MP3 player (jednostavni)”

  1. […] ja ubacio zbog boljeg objasnjenja klase ColorMatrixFilter. Objasnjenje slidera imate u tutorijalu MP3 player (1). Svakom od ova 4 slidera cu dodijeliti instance name: crveni_s, zeleni_s, plavi_s, alfa_s. […]

Komentari

Verification Image

Unesite slova sa slike.