Flash mp3 button

[ crniluk @ 20.07.2011. 11:39 ] @

Vec neko vreme trazim i nikako da nadjem neki free flash button za web site koji ce da ucitava externi mp3 fajl i da pusta muziku za sajt.
Evo linka koji sam pronasa i tako nesto mi i treba: link

Samo sto je ovde problem sto se muzika ucitava odmah po otvaranju strane. A hteo bih da se muzika pokrene kada se klikne na taj button a ne odmah po ucitavanju stranice.

Da li neko mozda zna gde mogu da pronadjem nesto slicno ovome, ali da ne bude player sa f-jama, nego cisto neki button kao ovde.?

[ MenOfHonor @ 20.07.2011. 13:58 ] @

Kada želiš da radiš sa audio fajlovima koristićeš Sound i SoundChannel klase koje su ti potrebne u ovom primeru. Pored ovih postoji još nekoliko koje ti za sada neće trebati. Prvo navodiš naziv fajla koji će se učitati, zatim kreiraš Sound objekat. Dodaješ mu osluškivače događaja kako bi obezbedio da je pesmu moguće pustiti tek kada se ona uspešno učita. U suprotnom prikazaće se poruka o grešci. Kada se pesma učita dodaješ osluškivač dogadjaja tasteru čijim pritiskom želiš da se započne reprodukcija pesme. U kraćoj verziji kod izgleda ovako:

Code:
import flash.net.URLRequest;
import flash.media.Sound;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;

var urlZahtev:URLRequest = new URLRequest("pesma.mp3");
var pesma:Sound = new Sound();

pesma.addEventListener(Event.COMPLETE, ucitanaPesma);
pesma.addEventListener(IOErrorEvent.IO_ERROR, greska);

function ucitanaPesma(event:Event):void
{
    play_btn.addEventListener(MouseEvent.CLICK, pritisnutPlay);
}

pesma.load(urlZahtev);

function pritisnutPlay(event:MouseEvent):void
{
    pesma.play();
    play_btn.removeEventListener(MouseEvent.CLICK, pritisnutPlay);
}

function greska(event:IOErrorEvent):void
{
    trace("Dogodila se greska. Pesma nije pronadjena.");
}

Na stage-u se nalazi taster sa nazivom instance "play_btn" i kada se pritisne pušta se pesma sa nazivom "pesma.mp3". U ovoj verziji ne postoji taster koji zaustavlja reprodukciju već se pesma sama zaustavlja jednom kada stigne do kraja. Da bi omogućio potpuno zaustavljanje pesme u bilo kom trenutku možeš koristiti dužu verziju koda:

Code:
import flash.net.URLRequest;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;

var urlZahtev:URLRequest = new URLRequest("pesma.mp3");
var pesma:Sound = new Sound();
var kanal:SoundChannel = new SoundChannel();
pesma.addEventListener(Event.COMPLETE, ucitanaPesma);
pesma.addEventListener(IOErrorEvent.IO_ERROR, greska);
stop_btn.visible = false;
var pozicija:Number = 0;

function ucitanaPesma(event:Event):void
{
    play_btn.addEventListener(MouseEvent.CLICK, pritisnutPlay);
}

pesma.load(urlZahtev);

function pritisnutPlay(event:MouseEvent):void
{
    kanal = pesma.play(pozicija);
    play_btn.visible = false;
    stop_btn.visible = true;
    stop_btn.addEventListener(MouseEvent.CLICK, pritisnutStop);
    addEventListener(Event.ENTER_FRAME, pozicijaPesme);
    play_btn.removeEventListener(MouseEvent.CLICK, pritisnutPlay);
}

function pritisnutStop(event:MouseEvent):void
{
    kanal.stop();
    stop_btn.visible = false;
    play_btn.visible = true;
    play_btn.addEventListener(MouseEvent.CLICK, pritisnutPlay);
    stop_btn.removeEventListener(MouseEvent.CLICK, pritisnutStop);
    removeEventListener(Event.ENTER_FRAME, pozicijaPesme);
}

function greska(event:IOErrorEvent):void
{
    trace("Dogodila se greska. Pesma nije pronadjena.");
}

function pozicijaPesme(event:Event):void
{
    pozicija = kanal.position;
}

Ovde se koristi i SoundChannel klasa koja nam omogućava veću kontrolu nad zvukom. Pored toga dodat je još jedan taster "stop_btn" čijim se pritiskom zaustavlja reprodukcija. On se nalazi na istom mestu kao i "play_btn" taster ali je nevidljiv. Kada se pritisne "play_btn" on se sakriva tako da "stop_btn" postaje vidljiv i samim tim je omogućena i njegova funkcionalnost. Kada se pritisne on postaje nevidljiv i opet postaje aktivan "play_btn" taster. U ovom primeru kada bi se ovaj taster pritisnuo pesma bi nastavila reprodukciju od pozicije gde je bila zaustavljena. To postižeš korišćenjem position svojstva SoundChannel klase. Svakim ulaskom na frejm povećava se broj koji prestavlja poziciju pesme, a kada se reprodukcija zaustavi u promenljivoj "pozicija" nalaziće se broj koji predstavlja poziciju pesme, koji će se koristiti za nastavak reprodukcije.

