Flash Mp3 Player
Публикувана от smilev на January 17 2011 14:56:37
Разширена новина
В този урок ще ви покажа как да си направите Flash Player с XML плейлист.
Като за начало, направете един XML файл – създайте един текстови файл (txt) и го преименувайте с разширение .xml. Отворете този файл с някакъв текстови редактор, например Notepad. Вече имаме файла, но той все още е само текстови. Запишете на пърия ред:
<?xml version="1.0" encoding="UTF-8"?>
Това декларира XML файла като такъв, задължителен ред за всички XML файлове.
Сега да започнем списъка, добавете още два реда и запишете един по друг тези два тага:
<songs>
</songs>
Между тези два тага ще запишем песните. В практиката този таг (по принцип, не тага songs, който всъщност ние си правим) се нарича firstChild. Запомнете това, защото ще ни помогне да адресираме песните, които ще добавим, напрактика в този firstChild.
Сега да добавим и една песен между таговете <songs> и </songs>:
<song url=”track1.mp3” />
За да се различава от firstChild кръщаваме тага song. Виждате и още нещо – url=”track1.mp3” – това ще атрибута с който ще адресираме mp3 файла. Това url се нарича attributes.
Вече имаме една песен в tracklist-а, който трябва да изглежда така:
<?xml version="1.0" encoding="UTF-8"?>
<songs>
<song url=”track1.mp3” />
</songs>
Сега отворете флаш и направете, като за начало, два слоя с имена: buttons и actions. На слоя buttons ще направим няколко бутончета, а на слоя actions всичкия Action Script, който ни е нужен.
Да започнем от слоя actions, изберете фрейма и отворете Actions Panel-a. На първо и най-важно място е променливата клас аудио:
var my_snd:Sound = new Sound();
Сега трябва да настроим и събитието onSoundComplete:
my_snd.SoundComplete = nextTrack;
Когато свърши песента ще се извърши фунция nextTrack, която ще напишем по-късно.
Сега да настроим и силата на звука:
my_snd.setVolume(50);
Сила на звука ще бъде 50%, за сега, по-късно ще направим и плъзгач за регулиране.
Ще направим една променлива, с която ще разбираме коя песен е текуща и чрез нея ще избираме следваща/предишна:
var current_track:Number = 0;
Избираме 0, защото първия елемент от списъка (Array) винаги е 0.
Сега да направим един списък, който ще запълним с данните от XML файла.
var songArray:Array = new Array();
Време е да декларираме частта за листа с песните:
var xml:XML = new XML();
Забележете, че xml изписано с малки букви не е запазена дума във флаш, но с големи букви е клас, така че спокойно можем да кръстим променливата xml.
xml.ignoreWhite = true;
Това е едно от нещата, които винаги трябва да правите. В случай че го няма, няма да игнорира „белите места”, т.е. празните и всъщност ще ги счете за XML елементи.
Другото задължително нещо, което трябва да направим е да декларираме събитието (event) onLoad. В противен случай само ще заредим XML файла, но няма да направим нищо с него:
xml.onLoad = function(){
Вече сложихме началото на блока, сега е време на направим една променлива, която ще ще представлява „адрес” към нашата песен, т.е. към песента посочена в XML файла:
var mainNode = xml.firstChild.childNodes;
Ще ви е по-разбираемо, ако си припомните частта с обясненията за XML файла. childNodes представляват тагове затворени във firstChild или казано според контретни случай – childNodes са song таговете, firstChild е „блока” <songs>…</songs>.
Следващата ни работа е да прочетем всички url атрибути (attributes) от всички song тагове. Казвам всички, защото те може да станат повече от един:
for(var i=0; i<mainNode.length; i++){
С for ще обиколим всички тагове, като започнем от 0. Не забравяйте, че в списъците първия елемент не е 1, а 0. Следващата стъпка от for е да ограничим „броенето”, а последния таг song. Не забравяйте горната променлива mainNode, която декларирахме. Тя всъщност представлява всички song тагове, така че с length ще намерим броя им. И последната част – прогресия с 1, за да не прескачаме елементи.
След като вече можем да минем през всички тагове, нека ги сложим в нашия списък, който декларирахме по-горе – songArray:
songArray.push(mainNode[i].attributes.url);
}
}
Адресираме нашия списък и с push, буквално бутаме елементи в него. Сега, виждате нашата променлива съдържаща song таговете – mainNode, с една малка особеност – индекс от i ([i]). Не забравяйте, че числото i е със стойност в интервала от 0 до броя на таговете song. С тази конструкция mainNode[i] получваме няколко различни променливи mainNode, чийто брой е равен на броя на таговете song. Например, ако имаме 3 тага <song />, поучаваме mainNode[0], mainNode[1] и mainNode[2].
След като вече разбрахме броя на таговете и „размножихме” mainNode, нека да адресираме съдържанието на url атрибутите, наоример mainNode[0].attributes.url – това е атрибута url на първия таг song. Виждате, че има и две големи скоби (}), първата затваря блока for, а втората затваря блока onLoad събитието (event).
Време е да заредим самия xml файл:
xml.load("trackList.xml");
Адресираме xml променливата ни и с метод load. В скоби и в кавички поставяме път или точен url до файла, в случая съм кръстил xml файла ми trackList.xml.