Примеры

Синхронное воспроизведение звуков

admin — Wed, 25 Feb 2009 22:41:36 +0300

[CUT]Сегодня мы разберём с вами, как можно организовать синхронное воспроизведение звуков, чтобы, если 1 звук играл-играл и остановился на каком-то месте, другой звук начинал своё воспроизведение с той же минуты/секунды, на котором остановился предыдущий звук.[/CUT]

Синхронное воспроизведение звуков

Сегодня мы разберём с вами, как можно организовать синхронное воспроизведение звуков, чтобы, если 1 звук играл-играл и остановился на каком-то месте, другой звук начинал своё воспроизведение с той же минуты/секунды, на котором остановился предыдущий звук. В качестве инструмента программирования мы будем использовать ActionScript 2.0

История вопроса

Этот вопрос уходит своими корнями в далёкое прошлое, когда в рубрике «Вопрос-ответ» был задан вопрос о синхронизации звука. Автор этого вопроса, спрашивал, цитирую:

Цитата:

Вопрос следующий: Представте...сидит оркестр, как сделать, что бы при нажатии на любой инструмент он начинал исполнять
свою партию!А если на следующие другие, то они должны включаться в том же месте где играет первый!!!

И некто, admin помог ему в решении этого вопроса. А теперь, возможность узнать ответ на него есть и у вас =)

Что нам нужно?

Нам нужно создать в .fla проекте 2 кнопки с именами sound1_mc и sound2_mc, а потом импортировать в библиотеку проекта, 2 звука, с именами sound1 и sound2. Эти имена звуков обязательно должны быть указаны в вкладке Linkage, а так же, необходимо будет поставить галочки напротив надписей «Export for ActionScript» и «Export in first frame».

Половина дела сделана, теперь осталось написать код программы =)

Необходимая функция

Так, как мы будем работать со звуком, нам придётся работать с объектами Sound, которые и отвечают в Flash за работу со звуком. Ключевой функцией, которую мы будем использовать в нашем уроке станет функция, которая запускает проигрывание звуков:

_sound.start(_number);

Где, _sound — это объект Sound, а _number — это цифровое значение в миллисекундах, с которого начнётся проигрывание звука.

Код программы

Stage.scaleMode = "noScale";
Stage.align = "TL";
//
var my1_sound:Sound = new Sound(this.sound1_mc);
my1_sound.attachSound("sound1");
var my2_sound:Sound = new Sound(this.sound2_mc);
my2_sound.attachSound("sound2");
//Делаем, чтобы когда мелодия начинала проигрываться заново при окончании
my1_sound.onSoundComplete = my2_sound.onSoundComplete=function () {
	this.start();
};
//Создаём переменную, в которую будем запоминать, какой сейчас играет звук
var current_sound:Sound;
//Запоминаем, какой звук соответствует какой кнопке
this.sound1_mc.var_sound = my1_sound;
this.sound2_mc.var_sound = my2_sound;
//
//Создаём обработчик события onRelease, каждый раз при его срабатывании
//будет запускаться функция _root.changeCound_func, в которую будет
//передаваться параметр this.var_sound. Эти параметры мы присвоили кнопкам
//чуть выше
this.sound1_mc.onRelease = this.sound2_mc.onRelease = function() {
	_root.changeCound_func(this.var_sound);
};
//
function changeCound_func(new_sound:Sound) {
	trace("Запускаем новый звук");
	//Создаём переменную, в которую будем запоминать, на какой позиции сейчас
	//находится играющий звук
	var _soundPos:Number
	//Если до этого какой-нибудь звук был запущен, то присваеваем позицию,
	//на которой находится этот звук переменной
	if(_root.current_sound){
		_soundPos = _root.current_sound.position;
	}else{
		//Если никакого звука до этого не было запущено, то начинаем
		//проигрывание с 0
		_soundPos = 0;
	}
	trace("Начинаем проигрывать с позиции "+_soundPos);
	//Останавливаем предыдущий звук
	_root.current_sound.stop();
	//Включаем следующий звук. Деление на 1000 нужно потому, что свойство position задаётся в
	//миллисикундах, а в фукнцию start время старта проигрывания передаётся в секундах.
	new_sound.start(_soundPos/1000);
	//Запоминаем новый звук, в переменной current_sound, потому что теперь
	//он проигрывается
	_root.current_sound = new_sound;
}

Не поверите, но вот и всё. По-идее, у вас должна была получиться такая же работающая флешка, как и у меня, где при нажатии на одну из кнопок, начинал проигрываться звук с того места, на котором закончил играть предыдущий звук.

Если у вас что-то не получилось, то вы всегда сможете скачать исходник и посмотреть, как всё было реализовано.

Сама флешка | Исходник

Удачи вам =)

Аналог перетаскиваемого окна Windows

admin — Sun, 01 Mar 2009 03:19:18 +0300

Сегодня, по мотивам одного из вопросов, я публикую урок о том, как в Flash можно организовать функционал, подобный стандартным окнам в Windows.

