Помогни ни да направим Uroci.net по - богат! Добави урок

Flash Mp3 Player

accorp   трудност:    видян: 21109


Вече, реално имаме списък (Array) с песните от xml-a, време е да направим някои и друг бутон за управление. Най-простичкия от тях ще е бутона за спиране за звука. Изберете слоя buttons, направете си една проста форма, нарисувайте си бутон с някоя програма или просто използвайте текст с шрифта Webdings< се прави квадратче). Маркирайте го и го модифицирайте в Movie Clip - Modify --> Convert to Symbol или с клавиш F8. След това му сложете Instance Name – stop_mc, за да знаете какво е и за да не съвпада със запазената дума stop. Върнете се на слоя actions и запишете следния код в Action Panel:
stop_mc.onRelease = function(){
my_snd.stop();
}

Адресираме stop_mc (нашия бутон за спиране) и щом се натисне и отпусне бутона звука my_snd ще спре. Ако няма звук няма да стане нищо. И това е бутона за спиране.

Сега ще напишем една функция за пускане на песента за по-лесно (по-нататък ще видите защо):
function playTrack(){
my_snd.loadSound(songArray[current_track], true);
}

Какво направихме – зареждаме в my_snd променливата звук. Избираме списъка ни с индекс current_track (т.е. songArray[current_track]), което означава, че ако е натиснат за пръв път бутона ще избере първия елемент от писъка, не забравяйте, че декларирахме current_track със стойност 0. Също така, избрахме и песента да се стриймва (true).
За да не стават размесвания, бутона за пускна на песента при повторно натискане докато се възпроизвежда песен ще пусне песента от начало, тъй като current_track не се променя, за сега. Сега да направим и бутона – изберете пак слоя buttons. Ако имате бутон просто го сложете на сцената, ако работите с текст с шрифт Webdings – натиснете 4. Направете го Movie Clip и сложете Instance Name – play_mc, за да не съвпада със запазена дума. Сега се върнете на слоя actions и запишете:
play_mc.onRelease = function(){
playTrack();
}

При натискане и отпускане на Movie Clip-a ще извика функцията, която написахме за възпроизвеждане на песента – playTrack();.

Нека да направим и бутон за следваща песен. На слоя buttons си сложете бутона (Webdings: 8), модифицирайте го в Movie Clip и му сложете Instance Name – next_mc. Върнете се на слоя actions и ще направим фунцията за следваща песен и си спомете, че зададохме, че когато песента свъши ще се извика тази фунция nextTrack:
function nextTrack(){
current_track ++;
playTrack();
}

На първия ред от блока прибавихме единица (1) към променливата за текуща песен, така че връщайки се при playTrack (втория ред), текущата песен няма да е същата. По този начин при всяко натискане на бутона ще прибавяме по единица към текущата песен.
Тук възниква проблема – какво става когато свърши последната песен... или по-важното - коя е последната песен. Все още сме на слоя actions, най-добре ще е да „пресичаме това в зародиш”, т.е. ще тръгнем от основната фунция playTrack. В общи линии – трябва да сравним текущата песен с дължината на списъка и от там да направим текущата песен равна на 0, в случай че е последна. Нека се върнем и да пренапишем playTrack:
function playTrack(){
if(current_track == songArray.length){
current_track = 0;
my_snd.loadSound(songArray[current_track], true);
}
else{
my_snd.loadSound(songArray[current_track], true);
}
}

Виждате условието в ifcurrent_track == songArray.length, което означава, че ще е вярно когато текущата песен е последна + 1. Защо „+1”? Защото length връща броя на елементите, но започва от 1, а всъщност първия елемент е 0. Аз сложих три песни в xml, което означава, че имаме дължина (length) 3 и елементи 0, 1 и 2. Ако сложим условие за последна песен (songArray.length-1), то тя няма да с изпълни защото условието ще е вярно и текущата песен ще се нулира. Така че, следваща песен след последната ще е 0, дефакто първия елемент от списъка. Ако с trace изведем текущата песен и дължината на списъка ще получаваме следните резултати:
songArray: 3
current_track:0, 1 или 2.
Така направихме един затворен цикъл (0, 1, 2, (3)0, 1, 2, (3)0...)


