Перетаскиваемое окно во Flash




Главная > Уроки > Action script 3.0 > Перетаскиваемое окно во Flash

Перетаскиваемое окно во Flash

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2012-12-07

Создание окон во Flash

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


Что нам предстоит сделать


Итак, наш результат будут MovieClip'ы, которые по свойствам будут почти такие же как окна Windows. А вот в чем же они будут похожи:
1) Перетаскивание окна, таким же образом как в оригинале, по клике на верхушку.
2) После нажатия на окно оно становиться самое высокое, то есть накладывается поверх других окон.
3) Удаление по клику на крестик, который таким же образом находиться в правом верхнем углу.


Что нам потребуется?

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

Для создании окон, у меня сделана кнопка с простеньким дизайном. При клике по этой кнопки у нас будет создаваться наше окно.

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

Код

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

Структура будет разбита на несколько частей:

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

Stage.scaleMode = "noScale";
Stage.align = "T";
//Как я уже говорил это присвоение класса «Создать окно» Add_class
this.add_mc.__proto__ = Add_class.prototype;
this.add_mc.init();
//создание окна
function addWindow_func(){
	//запоминаем свободное место
	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();
	}
	
}

6) Класс фона окна (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();
	}
	
}

Итог

Все, готово! Надеюсь вам был полезен данный урок. Подписывайтесь на нас.

Исходник: скачать.

Просмотров: 1682


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


 1