Какие задачи решались

Итогом сегодняшнего урока будут MovieClip'ы, которые будут вести себя аналогично окнам Windows. Если быть точнее, то функции прототипов окна сведены к следующему:

1) При нажатии на «верхушку» окна и движении мышкой окно начинает перетаскиваться.
2) При нажатии на любую точку окна оно становится выше других окон.
3) При клике на иконку с изображением крестика, которая находится в правом верхнем углу, окно закрывается, то есть, исчезает и удаляется.

Что нам для этого будет нужно?

Конечно, в самом начале, нам нужно будет определиться как будут выглядеть наши окна и нарисовать всё необходимое для них. У меня окно выглядит примерно так:

Кстати, как вспомогательный элемент у меня в проекте используется кнопка, для добавления новых окон. Дизайн кнопочки нужно будет так же сделать.

Теперь можно приступать к коду.

Код

В последнее время, я стараюсь использовать внешние классы. Если вы ещё никогда не работали с внешними классами, то настоятельно рекомендую начать это делать. В внешних классах код писать гораздо удобнее, чем в кадрах временной шкалы, конечно, полностью избавиться от кода в кадрах не удастся, но большую его часть можно вынести во внешние файлы.

Кстати, писать код во внешних классах используя Flash не очень удобно, поэтому настоятельно рекомендую скачать и установить себе Flash Develop, лично я пользуюсь именно этой программой.

Логика программы будет разбита на несколько частей:

1) Код в первом кадре — сюда войдут всякие «технические» записи по поводу выравнивания и растягивания флешки, плюс функция создания новых окон и присваивание кнопке для создания окон, класса этой кнопки (тавтология — она и есть тавтология).

Stage.scaleMode = "noScale";
Stage.align = "T";
//Присваиваем кнопку «Создать окно» к классу Add_class
this.add_mc.__proto__ = Add_class.prototype;
this.add_mc.init();
//Функция, которая будет создавать окна на _root
function addWindow_func(){
	//Запоминаем, какой уровень на _root сейчас свободен, чтобы создать на нём клип
	//с окном
	var _newDepth:Number = _root.getNextHighestDepth();
	//Создаём клип с окном на уровне _newDepth. Так же, чтобы имена окон не повторялись,
	//присваиваем к имени дополнительно значение свободного уровня. Благодоря этому,
	//имя клипа с окном всегдабудет уникальным. Так же, при добавлении делаем клип с
	//окном прозрачным, присваивая свойству _alpha значение 0 (ноль)
	//Так же, обратите внимание на то, что свойства _x и _y задаются случайным образом
	//и будут принадлежать промежутку от 100 до 200.
	var _mc:MovieClip = _root.attachMovie("window_mc", "window"+_newDepth+"_mc", _newDepth, {_alpha: 0, _x: 100 + random(100), _y: 100 + random(100)});
	//Подключаем клип к классу
	_mc.__proto__ = Window_class.prototype;
	//Запускаем функцию init(), которая описана внутри класса Window_class
	_mc.init();
}
//Создаём первое окно
this.addWindow_func();

2) Класс кнопки для создания окон (Add_class.as) — я уже немного затронул этот класс чуть выше.

class Add_class extends MovieClip
{
	
	public function Add_class() 
	{
	}
	//
	function onRelease()
	{
		//Когда мы будем нажимать на кнопку add_mc, то будет вызываться функция add_func, которая будет
		//добавлять клип окна на _root
		_root.addWindow_func();
	}
	function onReleaseOutside()
	{
		this.onRollOut();
	}
	function onRollOver()
	{
		this._alpha = 100;
	}
	function onRollOut()
	{
		this._alpha = 75;
	}
	
	
}