Какво направихме до тук – направихме 3 бутона, направихме и три действия към бутоните – спиране, пускане и следваща песен. Също така се справихме и с последната песен в слисъка.

Сега нека да направим и бутон за предишна песен от списъка. Направете бутона по вече описаната процедура (ако използвате Webdings - клавиш от клавиатурата 7). Направете го Movie Clip и сложете Instance Name – prev_mc.
Сега отидете на слоя actions и нека добавим код за бутона:
prev_mc.onRelease = function(){
prevTrack();
}

Когато Movie Clip-a prev_mc се натисне и отпусне ще се извика фунцията prevTrack. Нека напишем и фунцията:
function prevTrack(){
if(current_track == 0){
current_track = songArray.length-1;
playTrack();
}
else{
current_track --;
playTrack();
}
}

Първо вижте блока else – аналогично на фунцията за следваща песен с тази разлика, че вадим едница (1) от променливата за текуща песен current_track-- . Но нека да помислим логично, ако случайно се натисне бутона преди да е стартирана песен... или ако се натисне когато текущата песен е първата... тогава излиза, че трябва да се задейства песен -1, каквато очевидно не може да има. Погледнете и блока if, за условие сме посочили, че текущата песен е 0, т.е. или prev_mc е натиснат преди бутона play_mc или prev_mc е натискан няколко пъти и е достигнал първата песен (дефакто, елемент 0). Ако си спомняте цикъла, които направихме във фунцията playTrack(), ще се досетите, че последната+1 песен направихме първа. Логично е тук да направим същия цикъл, но този път ще трябва да адресираме директно последната песен, т.е. songArray.length-1. Ако направим грешката да присвоим songArray.length, както е по-логично и връщайки се в playTrack ще видите, че там в блока if ще е верен (true) и текущата песен ще се нулира. В крайна сметка получаваме цикъл (0, 2, 1, 0, 2…).

Време е да направим и един бутон за пауза. Интересното тук е, че във флаш има запазена дума pause, но подобна фунция няма. Затова ние трябва да си направим – ще направим една променлива, за която ще присвоим текущата позиция. Нека първо да направим бутона – ако имате готов нарисуван – чудесно, ако ползвате текст с шрифт Webdings – натиснете клавиша за точка и запетая ( ; ). Превърнете го в Movie Clip (F8) и му сложете Instance Name – pause_mc. Само че този път натиснете два пъти върху Movie Clip-a за да влезете в Edit Mode. Сложете още един фрейм. На двата фрейма сложете Action Script:
stop();


уроци - pause_mc_edit.jpg


Може да промените например цвета на бутона на втория фрейм, защото при натискане ще изпратим там анимацията, за да се вижда, че плеъра е поставен на пауза. Върнете се обратно на Сцената и да сложим малко код на слоя actions.
Тактиката е такава, че при натискане на паузата ще запазим позицията на песента в една променлива и анимцията в бутона пауза ще отиде на втори фрейм.
Първо, да декларираме променлива на която ще присвоим текущата позиция:
var current_position:Number;
Този път ще спестим малко код и директно ще направим функцията в събитието при натискане на pause_mc:
pause_mc.onRelease = function(){
if(this._currentframe == 1){
my_snd.stop();
current_position = my_snd.position;
this.gotoAndPlay("2");
}
else{
my_snd.start(current_position/1000);
this.gotoAndPlay("1");
}
}
Пътрвия ред е ясен – при натискане и отпускане на pause_mc да се извършат действията в блока. На втория ред виждате проверката с if за текущ фрейм. Особеното тук е, че this, всъщност е pause_mc, защото this се намира в блока и адресира старшия обект. Та, условието за този блок е текущия фрейм в pause_mc е фрейм 1, а в pause_mc направихме 2 фрейм, като на всеки от тях сложихме stop, т.е. без да е афектирано по някакъв начин текущия фрейм ще е 1. Така проверката за сега е със стойност true и се изпълнява блока. Виждате, че спираме звука, това една от задачите на паузата. Виждате, за променливата current_position присвояваме позицията на песента в момента на натискане на бутона. Следващото действие е, анимацията в този Movie Clippause_mc е да се придвижи на фрейм 2. По този начин, при посвторно натискане няма да отговаря на условието в if и ще премине към блока else. В този блок, стартираме пак песента. Спомнете си, че фунцията Sound.start(); имаше един основен параметър и това е от коя секунда да започне песента. Знаем къде е спряна песента от current_position, нека да я използваме. Но също така си споменте, че свойството position връща данни в милисекунди, а параметъра в start() е в секунди, следователно ще разделим на 1000. След като песента вече е стартирана от нужната позиция да не забравяме, че паузата е премахната и за да може при следващото натискане на pause_mc да отговаря на условието трябва да се върнем пак на фрейм 1.


