Делаем себе флеш плеер (Action Script 3.0) (Страница 1 из 3)

Здравствуй дорогой дружок.
Сегодня я тебя научу делать флеш плеер для себя и своего радио, изготовим мы вот эту прелесть за пять шагов.

Писать мы с тобой будем на AS3, он обладает некоторыми минусами, проблемы с воспроизведением потока с переменным битрейтом. А так же при использовании интро, и подмены потока на сервере (фалбак, ручное переключение потока и т.д.)

Но у AS3 есть большое преимущество под названием "аналайзер"
когда я задался сделать плеер под себя, я начал с AS2, найдя эту магическую штуку, я решил использовать AS3, так что придется пользоваться тем что есть и выкручиваться в ряде некоторых проблем.

Данный материал дает лишь основные сведения о написании плеера.
Сам я не знаю флеш, и материал предоставляю лиш на основе написания плеера для себя, так что для опытного флешера тут явно есть ошибки и кривые места.

Для работы нам понадобиться:
Adobe Flash (среда разработки, у меня например Adobe Flash CS4 ver 10.0)
пару прямых рук
фотошопер или развитый скил оный
терпение

Шаг #0

первым делом рисуем заготовки для плеера




это основная база для нашего плеера (основа, кнопка плей и ползунок регулятора)

итак, открываем Adobe Flash и создаем новый Flash File (ActionScript 3.0)
у нас в итоге получается данное окное (если отличается сильно, то выберите режим clasic (справа верху))
http://wasteland.su/radiotalk/scrin01.jpg

краткая информация о том что видим (простыми словами)
слева у нас классический интерфейс графического редактора
сверху слои и кадры
справа текущего выбранного объекта (вот и он нам и нужен в данный момент)

если вы сейчас не клацали радостно мышкой по разным менюшкам, то сейчас там свойства основной формы.
первым делом меняем размер (а то нафига нам плеер размером 550 на 400)
это кнопка edit справа от размера в свойствах

располагаем на ней нашу подложку (простое перетягивание автоматически ее расположит в библиотеку)

Шаг #1 Cоздаем кнопку плей.
Inser - New Simbol
name: knopka
type: Movie Clip
на нее вытаскиваем наш рисунок кнопки в отжатом состоянии
сверху заходим  в Actions текущего кадра.

там пишем

stop();

это нам нужно, чтобы после отображения первого кадра, он не начал прыгать по следующим.
закрываем код, нажимаем на второй кадр и выбираем Insert Blank Frame

и на свежеполученном кадре распологаем кнопку нажатия
так, же в actions, и опять stop();

Теперь нам нужно расположить на форме созданый клип.
Переключаем флеш с режима clasik на режим disiger
возвращаемся на основную форму

и перетягиваем справа из библеотеки наш мувиклип (knopka)

слева в свойствах свеже расположенного мувиклипа создаем ему имя (в поле где было <Instance Name> пишем play_buton)

Теперь будем учить ее нажиматься.
для этого на основном кадре основной формы заходим в actions
и пишим там такой код

var p_stat:int=0;

play_buton.addEventListener(MouseEvent.CLICK, play_nazh);

function play_nazh(event:MouseEvent):void
{
    if (p_stat==0) {
        p_stat=1;
        play_buton.gotoAndStop(2);
    }
    else {
        p_stat=0;
        play_buton.gotoAndStop(1);
    }
    
}

у нас получилось следующее:
пример: http://wasteland.su/radiotalk/step01.html
исходник: http://wasteland.su/radiotalk/step01.zip

Шаг #2 делаем регулятор громкости:
по аналогу с первым создаем новый мувиклип, зовем его polzunok (да, я очень оригинален)
перетаскиваем на него ползунок
создаем 5 кадров
на каждый кадр перетягиваем картинку ползунка из библиотеки, что бы на каждом кадре было смешение на 5 (т.е. если у первого координаты расположения картинки 0,0, то у последнего 20,0)
в каждом кадре, в актионс пишем stop();
делаем второй слой (это что бы он был нужных размеров)
на нем распологаем прозрачную область размерам 35 на 30 (это нужно, что бы весь мувиклип был нужных рамеров)
http://wasteland.su/radiotalk/scrin06.jpg
возвращаемся на основную форму.
располагаем мувиклип, обзываем его vol_buton
и пишем код обработки:
добавляем перемунную:

var v_stat:int=0;

потом, там где у нас обработка нажатия, добавляем

vol_buton.addEventListener(MouseEvent.CLICK, vol_nazh);

и в конце дописываем:

function vol_nazh(event:MouseEvent):void
{
    v_stat=Math.ceil(event.localX/5);
    vol_buton.gotoAndStop(v_stat);   
}

в результате у нас получается:

var p_stat:int=0;
var v_stat:int=0;

play_buton.addEventListener(MouseEvent.CLICK, play_nazh);
vol_buton.addEventListener(MouseEvent.CLICK, vol_nazh);

function play_nazh(event:MouseEvent):void
{
    if (p_stat==0) {
        p_stat=1;
        play_buton.gotoAndStop(2);
    }
    else {
        p_stat=0;
        play_buton.gotoAndStop(1);
    }
    
}

function vol_nazh(event:MouseEvent):void
{
    v_stat=Math.ceil(event.localX/5);
    vol_buton.gotoAndStop(v_stat);
}

пример: http://wasteland.su/radiotalk/step02.html
исходник: http://wasteland.su/radiotalk/step02.zip

Шаг #3 учим говорить
эта часть будет только в коде

В переменные добавляем:

