Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Инет радио
DooDLeZДата: Воскресенье, 28.03.2010, 20:19 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Всем привет
Недавно поднималась тема запуска радио на флеше на странице. Тема меня заинтересовала и собрал маленький гаджет который не будет мешаться на какой нибудь странице личного сайта или блогаsmile.gif

Вот хочу рассказать что куда и что к чему.

Для начала что получится в итоге:

И так приступим.
У нас задача: сделать плеер радио который будет обладать минимумом необходимых функций.
А именно: Собственно играть радиоsmile.gif, иметь кнопку запуска и остановки воспроизведения, Менять уровень громкости, отображать длительность прослушивания и показывать уровень буфера. Ну и еще бонусом полоска которая выполняет чисто эстетические функцииsmile.gif

С функционалом разобрались. Теперь перейдем к интерфейсу.

Не буду подробно описывать что и как делалось просто опишу элементы.

1. Создан фон. (это два прямоугольника с круглыми углами, один под другим. Один темно другой светло серый для имитации bevel)
Интернет-радио *

2. Кнопка ПУСК/СТОП ... Instance Name:play_mc (это мувиклип с четырьмя кадрами: 1. Плей 2. Плей (с наведением мышки) 3. Стоп 4. Стоп (с наведением мышки) На каждом кадре код stop()wink.gif
Интернет-радио *

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. Текстовое поле (по вкусуsmile.gif) ... у меня показывает название радио и анимация с сайтом для которого проигрыватель сделан (для своегоsmile.gif)

Теперь переходим непосредственно к программированию. Так сказать вдохнем жизнь в нашу кучу мувиклипов.

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);
}
}


  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта