Всем привет Недавно поднималась тема запуска радио на флеше на странице. Тема меня заинтересовала и собрал маленький гаджет который не будет мешаться на какой нибудь странице личного сайта или блога
Вот хочу рассказать что куда и что к чему.
Для начала что получится в итоге:
И так приступим. У нас задача: сделать плеер радио который будет обладать минимумом необходимых функций. А именно: Собственно играть радио, иметь кнопку запуска и остановки воспроизведения, Менять уровень громкости, отображать длительность прослушивания и показывать уровень буфера. Ну и еще бонусом полоска которая выполняет чисто эстетические функции
С функционалом разобрались. Теперь перейдем к интерфейсу.
Не буду подробно описывать что и как делалось просто опишу элементы.
1. Создан фон. (это два прямоугольника с круглыми углами, один под другим. Один темно другой светло серый для имитации bevel)
2. Кнопка ПУСК/СТОП ... Instance Name:play_mc (это мувиклип с четырьмя кадрами: 1. Плей 2. Плей (с наведением мышки) 3. Стоп 4. Стоп (с наведением мышки) На каждом кадре код stop()
3. Показатель буфера Instance Name:procent_mc (мувиклип внутри которого динамическое текстовое поле var:procent_txt с текстом по умолчанию "00%")
4. Показатель времени проигрывания Instance Name:time_mc (мувиклип внутри которого динамическое текстовое поле var:time_txt с текстом по умолчанию "0.00")
5. Регулятор громкости Instance Name:volume_mc (мувиклип с пятью кадрами на которых показаны разные уровни громкости и код stop(); на каждом кадре. Плюс туда добавлен прозрачный слой который определяет активную область регулятора громкости) Width:25
6. Полоса "активности" Instance Name:polosa_mc здесь анимация с маской (мувиклип в котором в первом кадре ничего не происходит и стоит код stop(); со второго кадра до конца клипа идет циклическая анимация и в последнем кадре стоит код gotoAndStop("2"); что бы запущенная анимация не встала на первом кадре)
7. Текстовое поле (по вкусу) ... у меня показывает название радио и анимация с сайтом для которого проигрыватель сделан (для своего)
Теперь переходим непосредственно к программированию. Так сказать вдохнем жизнь в нашу кучу мувиклипов.
1. Переходим в главную сцену создаем новый слой и пишем в нем код:
Code
volume_mc.gotoAndStop("5"); // устанавливаем отображение уровня громкости в "максимум" т.к. у нас звук запускается по умолчанию с максимальной громкостью play_mc.id=0; // присваиваем мувиклипу ПУСК/СТОП ид (0 это нажато СТОП, 1 нажато ПУСК)
play_mc.onRollOver = function(){ // создаем события для нашего ПУСК/СТОП при котором при наведении мышки буде меняться (ну в данном случае цвет кнопочки) if(this.id==0){ // здесь проверка если у нас кнопка ПУСК то менять кадр при наведении на второй this.gotoAndStop("2"); } if(this.id==1){//если СТОП то на четвертый this.gotoAndStop("4"); } } play_mc.onRollOut = function(){ // здесь почти тоже самое но при убирании мышки с копки if(this.id==0){ this.gotoAndStop("1"); } if(this.id==1){ this.gotoAndStop("3"); } }
play_mc.onRelease = function(){ // самое интересное <img src="http://s19.ucoz.net/sm/23/smile.gif" border="0" align="absmiddle" alt="smile"> Нажатие на кнопку ПУСК/СТОП if(this.id==0){// если было нажато ПУСК _root.time_mc.alltime = 0; // обнулить общее время проигрывания _root.mySound = new Sound(); // создать новый объект (для звука) _root.mySound.loadSound("http://sevenskies.ru:9000/sevenskies128", true); // туда загрузить звук из нужного источника _root.mySound.start(); // и начать проигрывать _root.procent_mc.myInt = setInterval(_root.procent, 500); // запустить setInterval который будет запускать функцию обновления значения бувера каждые пол секунды _root.time_mc.myInt = setInterval(_root.timer, 1000); // запустить еще один setInterval который будет запускать функцию обновления времени проигрывания каждую секунду this.gotoAndStop("3"); // запустить у клипа ПУСК/СТОП 3 кадр (в котором изображение кнопки стоп) _root.polosa_mc.gotoAndPlay("2"); // начать прогрывание визуализатора this.id=1; // присвоить новый ид.. return;// выйти из функции (сделано что бы при присвоении нового ид не активировалось следующее условие } if(this.id==1){//НАжата кнопка СТОП _root.procent_mc.procent_txt = "00%"; // обнулить "отображатель" буфера _root.time_mc.time_txt = "0.00"; // обнулим время clearInterval(_root.procent_mc.myInt); // очистим все clearInterval delete _root.mySound; // и удалим объект с музыкой clearInterval(_root.time_mc.myInt);// this.id=0;//присвоим новый ид this.gotoAndStop("1");//запустим у клипа ПУСК/СТОП 1 кадр (в котором изображение кнопки ПУСК) _root.polosa_mc.gotoAndStop("1"); // останови визуализатор return;//и уйдем отсюда:) } } //собственно функции volume_mc.onRelease = function(){//громкость _root.volume_s(this._xmouse); // в зависимости от того куда ткнули мышкой на клипе volume_mc в функции volume_s получаем разную громкость this.gotoAndStop(Math.ceil(this._xmouse/5));//и отображаем уровень }
function procent(){//подсчет процентов буфера if(mySound.duration){ procent_mc.procent_txt = ""+Math.ceil((mySound.position/mySound.duration)*100)+"%"; //простая математика } } function timer(){ //время проигрывания if(play_mc._currentframe == 3){ time_mc.alltime++; time_mc.minuty=Math.floor(time_mc.alltime/60); time_mc.sekundy=time_mc.alltime-(Math.floor(time_mc.alltime/60)*60); if(time_mc.sekundy<10){ time_mc.time_txt=""+time_mc.minuty+"."+"0"+time_mc.sekundy; } if(time_mc.sekundy>=10){ time_mc.time_txt=""+time_mc.minuty+"."+time_mc.sekundy; } } }
function volume_s(xclick){//установка громкости if(xclick<5){ mySound.setVolume(0); } else{ mySound.setVolume(xclick*5); } }
Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"!
Design bY PainKiller.Net.Ru