Страници: «1 2 3 »

Коментари (18)

bubust на 31.01 2007 в 21:07ч.
Най-високи оценки за урока, труда и всичко останало!
accorp на 01.02 2007 в 00:08ч.
Неща, които съм пропуснал по невнимание, извинявам се.

Сега, по първото: 100% е стойността по подразбиране, така че трябва да я окажете предварително и на още едно място (вижте 2). При мен не стана де, но теория трябва :)
Второто: Помислих, че не си добавил clearInterval... обаче не е там проблема. Стойността на my_snd е една и съща и се натрупва, следователно във фунцията playTrack() добавете и следния ред:

my_snd = new Sound();

Така трябва да стане :)
пс. ако забележтие още нещо - свиркайте.
High Five на 01.02 2007 в 15:12ч.
С първото се оправих и сам.

Второто става както ти каза, но предизвиква друг проблем: не излиза информацията за песента.

Реших проблема като преместих

my_snd.onID3 = function() {
artistName = my_snd.id3.artist;
trackName = my_snd.id3.songname;
info_txt.text = artistName " - " trackName;
};

след

my_snd = new Sound();

във функцията playTrack()


Още един път браво за труда и благодаря за отговора :)
High Five на 01.02 2007 в 16:06ч.
При pause бутона имаме gotoAndPlay("1") и gotoAndPlay("2"). В кавички се сочи frame label. Във случая няма такъв, т.е. номерата трябва да са без кавички: gotoAndPlay(1) и gotoAndPlay(2).


Направих си сам бутон за произволна песен.
1. Направих бутона с 2 кадъра (ненатиснат- 1 и натиснат- 2);
2. Дадох му instance name "random_mc"
3. Добавих следния код към кадър 1 от слоя actions:

var randSong:Boolean = false;
random_mc.onRelease = function() {
if (random_mc._currentframe == 1) {
randSong = true;
random_mc.gotoAndStop(2);
} else {
randSong = false;
random_mc.gotoAndStop(1);
}
};

4. Промених функциите nextSong() i prevSong():

function nextTrack() {
if (randSong == true) {
my_var = current_track;
current_track = Math.floor(Math.random()*songArray.length);
if (my_var == current_track) {
current_track = Math.floor(Math.random()*songArray.length);
} else {
clearInterval(randInterval);
}
} else {
current_track ;
clearInterval(randInterval);
}
playTrack();
}

function prevTrack() {
if (randSong == true) {
my_var = current_track;
current_track = Math.floor(Math.random()*songArray.length);
if (my_var == current_track) {
current_track = Math.floor(Math.random()*songArray.length);
} else {
clearInterval(randInterval);
}
} else {
clearInterval(randInterval);
if (current_track == 0) {
current_track = songArray.length-1;
} else {
current_track--;
}
}
playTrack();
}
next_mc.onRelease = function() {
randInterval = setInterval(nextTrack, 10);
};
prev_mc.onRelease = function() {
randInterval = setInterval(prevTrack, 10);
};

Кода е толкова обстоен за да се избегнат случаи, в които се повтаря песента.

5. Промених
my_snd.onSoundComplete = function() {
nextTrack;
};
на

my_snd.onSoundComplete = function() {
randInterval = setInterval(nextTrack,10);
};


Random бутона е незаменим и никой player не трябва да бъде без такъв ;)
High Five на 01.02 2007 в 16:18ч.
http://www.pastey.net/5798

