ОсновноеRadiotalkПользовательское
Общие вопросы по интернет радио вещанию
6   •   Посмотреть все темы

Делаем себе флеш плеер (Action Script 3.0)

 

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

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

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

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

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

Шаг #0

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




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

итак, открываем Adobe Flash и создаем новый Flash File (ActionScript 3.0)
у нас в итоге получается данное окное (если отличается сильно, то выберите режим clasic (справа верху))
**********

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

если вы сейчас не клацали радостно мышкой по разным менюшкам, то сейчас там свойства основной формы.
первым делом меняем размер (а то нафига нам плеер размером 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);
}

}

у нас получилось следующее:
пример: **********
исходник: **********

Шаг #2 делаем регулятор громкости:
по аналогу с первым создаем новый мувиклип, зовем его polzunok (да, я очень оригинален)
перетаскиваем на него ползунок
создаем 5 кадров
на каждый кадр перетягиваем картинку ползунка из библиотеки, что бы на каждом кадре было смешение на 5 (т.е. если у первого координаты расположения картинки 0,0, то у последнего 20,0)
в каждом кадре, в актионс пишем stop();
делаем второй слой (это что бы он был нужных размеров)
на нем распологаем прозрачную область размерам 35 на 30 (это нужно, что бы весь мувиклип был нужных рамеров)
**********
возвращаемся на основную форму.
располагаем мувиклип, обзываем его 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);
}

пример: **********
исходник: **********

Шаг #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 пустым значением, без него после первого отключения музыки, больше не включиться

пример: **********
исходник: **********

Шаг #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);

пример: **********
исходник: **********

на этом у нас фактически есть все необходимое для плеера для одного радио потока.
Но я вам преподнесу еще один шаг, собственно, из-за чего я полез в дебри 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();

}

пример: **********
исходник: **********




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

данный код был написан для данного плеера:
**********

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

Отредактировано Klef - 04.02.2012
468
Klef @Klef
на всяк случай исходники в формате CS3
**********

Отредактировано Klef - 04.02.2012
6245
Тарас @tarasian666
спасибо )
теги помоему надо извлекать уже php скпиптом из status2.xsl к примеру и тогда совать в флеш

118
Серёга @Azod
да-да) так и есть

468
Klef @Klef
tarasian666 пишет:

спасибо )
теги помоему надо извлекать уже php скпиптом из status2.xsl к примеру и тогда совать в флеш

ну я так и делаю )

6245
Тарас @tarasian666
не судьба... Adobe Flash CS4 ver 10.0 не заработал на семерке, а про wine вобще молчу ))

118
Серёга @Azod
Хр рулиД

6245
Тарас @tarasian666
офтоп
windows7 по производительности лучше хрюши, но рулит linux ))

468
Klef @Klef
2 tarasian666
а поновей не пробовал с сайта адобе сдернуть?
мож там уже есть версии поддерживаемые семеркой?
я лично взял данную, ибо была под рукой :)

6245
Тарас @tarasian666
триал.. ну разве создать плеер успею ))

468
Klef @Klef
ну собственно код я весь выдавил на триале, а вот из-за дизегера нашего пришлось потом искать :)

1
kvv157 @kvv157
Привет ув. форумчане! Flash (action script) начал изучать недавно, так что если вопрос окажется глупым просьба не пинать :)
Стоит задача организовать трансляцию аудиопотока на сайте.
Подробности: Имеется вебсервер (win ser 2008, iis 7, mysql, zendserver) и ПК на котором запущена трансляция потока аудио (mp3 24 кБ/с) с помощью shoutcast (сервер winamp).
Настраиваю и тестирую в локальной сети.
Изучив ********** создал следующий пустой мувик со скриптом:

import flash.media.Sound;
import flash.media.SoundLoaderContext;
import flash.net.URLRequest;
var s:Sound = new Sound();
var req:URLRequest = new URLRequest("http://192.168.2.3:8000");
var context:SoundLoaderContext = new SoundLoaderContext(8000, true);
s.load(req, context);
s.play();
Запускаю во adobe flash 4 через test movie – все работает поток воспроизводиться.
Но если располагаю опубликованный флэш непостредственно на вебсервер и открываю через браузер : IE – тишина, ничего не происходит; Mozilla – выдает ошибки 2044 и 2032 – не может открыть поток.
До этих ошибок была ошибка с Security, но попробовал поиграться свойством флэша local playback securiry при публикации и ошибка ушла. Но до конца решения не помогло, единственно что если установлено в acess network only – стал воспроизводиться поток непосредственно с машины (выходной файл swf) и не ругается на security при запуске из браузера.
Если я строчку
var req:URLRequest = new URLRequest("http://192.168.2.3:8000");
меняю например на
var req:URLRequest = new URLRequest("MyFile.mp3");
и после публикации помещаю флэш и файл mp3 на сервер – все работает.

Пришел к выводу что не воспроизводит поток из-за правил безопастности, а именно из-за того что флэш (файл swf) и аудиопоток находятся в разных изолированных программных средах, т.е. в разных доменах: флаш на вебсервере а поток на **********.
Прочитал главу 32. Безопасность проигрывателя Flash Player, но как я понял файлы политики применимы именно для доступа swf файлов, например друго веб сервера.
У меня вопрос: как мне сделать чтобы мой SWF файл и звуковой поток были в одной программной среде. Как это сделать я не понял, ведь аудиосервер у меня не веб сервер, и где например (если располагать) расположить файл политик для того чтобы флэш плэйер разрешил воспроизвести поток?

468
Klef @Klef
1 предположение: недоступен 192.168.2.3 с веб сервера
2 предположение: var context:SoundLoaderContext = new SoundLoaderContext(8000, false);
3 предположение: crossdomain.xml тебя спасет

Отредактировано Klef - 09.04.2010
6245
Тарас @tarasian666
та же проблема, вобще ни к какому файлу "извне" не пускает.
crossdomain.xml не спасает


спасло другое - смотрим оции публикации ;)
только анализатор матерится что доступа нет, но как в шоуткаст вставить crossdomain.xml ?......

468
Klef @Klef
2 tarasian666
можеш попробовать на AS 2.0 там вроде нет таких заморочек с политиками доступа.
Делается все тоже самое, кроме спектроанализатора.
но могу и прогонять, давно флеш ковырял.

6245
Тарас @tarasian666
да вот как раз хотел с анализатором.
Играет и без политик доступа, а анализатор почемуто не хочет работать.
Ну с айскастом просто, закинул crossdomain в папку web и все готово. А вот закинуть в корень сервера и там прописать порт - непроканывает.

PS как оказалось теги можно тянуть с status2.xsl и без php

3
Alek @Alek
Замечательный туториал. Все получается чудесно. Все играет в просмотре. Ну когда делаю публикацию врезаюсь как раз в проблему с полеси (политики). Не работает и я понятия не знаю как устранить проблему. Посоветуйте пожалуйста.

468
Klef @Klef
создаете файл Crossdomain.xml
с содержимым
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

в корне веб сервера откуда берет инфу (в нашем случае это веб директория icecast'а)

3
Alek @Alek
Klef пишет:

создаете файл Crossdomain.xml
с содержимым
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

в корне веб сервера откуда берет инфу (в нашем случае это веб директория icecast'а)

Большое спасибо за ответ. Но во первых я не имею доступ к дериктории айскаста. А во вторых вопрос такого рода. Почему всякие бесплатные плееры не нуждаются в установке кроссдомена?

6245
Тарас @tarasian666
потому что написаны на actionscript 2.0
пс у меня работало без "кросдомена" когда в параметрах публикации поставил access network only но аналайзер только не работал