Всем привет) Вот мой первый собственноручно нанисанный урок предоставленный на суд широкой публике.
Результат: Результат в работе: Смотреть
Исходник: Скачать
Для начала создадим XML файл и запишем туда пути к mp3 файлам:
Code
<playlist>
<song link="song1.mp3" />
<song link="song2.mp3" />
<song link="song3.mp3" />
</playlist>
Сохраним его в одну папку с .swf файлом и скопируем туда три mp3 файла соответственно song1.mp3, song2.mp3, song3.mp3. Названия песен будут браться из id3 тагов mp3 файла так, что во избежания путаници заполните их.
После этих процедур можно приступать к написанию флешки
Создаём новый документ, в нём создаём пять слоёв и называем их
graphics
text
buttons_gr
buttons
action script
graphics - рисуем задний фон для кнопок, процентов загрузки и регулятора громкости. Блокируем этот слой, он нам больше не понадобится.
text - создаём три текстовых поля (Text Field) со значениями (Properties) Dynamic Text и Instance Name
load_txt - процент загрузки
play_txt - процент проигрыша песни
title_txt - номер трека, название группы, название песни
Блокируем этот слой.
buttons_gr - здесь рисуем значки кнопок, превращаем их в Movie Clip'ы и задаём им Instance Name
play_gr
pause_gr
stop_gr
prev_gr
random_gr
next_gr
download_gr
volume_slider - кнопка на ползунке громкости
Они будут отвечать за анимацию кнопок.
Блокируем слой.
buttons - чтобы не целиться в графику кнопки (особенно если кнопкой сделан текст) создаём восемь невидимых Movie Clip'ов которые будут отвечать за нажатие на кнопку и задаём им Instance Name:
play_btn
pause_btn
stop_btn
prev_btn
random_btn
next_btn
download_btn
volume_btn - область наведения на управляющий громкостью
volume_btn1 - левый конец слайдера громкости
volume_btn2 - правый конец слайдера громкости
Блокируем слой.
action script - здесь будет скрипт плеера. Сразу блокируем слой, открываем Actions и начнём:
Сначала создадим переменные необходимые в дальнейшем
Code
var sound:Sound = new Sound() //звук который будем проигрывать
var song:Array = new Array() //массив с путями к mp3 файлам
var playlist:XML = new XML() // файл XML
var volume_set:Number = 100 //Начальное значение громкости от 0 до 100
Далее приступим к загрузке песен из XML файла:
Игнорируем пробелы
Code
playlist.ignoreWhite = true
При удачной загрузке XML перепишем пути к mp3 в массив song и запустим случайную песню, в противном выведем сообщение в поле tittle_txt
Code
playlist.onLoad = function(success) {
if (success) {
for (i=0; i<=playlist.firstChild.childNodes.length-1; i++){
song[i] = playlist.firstChild.childNodes[i].attributes.link
}
track = randRange (0, song.length -1)
pause_pos = 0
press_key(next_btn)
}
else {title_txt.text = "Файл XML не загружен" }
}
Когда обработчик определён начнём загрузку XML файла
Code
playlist.load("playlist.xml")
Напишем функцию которая будет генерировать псевдослучайное число в заданных параметрах
Code
function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.round(Math.random()*(max-min))+min
return randomNum
}
Запустим итнервал, который будет просчитывать процент загрузки и проигрывания песни, а также заполнять текстовые поля
Code
setInterval(function (){
position = Math.round(sound.position/sound.duration*100);
loading = Math.round(sound.getBytesLoaded() / sound.getBytesTotal() * 100)
if (sound.getBytesLoaded() > 1) {
if(loading==100) {load_txt.text = "ok"} else {load_txt.text = loading + "%"}
play_txt.text = position + "%"
title_txt.text = track + 1 + ". " + sound.id3.TPE1 + " - " +sound.id3.TIT2
}
} , 100 )
Напишем обработчик, который запустит следующую или случайную песню в зависимости от того, включён ли режим случайного воспроизведения песен
Code
sound.onSoundComplete = function () {
if (random_play==true) {press_key (random_btn)}
else {press_key (next_btn)}
}
Чтобы не писать одинаковые дейстия для всех кнопок и событий напишем общую функцию, которая будет воспроизводить звук при удачной загрузке, выведет сообщении если звук не начал загружаться.
Code
function press_key(presskey) {
if (presskey==download_btn) {getURL(song[track])}
if (presskey==next_btn){if(track >= song.length-1){track=0} else {track=track+1}}
if (presskey==prev_btn){if(track <= 0){track = song.length-1} else {track=track-1}}
if (presskey==random_btn){track=randRange (0, song.length -1)}
if (presskey==stop_btn) {sound.stop(); song_is_play = false} else {
sound.stop()
sound.start()
pause_pos=0
song_is_play = true
sound.onLoad = function(success:Boolean) {
if (success) {} else {title_txt.text = "loading..."}
}
sound.loadSound(song[track], true)
sound.setVolume(volume_set)
}
}
Так как в AS 2.0 нет функции паузы звука то напишем функцию для кнопки pause которая будет запоминать позицию воспроизведения песни и потом начинать воспроизведение с того же места
Code
pause_btn.onPress = function(){
if (song_is_play==true) {
pause_pos=sound.position/1000
sound.stop()
song_is_play=false
}
else {
sound.start(pause_pos)
song_is_play=true
pause_pos=0
}
}
Чтобы после нажатия pause кнопка play продолжала проигрывание, а после нажатия stop начинала заново напишем функцию и для неё
Code
play_btn.onPress = function(){
if (pause_pos==0) {press_key (play_btn)}
else {sound.start(pause_pos)}
}
Напишем режим случайного воспроизведения звука с анимацией кнопки random. Чтобы всё было понятно для анимации я выбрал атрибут _alpha (прозрачность) принимающий значения 50 и 100.
Code
random_play = false
over_key (random_gr)
random_btn.onPress = function(){
if (random_play==true) {
random_gr._alpha = 50
random_play=false
}
else {
random_play=true
random_gr._alpha = 100
}
}
Пропишем код для остальных кнопок, которые будут запускать общую функцию press_key
Code
stop_btn.onPress = function(){press_key (stop_btn)}
prev_btn.onPress = function(){if(random_play==true) {press_key(random_btn)} else {press_key(prev_btn)}}
next_btn.onPress = function(){if(random_play==true) {press_key(random_btn)} else {press_key (next_btn)}}
download_btn.onPress = function(){press_key (download_btn)}
Следущий код я написал только из есттетических соображений, чтобы при наведении на кнопки происходила их анимация. При желании можете его убрать.
Code
//функция наведения на клавишу
function over_key(overkey) {overkey._alpha = 50}
//функция отведения от клавиши
function out_key(outkey) {outkey._alpha = 100}
//наведение на кнопки
play_btn.onRollOver = function(){over_key(play_gr)}
pause_btn.onRollOver = function(){over_key(pause_gr)}
stop_btn.onRollOver = function(){over_key(stop_gr)}
prev_btn.onRollOver = function(){over_key(prev_gr)}
next_btn.onRollOver = function(){over_key(next_gr)}
download_btn.onRollOver = function(){over_key(download_gr)}
play_btn.onRollOut = function(){out_key(play_gr)}
pause_btn.onRollOut = function(){out_key(pause_gr)}
stop_btn.onRollOut = function(){out_key(stop_gr)}
prev_btn.onRollOut = function(){out_key(prev_gr)}
next_btn.onRollOut = function(){out_key(next_gr)}
download_btn.onRollOut = function(){out_key(download_gr)}
Добавим регулятор громкости нарисованный при помощи drawing API
Code
// громкость
volume_btn.onPress = function() {volume_drag=1}
volume_slider.onMouseMove = function () { if (volume_drag==1){
volume_long = volume_btn2._x - volume_btn1._x
volume_set = Math.round(volume_btn1._xmouse / volume_long * 100 )
if (volume_set < 0) {volume_set = 0}
if (volume_set > 100) {volume_set = 100}
volume_line.volume1._xscale = volume_set
slider_pos = _root._xmouse
if (_root._xmouse > volume_btn2._x) {slider_pos = volume_btn2._x}
if (_root._xmouse < volume_btn1._x) {slider_pos = volume_btn1._x}
volume_slider._x = slider_pos
volume_slider._y = volume_btn1._y
sound.setVolume(volume_set)
}
}
// начертание линии громкости
var volume_line:MovieClip = this.createEmptyMovieClip ("vol", 1)
volume_line._x = volume_btn1._x
volume_line._y = volume_btn1._y
volume_line.createEmptyMovieClip ("volume1", 1)
volume_line.volume1.beginFill (0xFF0000, 100)
volume_line.volume1.lineStyle(1, 0x000000, 100);
volume_line.volume1.moveTo (0, 0)
volume_line.volume1.lineTo (volume_btn2._x - volume_btn1._x, volume_btn2._y - volume_btn2._y)
volume_line.volume1.endFill ()
//применение громкости при запуске
volume_long = volume_btn2._x - volume_btn1._x
volume_line.volume1._xscale = volume_set
volume_slider._x = volume_btn1._x + volume_long / 100 * volume_set
sound.setVolume(volume_set)
//отмена всех слайдеров по отпусканию кнопки мыши
_root.onMouseUp = function() {volume_drag=0}
Ну и весь код целиком
Code
// объявление переменных
var sound:Sound = new Sound()
var song:Array = new Array()
var playlist:XML = new XML()
var volume_set:Number = 100
//загрузка из xml
playlist.ignoreWhite = true
playlist.onLoad = function(success) {
if (success) {
for (i=0; i<=playlist.firstChild.childNodes.length-1; i++){
song[i] = playlist.firstChild.childNodes[i].attributes.link
}
track = randRange (0, song.length -1)
pause_pos = 0
press_key(next_btn)
}
else {title_txt.text = "Файл XML не загружен" }
}
playlist.load("http://r2-gothic.clan.su/player/playlist.xml")
//функция для получения случайного номера
function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.round(Math.random()*(max-min))+min
return randomNum
}
// интервал для подсчёта процентов
setInterval(function (){
position = Math.round(sound.position/sound.duration*100);
loading = Math.round(sound.getBytesLoaded() / sound.getBytesTotal() * 100)
if (sound.getBytesLoaded() > 1) {
if(loading==100) {load_txt.text = "ok"} else {load_txt.text = loading + "%"}
play_txt.text = position + "%"
title_txt.text = track + 1 + ". " + sound.id3.TPE1 + " - " +sound.id3.TIT2
}
} , 100 )
//обработчик для запуска следующей песни
sound.onSoundComplete = function () {
if (random_play==true) {press_key (random_btn)}
else {press_key (next_btn)}
}
// функция нажатия клавиш
function press_key(presskey) {
if (presskey==download_btn) {getURL(song[track])}
if (presskey==next_btn){if(track >= song.length-1){track=0} else {track=track+1}}
if (presskey==prev_btn){if(track <= 0){track = song.length-1} else {track=track-1}}
if (presskey==random_btn){track=randRange (0, song.length -1)}
if (presskey==stop_btn) {sound.stop(); song_is_play = false} else {
sound.stop()
sound.start()
pause_pos=0
song_is_play = true
sound.onLoad = function(success:Boolean) {
if (success) {} else {title_txt.text = "loading..."}
}
sound.loadSound(song[track], true)
sound.setVolume(volume_set)
}
}
//кнопка pause
pause_btn.onPress = function(){
if (song_is_play==true) {
pause_pos=sound.position/1000
sound.stop()
song_is_play=false
}
else {
sound.start(pause_pos)
song_is_play=true
pause_pos=0
}
}
//кнопка play
play_btn.onPress = function(){
if (pause_pos==0) {press_key (play_btn)}
else {sound.start(pause_pos)}
}
//кнопка random
random_play = false
over_key (random_gr)
random_btn.onPress = function(){
if (random_play==true) {
random_gr._alpha = 50
random_play=false
}
else {
random_play=true
random_gr._alpha = 100
}
}
//нажатие кнопок
stop_btn.onPress = function(){press_key (stop_btn)}
prev_btn.onPress = function(){if(random_play==true) {press_key(random_btn)} else {press_key(prev_btn)}}
next_btn.onPress = function(){if(random_play==true) {press_key(random_btn)} else {press_key (next_btn)}}
download_btn.onPress = function(){press_key (download_btn)}
//функция наведения на клавишу
function over_key(overkey) {overkey._alpha = 50}
//функция отведения от клавиши
function out_key(outkey) {outkey._alpha = 100}
//наведение на кнопки
play_btn.onRollOver = function(){over_key(play_gr)}
pause_btn.onRollOver = function(){over_key(pause_gr)}
stop_btn.onRollOver = function(){over_key(stop_gr)}
prev_btn.onRollOver = function(){over_key(prev_gr)}
next_btn.onRollOver = function(){over_key(next_gr)}
download_btn.onRollOver = function(){over_key(download_gr)}
play_btn.onRollOut = function(){out_key(play_gr)}
pause_btn.onRollOut = function(){out_key(pause_gr)}
stop_btn.onRollOut = function(){out_key(stop_gr)}
prev_btn.onRollOut = function(){out_key(prev_gr)}
next_btn.onRollOut = function(){out_key(next_gr)}
download_btn.onRollOut = function(){out_key(download_gr)}
// громкость
volume_btn.onPress = function() {volume_drag=1}
volume_slider.onMouseMove = function () { if (volume_drag==1){
volume_long = volume_btn2._x - volume_btn1._x
volume_set = Math.round(volume_btn1._xmouse / volume_long * 100 )
if (volume_set < 0) {volume_set = 0}
if (volume_set > 100) {volume_set = 100}
volume_line.volume1._xscale = volume_set
slider_pos = _root._xmouse
if (_root._xmouse > volume_btn2._x) {slider_pos = volume_btn2._x}
if (_root._xmouse < volume_btn1._x) {slider_pos = volume_btn1._x}
volume_slider._x = slider_pos
volume_slider._y = volume_btn1._y
sound.setVolume(volume_set)
}
}
// начертание линии громкости
var volume_line:MovieClip = this.createEmptyMovieClip ("vol", 1)
volume_line._x = volume_btn1._x
volume_line._y = volume_btn1._y
volume_line.createEmptyMovieClip ("volume1", 1)
volume_line.volume1.beginFill (0xFF0000, 100)
volume_line.volume1.lineStyle(1, 0x000000, 100);
volume_line.volume1.moveTo (0, 0)
volume_line.volume1.lineTo (volume_btn2._x - volume_btn1._x, volume_btn2._y - volume_btn2._y)
volume_line.volume1.endFill ()
//применение громкости при запуске
volume_long = volume_btn2._x - volume_btn1._x
volume_line.volume1._xscale = volume_set
volume_slider._x = volume_btn1._x + volume_long / 100 * volume_set
sound.setVolume(volume_set)
//отмена всех слайдеров по отпусканию кнопки мыши
_root.onMouseUp = function() {volume_drag=0}
Вот в принципе и всё, жду коментов))
Немного доработал код. Версия 2:
xml:
Code
<song link="song1.mp3" />
<song link="song2.mp3" />
<song link="song3.mp3" />
Action Script:
Code
// объявление переменных
var sound:Sound = new Sound()
var song:Array = new Array()
var playlist:XML = new XML()
var volume_set:Number = 100
//загрузка из xml
playlist.ignoreWhite = true
playlist.onLoad = function(success) {
if (success) {
for (i=0; i<=playlist.childNodes.length-1; i++) {
song[i] = playlist.childNodes[i].attributes.link
}
pause_pos = 0
track = randRange (0, song.length -1)
press_key(next_btn)
} else {title_txt.text = "Файл XML не загружен"}
}
playlist.load("http://r2-gothic.clan.su/player/playlist.xml")
//функция для получения случайного номера
function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.round(Math.random()*(max-min))+min
return randomNum
}
// интервал для подсчёта процентов
setInterval(function (){
position = Math.round(sound.position/sound.duration*100);
loading = Math.round(sound.getBytesLoaded() / sound.getBytesTotal() * 100)
pos_move(position, loading)
if (sound.getBytesLoaded() > 1) {
if (track <=8) {track_num = "0" + (track + 1)} else {track_num = track + 1}
title_txt.text = track_num + ". " + sound.id3.TPE1 + " - " +sound.id3.TIT2
}
} , 100 )
//обработчик для запуска следующей песни
sound.onSoundComplete = function () {
if (random_play==true) {press_key (random_btn)}
else {press_key (next_btn)}
}
// функция нажатия клавиш
function press_key(presskey) {
if (presskey==next_btn){if(track >= song.length-1){track=0} else {track=track+1}}
if (presskey==prev_btn){if(track <= 0){track = song.length-1} else {track=track-1}}
if (presskey==random_btn){track=randRange (0, song.length -1)}
if (presskey==stop_btn) {sound.stop(); song_is_play = false} else {
sound.stop()
sound.start()
pause_pos=0
song_is_play = true
sound.onLoad = function(success:Boolean) {
if (success) {} else {title_txt.text = "loading..."}
}
sound.loadSound(song[track], true)
sound.setVolume(volume_set)
}
}
//кнопка pause
pause_btn.onPress = function(){
if (song_is_play==true) {
pause_pos=sound.position/1000
sound.stop()
song_is_play=false
}
else {
sound.start(pause_pos)
song_is_play=true
pause_pos=0
}
}
//кнопка play
play_btn.onPress = function(){
if (pause_pos==0) {press_key (play_btn)}
else {sound.start(pause_pos)}
}
//кнопка random
random_play = false
over_key (random_gr)
random_btn.onPress = function(){
if (random_play==true) {
random_gr._alpha = 50
random_play=false
}
else {
random_play=true
random_gr._alpha = 100
}
}
//нажатие кнопок
stop_btn.onPress = function(){press_key (stop_btn)}
prev_btn.onPress = function(){if(random_play==true) {press_key(random_btn)} else {press_key(prev_btn)}}
next_btn.onPress = function(){if(random_play==true) {press_key(random_btn)} else {press_key (next_btn)}}
download_btn.onPress = function(){getURL(song[track])}
//функция наведения на клавишу
function over_key(overkey) {overkey._alpha = 50}
//функция отведения от клавиши
function out_key(outkey) {outkey._alpha = 100}
//наведение на кнопки
play_btn.onRollOver = function(){over_key(play_gr)}
pause_btn.onRollOver = function(){over_key(pause_gr)}
stop_btn.onRollOver = function(){over_key(stop_gr)}
prev_btn.onRollOver = function(){over_key(prev_gr)}
next_btn.onRollOver = function(){over_key(next_gr)}
download_btn.onRollOver = function(){over_key(download_gr)}
play_btn.onRollOut = function(){out_key(play_gr)}
pause_btn.onRollOut = function(){out_key(pause_gr)}
stop_btn.onRollOut = function(){out_key(stop_gr)}
prev_btn.onRollOut = function(){out_key(prev_gr)}
next_btn.onRollOut = function(){out_key(next_gr)}
download_btn.onRollOut = function(){out_key(download_gr)}
// громкость
volume_btn.onPress = function() {volume_drag=1; volume_move()}
volume_slider.onMouseMove = function(){volume_move()}
function volume_move () { if (volume_drag==1){
volume_long = volume_btn2._x - volume_btn1._x
volume_set = Math.round(volume_btn1._xmouse / volume_long * 100 )
if (volume_set < 0) {volume_set = 0}
if (volume_set > 100) {volume_set = 100}
volume_line.volume1._xscale = volume_set
slider_pos = _root._xmouse
if (_root._xmouse > volume_btn2._x) {slider_pos = volume_btn2._x}
if (_root._xmouse < volume_btn1._x) {slider_pos = volume_btn1._x}
volume_slider._x = slider_pos
volume_slider._y = volume_btn1._y
sound.setVolume(volume_set)
}
}
// начертание линии громкости
var volume_line:MovieClip = this.createEmptyMovieClip ("vol",this.getNextHighestDepth())
volume_line._x = volume_btn1._x
volume_line._y = volume_btn1._y
volume_line.createEmptyMovieClip ("volume1", 1)
volume_line.volume1.lineStyle(1, 0x000000, 100);
volume_line.volume1.moveTo (0, 0)
volume_line.volume1.lineTo (volume_btn2._x - volume_btn1._x, volume_btn2._y - volume_btn2._y)
//применение громкости при запуске
volume_long = volume_btn2._x - volume_btn1._x
volume_line.volume1._xscale = volume_set
volume_slider._x = volume_btn1._x + volume_long / 100 * volume_set
sound.setVolume(volume_set)
//отмена всех слайдеров по отпусканию кнопки мыши
_root.onMouseUp = function() {volume_drag=0}
// позиция и перемотка
function pos_move (pos_set, lod_set) {
pos_long = pos_btn2._x - pos_btn1._x
pos_line.position1._xscale = pos_set
lod_line.loading1._xscale = lod_set
pos_slider._y = pos_btn1._y
pos_slider._x = pos_btn1._x + pos_long / 100 * pos_set
}
// начертание линии загрузки
var lod_line:MovieClip = this.createEmptyMovieClip ("lod", this.getNextHighestDepth())
lod_line._x = pos_btn1._x
lod_line._y = pos_btn1._y
lod_line.createEmptyMovieClip ("loading1", 1)
lod_line.loading1.lineStyle(1, 0xFFFFFF, 50);
lod_line.loading1.moveTo (0, 0)
lod_line.loading1.lineTo (pos_btn2._x - pos_btn1._x, pos_btn2._y - pos_btn2._y)
// начертание линии позиции
var pos_line:MovieClip = this.createEmptyMovieClip ("pos", this.getNextHighestDepth())
pos_line._x = pos_btn1._x
pos_line._y = pos_btn1._y
pos_line.createEmptyMovieClip ("position1", 1)
pos_line.position1.lineStyle(1, 0x000000, 100);
pos_line.position1.moveTo (0, 0)
pos_line.position1.lineTo (pos_btn2._x - pos_btn1._x, pos_btn2._y - pos_btn2._y)
// добавление слайдера и обнуление линии позиции
var pos_sl:MovieClip = this.createEmptyMovieClip ("pos_slider", this.getNextHighestDepth())
pos_sl.attachMovie("pos_1", "pos_mc", this.getNextHighestDepth())
pos_sl._x = pos_btn1._x
pos_sl._y = pos_btn1._y
pos_line.position1._xscale = 0
lod_line.loading1._xscale = 0