[ crniluk @ 21.07.2011. 11:27 ] @

Svaka cast za odogovor, ti izgleda ne umes da odgovoris u jednoj recenici :).
Svaki odgovor je detaljan i potpun sto je za pohvalu.
Hvala, mada sam ja mislio na nesto slicno kao u linku koji sam poslao, da ne pravim u flashu ako postoji.
Mada ako ne nadjem nesto slicno uradicu ovako.
Da li je mozda moguce editovati swf sa onog sajta, mislim samo da se doda deo kod koji pesmu ne pokrece prilikom ucitavanja? Ja sam pokusavao, moze da se dekompajlira bez problema ali nisam uspeo da dodam kod koji bi to radio.

[ MenOfHonor @ 21.07.2011. 13:58 ] @

Nemoguće je odgovoriti u jednoj rečenici.

Ti ustvari hoćeš da kada se klikne na sličicu ekvilajzera (ili nekog od preostala 3 simbola sa sajta koji si naveo) da započne reprodukcija instrumentala. Bez problema sam dekompajlirao oba priložena swf-a sa programom "Flash Decompiler Trillix". U "low-down.swf" fajlu nalazi se pomenuti instrumental koji je postavljen na prvi frejm i s obzirom da nije naveden metod stop() počinje odmah sa reprodukcijom. Prvo pomeri prvi frejm na drugi, a onda da bi zaustavio reprodukciju na samom startu moraš da dodaš stop() metod na prvi frejm. Sledeće je da u "melodyloops-equa-swf-player.swf" fajlu možeš da dodaš taster, ali onda moraš prethodno da povećaš dimenzije dokumenta. Možeš i da pretvoriš ekvilajzer u taster ako želiš da kada se na njega klikne da započne reprodukcija. Pošto je naziv fajla naveden u HTML-u kao vrednost flashvars parametra, a u swf se učitava kao promenljiva "filename", morao bi da kod kojim se kreira MovieClip da staviš u jednu funkciju koju ćeš pozivati kada se klikne na taster. Mislim da imaš boljih rešenja od onog koji se nalazi na navedenom sajtu, a još je rađen u prvoj verziji ActionScript-a tako da je poprilično zastareo.

[ crniluk @ 21.07.2011. 14:29 ] @

Salio sam se za jednu recenicu, naravno sve je u pozitivnom smislu.
Evo dekompajlirao sam i ja. Otvorio u flashu i privi frejm (layer script 0) prebaciou u drugi frejm. Prvi obrisao i dodao stop(); ali nece, muzika ne svira a ovo se vrti i ne moze da se zaustavi.

Ako postoji neko bolje resenje da li mozda znas gde mogu da ga pronadjem, jer nisam uspeo a trazim nekoliko dana,?

[ MenOfHonor @ 21.07.2011. 15:11 ] @

Naravno.

Iz priloga možeš preuzeti izmenjeni "low-down.fla" pa ćeš videti kako može da se uradi, baš kao što sam objašnjavao u prethodnom odgovoru. Dodao sam "play/pause" tastere tako da možeš direktno iz swf-a kontrolisati reprodukciju zvuka.

[ crniluk @ 21.07.2011. 15:25 ] @

Ne mogu da otvorim, imam CS3 unexpected file format prijavljuje

[ MenOfHonor @ 21.07.2011. 15:39 ] @

Onda je vreme da pređeš na noviju verziju.

Snimio sam ga da bude kompatibilan za CS4. S obzirom da koristim Flash CS5 nije moguće sačuvati kompatibilnost za CS3.

[ crniluk @ 21.07.2011. 15:47 ] @

Ok, prelazim onda. :)

[ crniluk @ 21.07.2011. 16:20 ] @

Imao sam portable cs5 i otvorio bez problema. Video o cemu se radi. Ovde je integrisan zvuk u swf, ja sam mislio da bude externi fajl mp3, kao u prethodnom primeru.
Jel mozes da editujes onaj swf tj da napravis da izgleda sve onako samo da ima opciju da se ne startuje na pocetku?
Neprijatno mi je sto sam te ovako pitao ali sta da radim :)

[ Br@nkoR @ 21.07.2011. 16:34 ] @

Citat:

crniluk: Vec neko vreme trazim i nikako da nadjem neki free flash button za web site koji ce da ucitava externi mp3 fajl i da pusta muziku za sajt.
Evo linka koji sam pronasa i tako nesto mi i treba: link

Samo sto je ovde problem sto se muzika ucitava odmah po otvaranju strane. A hteo bih da se muzika pokrene kada se klikne na taj button a ne odmah po ucitavanju stranice.