var req:URLRequest = new URLRequest("http://wasteland.su:8080/zf_lw");
var context:SoundLoaderContext = new SoundLoaderContext(2500, false);
var potok:Sound          = new Sound();
var chanal:SoundChannel    = new SoundChannel();

функцию play_nazh() модернизируем до:

function play_nazh(event:MouseEvent):void
{
    if (p_stat==0) {
        p_stat=1;
        play_buton.gotoAndStop(2);
        potok.load(req,context);
        chanal=potok.play();
    }
    else {
        p_stat=0;
        play_buton.gotoAndStop(1);
        chanal.stop();
        potok.close();
        
        var false_potok:Sound = new Sound();
        potok = false_potok;
    }
    
}

комментарии:
req - указание на поток, обратите внимание, что это линк на сам поток, а не плейлист.
context - там указывается буфер в миллисекундах
конструкция

var false_potok:Sound = new Sound();
        potok = false_potok;

предназначена, что бы записать объект sound пустым значением, без него после первого отключения музыки, больше не включиться

пример: http://wasteland.su/radiotalk/step03.html
исходник: http://wasteland.su/radiotalk/step03.zip

Шаг #4 учим менять уровень громкости
опять только код

добавляем функцию

function vol_ur(v_stat)
{
    
    soud_vol.volume = v_stat*1/5;
    chanal.soundTransform = soud_vol;
}

в функцию vol_nazh() добавляем

vol_ur(v_stat);

в переменные дописываем

var soud_vol:SoundTransform      = new SoundTransform();

после строки chanal=potok.play(); добавляем

vol_ur(v_stat);

ну и последним штрихом, что бы при старте плеера выставлялся средний уровень громкости пишем код, сразу после всех переменных:

v_stat=3;
vol_ur(v_stat);
vol_buton.gotoAndStop(v_stat);

пример: http://wasteland.su/radiotalk/step04.html
исходник: http://wasteland.su/radiotalk/step04.zip

на этом у нас фактически есть все необходимое для плеера для одного радио потока.
Но я вам преподнесу еще один шаг, собственно, из-за чего я полез в дебри AS3, вместо AS2

Шаг #5 Аналайзер.
некоторые его называют эквалайзером, но это все таки не так.

Буду я вам показывать самое простое, на основе рисования графиков во флеше, можно на самом деле сделать мувиклип с разными значениями, но мне это не было нужно.
Самое главное вам узнать, как снимать данные с звукового потока.

так как это всего навсего бонус к выше находящемуся тексту, то приведу полный код и пример:

import flash.display.Graphics; 

var p_stat:int=0;
var v_stat:int=0;
var req:URLRequest = new URLRequest("http://wasteland.su:8080/zf_lw");
var context:SoundLoaderContext = new SoundLoaderContext(2500, false);
var potok:Sound          = new Sound();
var chanal:SoundChannel    = new SoundChannel();
var soud_vol:SoundTransform      = new SoundTransform();
var analo:Shape = new Shape();
var graf:Shape = new Shape();
var bytes:ByteArray = new ByteArray();
var n1:Array = new Array(256);
var i:int = 0;
var n:int = 0;
const xn:int = 90;
const yn:int = 40;
const razm:int = 90;
const visot:int = 25;
const cvet:int = 0x999999;

play_buton.addEventListener(MouseEvent.CLICK, play_nazh);
vol_buton.addEventListener(MouseEvent.CLICK, vol_nazh);

v_stat=3;
vol_ur(v_stat);
vol_buton.gotoAndStop(v_stat);

this.addChildAt(analo,numChildren - 1);
this.addChildAt(graf,numChildren - 1);

function play_nazh(event:MouseEvent):void
{
    if (p_stat==0) {
        p_stat=1;
        play_buton.gotoAndStop(2);
        potok.load(req,context);
        chanal=potok.play();
        vol_ur(v_stat);
        addEventListener(Event.ENTER_FRAME, ana);
    }
    else {
        p_stat=0;
        play_buton.gotoAndStop(1);
        chanal.stop();
        potok.close();
        
        var false_potok:Sound = new Sound();
        potok = false_potok;
    }
    
}

function vol_nazh(event:MouseEvent):void
{
    v_stat=Math.ceil(event.localX/5);
    vol_buton.gotoAndStop(v_stat);
    vol_ur(v_stat);
}

function vol_ur(v_stat)
{
    
    soud_vol.volume = v_stat*1/5;
    chanal.soundTransform = soud_vol;
}


function ana(event:Event):void 
{ 
    
    analo.graphics.clear(); 
    SoundMixer.computeSpectrum(bytes, true, 0);  
    analo.graphics.lineStyle(0, cvet); 
    analo.graphics.beginFill(cvet); 
    analo.graphics.moveTo(xn, yn);
    analo.graphics.endFill();
    for (i = 0; i < 256; i++) 
    { 
        n1[i] = bytes.readFloat();      
    }
    for (i = 0; i < 128; i++) 
    {
        //n=n1[i]*visot;
        
        n=((n1[i]+n1[i+128])/2)*visot;
        
        analo.graphics.moveTo(xn+(i*razm/128), yn);
        analo.graphics.lineTo(xn+(i*razm/128), yn-n);
        
    }
    analo.graphics.endFill();
    
}

пример: http://wasteland.su/radiotalk/step05.html
исходник: http://wasteland.su/radiotalk/step05.zip

лирика
За бортом осталось отображение текущего тега, из потока эту информацию посредством флеш, я не нашел как извлекать

данный код был написан для данного плеера:
http://wasteland.su/flash/receiver.html

Игнорирую просьбы о написании плеера для кого то
Данный материал предоставлен как есть, кто хочет большего изучайте флеш

Отредактировано Klef (04-02-2012 01:15:50)