MP3-плеер c XML-плейлистом
Добрый день.
Сегодня я расскажу, как сделать простенький MP3-плеер.
Ну приступим...
Создаем новый файл АС3. И начинаем создавать графические элементы нашего плеера (я не буду тут указывать как это все делается вы должны это уже уметь, если не умеете, то это урок пока не для вас). Каждый пункт это отдельный слой:
1) фоновое изображение (у меня черный прямоугольник)
2) 3 динамических текстовых поля:
- set_txt - для отображения % загрузки
- time_txt - для отображения времени проигрывания трека
- name_txt - для отображения названия трека
3) кнопки (как делать кнопки я уже писал тут:)
- Prev_btn - предыдущий трек
- Play_btn - играть трек
- Pause_ btn - пауза ( эта кнопка должна находится над или под предыдущей кнопкой)
- Stop_btn - Стоп
- Next_btn - следующий трек
4) регулеровка звука
- создаем 7 полосок размерами от 2х2 до 2х14 с растоянием между друг другом в 1 пиксель. должна получится "лесенка". Выделяем всю лесенку и делаем из нее Мувиклип volume_mc. Заходим в нутрь мувиклипа. Создаем новый слой идентичный нашей "лесенке" (проще скопировать кадр). Верхняя лесенка должна находится над ничжней в тех же координатах. У меня нижняя серого цвета, а верхняя белого. Делаем новый слой. На нем рисуем прямоугольник 20х14. Он должен закрыть полностью наши лесенки. Превращаем его в Мувиклип volumefill_mc. Делаем этот слой маской (правая клавиша по названию слоя --> Mask). Делаем новый слой. Нам нужен снова прямоугольник 20х14, но он должен быть прозрачным (это будет зона срабатывания мыши). Выходим на основную сцену.
- делаем 2 кнопки offVolume_btn и onVolume_btn распологаем одну над другой.
5) рисуем полосу прогресса (у меня она длиной 200 это важно для кода). Превращаем ее в мувиклип progress_mc. Заходим в него. Выбираем полоску и превращаем ее в мувиклип status_mc (внутрь заходить не надо). Делаем новый слой. рисуем такуюже полоску и превращаем ее в мувиклип progressfill_mc. Делаем 3-й слой. и снова такую же полоску. Слой делаем маской. Возвращаемся на основную сцену.
* Все элементы делайте по своему вкусу. Главное помните что все имена элементов надо прописать в инстанс нейм иначе код не будет работать.
6) Делаем слой для скрипта и в первый кадр вводим:
var loader:URLLoader = new URLLoader(); //этим будем загружать наш XML
var setPosition:int = 0; //здесь будем хранить позицию воспроизведения при нажатии паузы и т.п.
var soundObj:Sound = new Sound(); //наш основной объект для работы
var soundCha:SoundChannel = new SoundChannel(); //позволит управлять каналом воспроизведения
var soundTrans:SoundTransform = new SoundTransform(); //для звука и получания данных для аналийзера
var reqUrl:URLRequest = new URLRequest(); //для загрузки mp3 в объект Sound
this.progress_mc.status_mc.width = 0; //устанавливаем показатель уровня загрузки в 0
this.progress_mc.progressfill_mc.x = -200; //и показатель воспроизведения в позицию -200 что будет видется тоже как 0
var loaded:Number = 0; //для правильного просчитывания отображения места воспроизведения
var soundBytes:ByteArray = new ByteArray(); //для хранения данных о звуке
var arrayUrl:Array = new Array(); //массив для адресов mp3
var array:Array = new Array(); //для хранения преобразованных данных о звуке
var volumeP:Number = 1; //для хранения уровня громкости звука
var volumeS:Number = 1; //тоже
var track:int = 0; //номер текущего трэка для воспроизведения
var offmark:Boolean = false; //для кнопки MUTE
//события и слушатели. основа
function initPlayMp3():void {
Play_btn.addEventListener(MouseEvent.CLICK, startPlay); //присвоим реакцию на клик мышки нашим элементам интерфейса
Pause_btn.addEventListener(MouseEvent.CLICK, stopPlay);
volume_mc.addEventListener(MouseEvent.CLICK, volumePlay);
progress_mc.addEventListener(MouseEvent.CLICK, progressPlay);
offVolume_btn.addEventListener(MouseEvent.CLICK, offvolumePlay);
onVolume_btn.addEventListener(MouseEvent.CLICK, onvolumePlay);
Next_btn.addEventListener(MouseEvent.CLICK, nextTrack);
Prev_btn.addEventListener(MouseEvent.CLICK, prevTrack);
Stop_btn.addEventListener(MouseEvent.CLICK, fullStop);
loader.addEventListener(Event.COMPLETE, whenLoaded); //событие вызовется когда XML фал будет загружен
loader.load(new URLRequest("playlist.xml")); //а это адрес того что будем загружать
volume_mc.buttonMode = true; //определим свойсто для нужных нам клипов что бы при наведении на них курсор менялся на руку
progress_mc.buttonMode = true;
offVolume_btn.visible = false; //скроем кнопки которые не нужны
Pause_btn.visible = false;
}
//загрузка xml
function whenLoaded(event:Event):void { //если загрузка XML прошла успешно то в наш массив с адресами запишем все ее содержимое
playlist = XML(event.target.data);
for(var i:int = 0; i=0){ // определяем на какой трек нам переключаться
track--;
} else {
track = arrayUrl.length-1;
}
try { // пытаемся выполнить стоп и закрытие канала, если канал уже закрыт (загрузка закончилась) то оное вызовет ошибку и выполнение перейдет к catch
soundCha.stop();
soundObj.close();
} catch(e:Error){
soundCha.stop(); // просто остановим
}
PlaySound(); // и запустим воспроизведение нового трека
}
function fullTrack(event:Event):void{ // определяет новый трэк и переходит к нему
Play_btn.visible = false; // определяем какие кнопки управления должны быть видимыми а какие нет
Pause_btn.visible = true;
if((track+1)
7) создаем XML-файл playlist.xml у меня только 2 композиции, но вы можете сделать и больше.
<?xml version="1.0" encoding="utf-8"??>0.mp31.mp3
На этом все. Спасибо за внимание. Удачи
- 44525 просмотров
Комментарии
Полезный урок, а главное, ПОНЯТНЫЙ!так держать !
Суда по соотношению просмотрено/откоментированно Это интересно только Сергею
Который и так это знает, как делать плеер, лучше меня!!!!
Aloran, не делай поспешных выводов. Поживем увидим. Урок очень достойный. Но новичков может отпугнуть кажущейся громоздкостью. В следующей рассылке анонсе я обращу внимание на этот урок.
Тогда и посмотрим на соотношение просмотрено/откомментированно...
Урок нужный а самое главное полезный
ух как...спасибо! попробуим))
да конечно я буду очень признателен если вы сделаете видеоурок по изготовлению флэшплеера
Будет очень хорошо с видео уроком и конечно с вашим комментарием!!!
Ах какая класссная идея - урок, как плеер сделать... Вот бы пояснения еще к Аction Script...
все довольно доходчиво, видеоурок конечно же неплохо было бы но мне кажется что если есть идеи и темы для видеоуроков, лучше продолжить их, текстового описания вполне достаточно
А тут можно задавать вопросы (тем кому все понятно :) ) ?
1." Делаем новый слой. Нам нужен снова прямоугольник 20х14, но он должен быть прозрачным (это будет зона срабатывания мыши). " - Это символ графика ? Иначе не понимаю как его сделать прозрачным 6(
2. У меня чего-то регулировка звука кривая получилась. Нажимаю в центре лесенки, центр становится беленьким (полоски до и после остались серыми), нажимаю чуть левее - еще пару полосок становиться белыми слева и справа от центральной, края по прежнему серые :(
3. Я немного не поняла пункт "рисуем полосу прогресса", там status_mc и progressfill_mc - это две одинаковые белые полосы? Если да, то где тогда рисуем длинную полосу, серую внутри и белую по краям ?
Спасибо.
Omaggot, ну ты где?
Неужели у меня таки трудные вопросы оказались ??? или здесь нельзя задавать вопросы??? А может я просто плохо объяснила ...
Напишите хоть чего-нибудь...
Ответы:
1) Это простой прямоугольник. В меню цвета просто ставим заливку любого цвета и двигаем ползунок прозрачности в положение 0%
2) Надя пришлите фла файл на
я посмотрю и скажу в чем дело. Скорее всего вы маску не тем слоем сделали.
3) Нет одна из них у меня серая, другая белая. (мой недочет)))
Надюшь ну кто 9 мая флешит!!!!)))))))))))
Да и вот еще: Что тебе непонятно в скриптах? Я объясню.
А так у кого есть вопросы что означает то или иное действие в АС: Справочник
Да!!! Сделайте видеоурок, пожалуйста!!
nadya.fd я здесь, просто не заглядывал на страницу, курсовои делал (во flash'е:) )
я так понял что Aloran ответил на Ваши вопросы,
если вдруг понадоблюсь (мммм...) пишите
Удачи
Ой! Пару дней отсутствовала, а тут уже столько ответов! Как замечательно! Спасибо всем кто откликнулся.
про 9 мая ... да, вы правы, Но уж больно урок интересный оказался, я и не удержалась :)
Аloran, Спасибо за ответы, с маской поиграла(чтобы она покрывала несколько слоев), не помогло:(. Вот обнаружила, что точку регистрации для маски надо было слева по центру, это улучшило картину, но не идеально. Так что я вам все же отправлю файлик, посмотрите пожалуйста.
И еще возник вопрос:
volume_mc.volumefill_mc.width = (volumeP*100)/5; - Почему "5" ???
Там есть еще строчка, где тоже пятерка, думаю они обе по одной и той же причине, но пока не поняла по какой.
Omaggot, удачи на защите.
Надюшь смотри:
Что такое VolumeP? Это переменная в которой мы храним уровень громкости!
Что такое volume_mc.volumefill_mc.width? Это ширина маски.
Допустим мы щелкнули на включении звука и уровень громкости был 100% (громкость изменяется от 0,0 до 1,0)
получается ширина маски будет ровняться 1*100/5 = 20 пикселям , т.е. наша шкала громкости (лесенка) отобразиться полностью (помнишь я говорил, что ее надо делать шириной в 20 пикселей). Допустим звук установлен в 50% ширина будет 0,5*100/5=10 пикселям и у нас окрасятся белым только половина лесенки.
Надеюсь понятно объяснил.
П.С.: И не надо обращаться ко мне на вы. Я ни так уж и стар))) мне всего скоро 27))))
Спасибо! Помогло, все подправила (согласно своим размерам :) ). Теперь красиво работает.
П.С. Уговорил, не буду больше на ВЫ. Тем более мы ровестники выходит.
Спасибо за урок , только не понял куда ставить адрес плейлиста (вместо какого слова-new URLLoader или просто new, а если то new, то в обех строках или в одной?)
а как делать мувиклип?
а, всё понял, спасибо=))))
извините а для полосок громкости надо отдельный слой или нет?
и ещё: как это всё сохранять и открывать?
а как делать мувиклип?
а, всё понял, спасибо=)))) yahoo
извините а для полосок громкости надо отдельный слой или нет?
и ещё: как это всё сохранять и открывать? smiles
Я бы Вам для начала советовал ознакомиться с курсом: https://disk.easyflash.org/magazin/easyflash
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте -
Спасибо за урок , только не понял куда ставить адрес плейлиста (вместо какого слова-new URLLoader или просто new, а если то new, то в обех строках или в одной?)
Вот строчка добавления плей листа
loader.load(new URLRequest("playlist.xml"));
а как делать мувиклип?
F8
извините а для полосок громкости надо отдельный слой или нет?
Читайте внимательнее там все написано.
И вообще не стоит браться за такую программу если даже основ не знаете.
Извините, я не до конца все понял! Сделал все как тут написано, но выдает 27 ошибок в скрипте!
Если у вас есть готовый, рабочий исходник, вышлите мне на
Буду очень презнателен
как исправить глюк?
когда нажимаешь паузу потом следующую песню она начинается не сначала
Velter,
У меня такой же глюк был но я adobe flash установил и все.
Velter,
Macromedia flash - это фигня
Афигенски ! прям то, что я искал )
P.S.
Тока вот в конце надо из урока затереть bb теги )):
[code=xml]<?xml version="1.0" encoding="utf-8"?>
<playlist>
<url>0.mp3</url>
<url>1.mp3</url>
</playlist>[/code]
А то я долго искал причину ошибок ).
они фиг знает как влезли))) Ничего полезно иногда)))) А то привыкли все подрят копировать, а так хоть голову поломаете)))
Они влезли потому что не было парсера исходного кода.
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте -
добрый день спасибо за урок клевски все работает, не могли бы вы подсказать как сделать чтобы через html передавалась информация о том какой трек необходимо загружать что то типа
object
param name=mp3file value=./mp3/1.mp3
object
и что необходимо сделать во флеше спасибо
Блин, спасибо )))
Страницы