Съдържа и кода за Random бутона.
RooSee на 17.02 2007 в 11:44ч.
Написах целия код и разбрах повечето пояснения, но ви предлагам за напред да го давате и в завършения му вид. При мен нещо не работи. Стартирам клипа и не чувам никакъв звук, а когато избера бутона за връщане на трака ми изписва: Error opening URL "file:///C|/Documents and Settings/RooSee/My Documents/RoVoice/undefined" , което е странно, защото всичките ми файлове са в една директория.
accorp на 17.02 2007 в 12:36ч.
undefined? Проблема е или в XML файла или в зареждането му в плеъра. Прегледай тези две част от урока, а ако не е това - не съм пророк :)

А относно това да го дам целия - не. Какъв е смисъла от целия урок тогава. Аз дори не съм пускал цели кодове, иначе само ще си играем на copy->paste.
RooSee на 17.02 2007 в 13:45ч.
Прегледах обстойно частите. Всичко съм написал според примерите в дадения код, а XML-а го копирах, защото не съм наясно със синтаксиса му. Също видях, че не е пояснено изписването на ей' този ред:

my_snd.onSoundComplete = function() {
nextTrack;
}

вместо това пише:

Сега трябва да настроим и събитието onSoundComplete:
my_snd.SoundComplete = nextTrack;

в коментарите видях как го е направил high five и го поправих. Не знам кое е вярно, защото и двата начина не водят успех. Можеби ще ми е от полза цял пример на xml файла.


Целия код имам пред вид за прегледност. Така мога да сравня дали съм структурирал както трябва елементите, но в края на краищата т'ва не е от голямо значение.
RooSee на 17.02 2007 в 13:50ч.
не мога да изведа xml кода
RooSee на 17.02 2007 в 14:19ч.
А, готово. Справих се! Наистина много приятно. Благодаря!
bezdrum на 02.03 2007 в 14:13ч.
Имам един такъв въпрос. Може ли от картинка или поне на част от нея да се направи подобен Player? Всъщност да има само бутони за пускане, спиране и за звъка. Ето я и картинката.
http://proba4x4.hit.bg/volanF1.JPG
accorp на 02.03 2007 в 19:09ч.
Аз показах как фунционира. Винаги можеш да заместиш бутоните с твои и да сложиш background-картинка, но аз не мога да показвам как се прави дизайн, това зависи от теб :)
artistaa на 11.04 2007 в 11:41ч.
Здравейте, направил съм си плеър по вашия пример и с доста допълнителни атрибути. Но проблема е, че не зарежда звука и името на песента когато е качен на сървър. Иначе локално си работи. Трябва ли някъде да променям скрипта за да укажа друг път на зареждане или ако нещо друго има специфично може ло някой да ми помогне. Благодаря предварително!
адреса на сайта е: http://www.sunsbg.com/ , още не е завършен :-(
impulse_niki на 03.05 2007 в 17:35ч.
При мен нещо не е както трябва защото ми излиза следното Error opening URL "file:///E:ocuments and Settingsikiesktop rackList.xml"Как може да се оправи тва.
zashev на 28.11 2007 в 13:18ч.
Моля ви някой да каже как да си направя бутон във flash сайт който да спира музиката и после пак да я пуска? Спешно е!
zashev на 18.03 2008 в 18:08ч.
Нещо не ми се получава :(
Някой може ли да даде работен файл ,
включително и xml файла?
маила ми е:zashev@abv.bg
tndr на 26.05 2008 в 09:59ч.
Здравейте!

Благодаря за урока!
Можете ли да направите пример за плеър със код като на My Space, всъщност той е огромен и доста грозен но ми трябва за музикален и има хубави опции, показаване на албума, пруслушване на селектираната песен, сваляне, плейлист и така нататък. ще ви бъда много задължена!
Ако някой може да ми помогне с такъв код"

ilievamaria80@hotmail.com
Bulgarin на 03.02 2013 в 18:33ч.
Някой може ли да качи целия код някъде, че лично на мен не ми тръгва, а следвах всички стъпки от урока...
Благодаря!

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com