Аналог перетаскиваемого окна 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'а. Гуд лак =)