3) Класс окон (Window_class.as) — в этом классе будут присутствовать функции по «показу» и «удалению» окна, по «выдвижению» окна на передний план, а так же все внутренние клипы («верхушка» окна, кнопка «закрыть» и фон окна) будут присвоены к своим классам.

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
class Window_class extends MovieClip
{
	//Это переменные, для обращения к клипам кнопки «закрыть» и верхушки окна
	public var header_mc:MovieClip;
	public var close_mc:MovieClip;
	public var fon_mc:MovieClip;
	//Это переменная объекта _tween
	private var _tween:Tween;
	//
	public function Window_class() 
	{
	}
	//
	function init()
	{
		//Запускаем функцию, которая сделает клип с окном видимым
		this.start_func();
		//Присваиваем клипы с кнопкой «закрыть» и верхушкой окна к своим классам
		this.header_mc.__proto__ = Window_Header_class.prototype;
		this.header_mc.init();
		this.close_mc.__proto__ = Window_Close_class.prototype;
		this.close_mc.init();
		this.fon_mc.__proto__ = Window_Fon_class.prototype;
		this.fon_mc.init();
		//
		this.start_func = start_func;
		this.end_func = end_func;
	}
	//Функция первого показа окна
	function start_func()
	{
		//Плавно показываем клип с окном
		this._tween = new Tween(this, "_alpha", false, this._alpha, 100, 0.1, true);
	}
	//Функция удаления окна
	function end_func()
	{
		//Это необходимо для того, чтобы предыдущая плавная анимация _alpha остановилась, если она
		//ещё не успела закончиться.
		this._tween.stop();
		//Плавно скрываем клип с окном
		this._tween = new Tween(this, "_alpha", false, this._alpha, 0, 0.1, true);
		//Когда клип станет полностью прозрачным, сработает событие onMotionFinished, тогда можно
		//будет удалить клип. Так как событие onMotionFinished принадлежит объекту _tween, то
		//чтобы удалить клип, который мы только что убрали в прозрачность, нам нужно будет обратиться
		//к свойству obj у объекта _tween. Свойство obj будет ссылаться на клип, который мы только что
		//увели в прозрачность. Поэтому запись this.obj.removeMovieClip(); равнозначна записи
		//window_mc.removeMovieClip();, где в качестве window_mc будет тот клип, который нам надо будет
		//удалить.
		this._tween.onMotionFinished = function()
		{
			this.obj.removeMovieClip();
		}
	}
	//Функция, которая будет «поднимать» клип с окном, на который нажали выше остальных объектов
	function toTop_func()
	{
		this.swapDepths(this._parent.getNextHighestDepth());
	}
}

4) Класс кнопки «закрыть» (Windows_Close_class.as) — здесь не будет никаких особых функций. Мы просто сделаем, чтобы при наведении на кнопку она становилась полностью видимой, а при уходе курсора с кнопки она становилась немного прозрачной. Так же, при нажатии на кнопку, будет вызываться функция «удаления» у родительского клипа, которым будет являться главный клип окна.

class Window_Close_class extends MovieClip
{
	
	public function Windows_Close_class() 
	{
	}
	//
	function init()
	{
		this.onRollOver = onRollOver;
		this.onRollOut = onRollOut;
		this.onRelease = onRelease;
		this.onReleaseOutside = onReleaseOutside;
	}
	//
	function onRollOver()
	{
		this._alpha = 100;
	}
	function onRollOut()
	{
		this._alpha = 75;
	}
	function onRelease()
	{
		//При нажатии будет вызываться функция end_mc у родительского клипа. Так как кнопка «закрыть»
		//находится внутри клипа с окном, то её родительским клипом будет клип с окном.
		this._parent.end_func();
	}
	function onReleaseOutside()
	{
		this.onRollOut();
	}
}

5) Класс «верхушки» окна (Window_Header_class.as) — это та часть, за которую можно «потянуть» окно. Исходя из этого, в этом классе будет описана функция нажатия и «отпускания» кнопки мышки, во время этих событий будет начинаться и заканчиваться перетаскивание окна. Так же, при нажатии на «верхушку», окно будет выдвигаться «вперёд».

class Window_Header_class extends MovieClip
{
	
	public function Window_Header_class() 
	{
	}
	//
	function init()
	{
		this.onPress = onPress;
		this.onRelease = onRelease;
		this.onReleaseOutside = onReleaseOutside;
	}
	//
	function onPress()
	{
		//При нажатии будет вызываться функция toTop_mc у родительского клипа. Так как клип «верхушки» окна
		//находится внутри клипа с окном, то её родительским клипом будет клип с окном.
		this._parent.toTop_func();
		this._parent.startDrag();
	}
	function onRelease()
	{
		this._parent.stopDrag();
	}
	function onReleaseOutside()
	{
		this.onRelease();
	}
	
}

5) Класс фона окна (Window_Fon_class.as) — фон окна нам необходим потому, что в стандартных Windows окнах при нажатии на любую часть окна, оно (окно) становится поверх других окон. Чтобы при нажатии на «верхушку» окна происходило «выдвижение» мы уже сделали, теперь осталось сделать, чтобы и при нажатии на другие части окна происходило то же самое. Для этого мы будем отлавливать события нажатии кнопки мышки над фоном окна onPress.

class Window_Fon_class extends MovieClip
{
	
	public function Window_Fon_class() 
	{
	}
	//
	function init()
	{
		//Делаем так, чтобы при наведении на клип курсор не превращался в руку
		this.useHandCursor = false;
		//
		this.onPress = onPress;
	}
	//
	function onPress()
	{
		//При нажатии будет вызываться функция toTop_mc у родительского клипа. Так как данный клип
		//находится внутри клипа с окном, то родительским клипом будет клип с окном.
		this._parent.toTop_func();
	}
	
}

Подытожим

После всего продеянного и написанного у вас должно было получиться нечто схожее с моим примером. Если у вас возникли какие-то проблемы, то всегда можно скачать исходники и покопаться в них.

Пример | Исходник

Ну и конечно, не стесняемся задавать вопросы в комментариях относительно того, что не смотря на исходники осталось «за кадром».

Удачного вам изучения Flash'а. Гуд лак =)