Динамическое управление фильмами-символами

Z-сортировка экземпляров клипа

Изменение глубины расположения экземпляров фильмов-символов называют z-сортировкой. Почему z? Да потому, что глубину во Flash можно рассматривать, как третье измерение, Z-координату (вдобавок к X и Y ). В момент создания экземпляра клипа его глубина устанавливается при помощи duplicateMovieClip() или attachMovie(), а для динамического изменения глубины расположения клипов предназначен метод swapDepths() объекта MovieClip. C помощью этого метода можно "поменять глубинами" любые два фильма-символа либо переместить экземпляр на указанную глубину.

Для взаимного обмена глубинами двух экземпляров клипов используется следующий синтаксис:

movieClip1.swapDepths(movieClip2);

Если, например, movieClip2 располагался поверх movieClip1, то в результате выполнения этого скрипта они поменяются местами, и movieClip1 окажется над movieClip2.

Синтаксис перемещения экземпляра клипа (созданного до этого при помощи duplicateMovieClip() или attachMovie() ) на нужную глубину следующий:

movieClip1.swapDepths(нужнаяГлубина);

Метод swapDepths() прост в использовании, в то же время он позволяет создавать замечательные эффекты в приложениях и играх. В этом упражнении перетаскиваемыми два окна в нашем приложении для рисования, при помощи swapDepths() расположим нужное окно поверх прочего содержимого, а также назначим действия некоторым кнопкам.

1. Откройте файл draw2.fla из папки Lesson14/Assets.

В таком виде мы с вами оставили файл, с которым работали в предыдущем упражнении. В этом упражнении мы добавим кое-что в скрипт экземпляра клипа controller, а также поработаем с клипами-окнами.

2. Откройте панель Действия, выделите экземпляр клипа под именем window1 и добавьте такой скрипт:

onClipEvent (load) {
  this.gotoAndStop("color");
}

И window1, и window2 – экземпляры одного и того же клипа, только под разными именами. Этот скрипт будет направлять экземпляр window1 к кадру с меткой color сразу после загрузки фильма. В этом кадре имеется несколько кнопок, которые будут предназначены для выбора цвета линий при рисовании.

3. Выделите экземпляр клипа под именем window2 и добавьте в панель Действия следующий скрипт:

onClipEvent (load) {
  this.gotoAndStop("admin");
}

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

4. Двойным щелчком откройте клип window1 и перейдите к кадру с меткой color. К первой слева кнопке (в виде кончика карандаша) добавьте следующий скрипт:

on (release) {
  _parent.controller.currentColor = "7F6696";
}

Вы, вероятно, помните, что переменная currentColor (в экземпляре клипа controller ) хранит цвет рисуемых линий. Этот скрипт как раз присваивает переменной currentColor новое значение – шестнадцатеричный код цвета.

5. Поочередно (слева направо) выделяя остальные кнопки-карандаши, добавьте к ним скрипты:

Для второй кнопки:

on (release) {
  _parent.controller.currentColor = "FAC81C";
}

Для третьей кнопки:

on (release) {
  _parent.controller.currentColor = "E72638";
}

Для четвертой кнопки:

on (release) {
  _parent.controller.currentColor = "1091CB";
}

Для пятой кнопки:

on (release) {
  _parent.controller.currentColor = "1FA900";
}

Для шестой кнопки:

on (release) {
  _parent.controller.currentColor = "BC0077";
}

Скрипты те же самые, что и для первой кнопки, разнятся только значения цвета.

Теперь давайте запрограммируем перетаскивание окна.

6. Выделите прямоугольную оранжевую кнопку в верхней части этого окна а присоедините к ней следующий скрипт:

on (press) {
  startDrag (this);
  _root.controller.swap(_name);
}

Поскольку кнопка находится на монтажном столе клипа, изображающего окно, при нажатии кнопки начинается перетаскивание самого этого ( this ) окна.

Второе действие вызывает функцию (пока не написанную). Функция эта, под названием swap(), будет находиться в клипе controller, ее роль будет заключаться в изменении z-положения окна так, чтобы оно оказалось на самом верху. Функция при вызове смотрит переданное ей значение свойства _name (представляющее имя экземпляра) текущего фильма. Наш проект содержит два экземпляра одного и того же клипа – window1 и window2, поэтому кнопка будет работать следующим образом: если кнопка нажата в экземпляре window1, начинается перетаскивание этого экземпляра, и функции swap() передается значение "window1". Если же кнопка нажата в экземпляре window2, начинается перетаскивание этого экземпляра, и функции swap() передается значение "window2".

7. Добавьте к кнопке еще один скрипт:

on (release) {
  stopDrag ();
}

При отпускании кнопки процесс перетаскивания прекращается.

8. Вернитесь на основной монтажный стол. При открытой панели Действия выделите экземпляр клипа controller и добавьте в обработчик события load следующее действие:

topDog = "window1";

Для смены глубин размещения экземпляров window1 и window2 мы применим метод swapDepths(). Переменная topDog будет хранить имя того экземпляра, который расположен выше. При генерации фильма выше окажется window1, поэтому мы присваиваем переменной именно такое начальное значение.

9. Также в обработчик события load, добавьте описание функции:

function swap (name) {
  _root[name].swapDepths(_root[topDog]);
  topDog = name;
}

Назначение этой функции – поменять глубинами экземпляр клипа с именем, содержащимся в name (значение параметра, передаваемого функции) и экземпляр с именем, содержащимся в переменной topDog. После этого переменная topDog получает новое значение – это будет имя экземпляра, который теперь оказался сверху. На шаге 6 мы видели, что функции в качестве параметра передается свойство _name текущего фильма (это может быть либо window1, либо window2 ). Предполагая, что в некоторый момент переменная topDog имеет значение "window1", нажатие кнопки перетаскивания в window2 (при этом будет вызвана функция и ей передано значение "window2" ) приведет к такому выполнению функции:

function swap ("window2") {
  _root.window2.swapDepths(_root.window1);
  topDog = "window2";
}

10. Командой Управление > Проверить фильм (Control > Test Movie) запустите тест фильма. Попробуйте перетаскивать окна, менять цвет линий.

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

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

11. Закройте тестовый фильм и сохраните работу под именем draw3.fla.

Итак, мы с вами применили метод swapDepths() для перемещения на передний план нужного окна. Но проект еще не закончен! Мы должны запрограммировать очистку рабочей области рисования, а также возможность перетаскивания на нее картинок-шаблонов.