Сегодня, по мотивам одного из вопросов, я публикую урок о том, как в 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'а. Гуд лак =) |
Очень полезная штука, огромное спасибо за урок, но возникла несколько вопросов.
1. когда запускаю флешу, сразу же появляться окошко, как от этого избавиться.
2. возможно ли подгружать непосредственно в окошко данные из вне, как это реализуется?
3. можно ли прикрутит к окошку скролинг?
vse tip top ia vrode ponel kak delat
no pochemy ishodnik ne rabotaet?
a tak yrok polezen
spasibo!!!
Исходник рабочий, возможно у вас стоит Flash ниже версии CS3.
Я прочитал проблему. Непонятно почему не закрывалось окно, но у меня работает с таким кодом
removeMovieClip(this);
Спасибо, круто! Так можно и операционку на флеше замутить)
Спасибо! Полезно!