Da li neko mozda zna gde mogu da pronadjem nesto slicno ovome, ali da ne bude player sa f-jama, nego cisto neki button kao ovde.?

Možda pomogne.
Na ovom linku.
Klikom na button/sliku, tačnije na link:

Code (html):

<a href="javascript:toggleLayer('player')"><img src="/i/butt-clicktosee.gif" width="180" height="35" border="0"></a>

Poziva je se JavaScript funkcija:

Code (javascript):

function toggleLayer( whichLayer )

{

  var elem, vis;

  if( document.getElementById ) // this is the way the standards work

    elem = document.getElementById( whichLayer );

  else if( document.all ) // this is the way old msie versions work

      elem = document.all[whichLayer];

  else if( document.layers ) // this is the way nn4 works

    elem = document.layers[whichLayer];

  vis = elem.style;

  // if the style.display value is blank we try to figure it out here

  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)

    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';

  vis.display = (vis.display==''||vis.display=='block')?'none':'block';

}

Kojoj se kao agrument prosleđuje string koji predstavlja vrednost id atributa html elementa kojeg gore navedena JavaScript funkcija treba da prikaže/sakrije, odnosno promeni vrednost CSS display osobine (block/none), u ovom slučaju:

Code (html):

<div class="preview" style=" padding-top:5px; display:none" id="player">

<div style="float:left; width:50px;">

<embed src="/fla/melodyloops-equa-swf-player.swf" width="25" height="16" allowscriptaccess="always" allowfullscreen="false" flashvars="filename=/fla/low-down.swf&amp;volume=30&amp;backcolor=ffffff">

</div>

<div style="float:left; width:170px; font-size:11px; line-height:16px">Click on player to stop or continue  music play</div>

<div style="clear:both"></div>

</div>

A u kojem se nalazi html kod koji pokreće ovaj *.swf fajl odnosno player.

[ MenOfHonor @ 24.07.2011. 12:31 ] @

To može i jednostavnije da se odradi korišćenjem swf-a koji će služiti kao preloader za swf koji služi za reprodukciju i kontrolu eksternog audio fajla, kao i za prikazivanje ekvilajzera. Jedini problem koji se kod ovakvog pristupa javlja jeste što učitani swf ne može direktno komunicirati sa promenljivama koje se nalaze na HTML strani, već je to moguće samo sa glavnim swf-om. S obzirom da je tako jedino nam preostaje mogućnost učitavanja promenljivih u taj glavni swf koje ćemo smestiti u globalne promenljive koje ćemo zatim da prosledimo učitanom swf-u. Znači, u "glavni.fla" dodao sam taster "play_btn" na kome se nalazi sledeći kod:

Code:
on (release) {
loadMovie("melodyloops-equa-mp3-player.swf", this);
}

Na prvom frejmu nalaze se globalne promenljive koje se iščitavaju iz flashvars-a:

Code:
_global.filename = filename;
_global.timeplay = timeplay;
_global.volume = volume;
_global.backcolor = backcolor;
_global.maincolor = maincolor;

Pritiskom na taster "play_btn" učitava se swf koji zatim učitava "low-down.mp3" audio fajl čiji se naziv nalazi na HTML strani, a koji je smešten u globalnu promenljivu "filename" kako bi mogli da mu pristupimo iz glavnog swf-a. Na ovaj način nismo menjali kod koji se nalazi u originalnom "melodyloops-equa-mp3-player.swf", tako da ga nije potrebno dekompajlirati. Pored ovoga moguće je menjati pesme jednostavnom izmenom HTML fajla, gde ćemo modifikovati "flashvars" parametar i vrednost promenljive "filename" zameniti odgovarajućim nazivom audio fajla. Potreban fajl preuzmi iz priloga i eksportuj ga u folder gde ti se nalaze i ostali fajlovi (example.html, low-down.mp3 i melodyloops-equa-mp3-player.swf), a zatim u "example.html" fajlu promeni naziv swf fajla za "src" atribut:

Code:
src="glavni.swf"

DODATAK
Samo da dodam da je moguće ovo odraditi i bez definisanja globalnih promenljivih već dodavanjem querystring-a na URL:

Code:
on (release) {
loadMovie("melodyloops-equa-mp3-player.swf?filename="+_root.filename+"&timeplay="+_root.timeplay+"&volume="+_root.volume+"&backcolor="+_root.backcolor+"&maincolor="+_root.maincolor, this);
}

_{[Ovu poruku je menjao MenOfHonor dana 24.07.2011. u 14:21 GMT+1]}

[ crniluk @ 25.07.2011. 22:56 ] @

Tek sam sad video poruku. Hvala i za ovo. Evo ovde sam pronasao dobro resnje (tako da sam sa ovim najbolje resio stvar) pa mozda nekome zatreba.

Link