Анимация и интерактивность Drawing API

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

В прошлых версиях Flash для создания графики в режиме run-time было не обойтись без предопределенных символов и манипуляций ими с помощью кода. Разумеется, вы могли взять рисунок из Library и делать с ним интересные вещи, но вы были сильно ограничены в возможности создавать полезные, динамичные рисунки, не нарисовав их перед этим вручную. Один из первых проектов, которые создают все пользователи Flash - это программа для рисования, однако быстро становится ясно, что на площади 100х100 пикселей с помощью тонкой линии и дубликатов фильмов можно нарисовать не слишком много интересного.

Теперь Flash MX Macromedia предоставляет возможность создания графики в режиме run-time, и эта возможность уникальна (да, громко сказано, однако нигде больше создание динамических рисунков не осуществляется именно так, и именно этому посвящена вся данная лекция).

С использованием рисования API (Application Programming Interface) и новых методов фильмов createEmptyMovieClip и createTextField пользователи Flash теперь могут программировать и создавать все, что угодно, начиная с кнопок и форм и заканчивая приложениями для рисования и целыми интерфейсами, без предварительного ручного рисования. Этому будут посвящены следующие несколько лекций.

Рисование линий с помощью программирования

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

• lineStyle устанавливает визуальные параметры линии, такие как высота, цвет и интенсивность.
• moveTo перемещает "карандаш" на новые координаты рабочего стола без рисования линии.
• lineTo рисует прямую линию от текущей позиции карандаша в заданные координаты, а curveTo создает кривую линию к координатам данной фиксированной точки посредством искривления линии с помощью изменения координат контрольной точки.
• Наконец, beginFill и endFill являются выражениями для начала и окончания заливки цветом фигур, а clear удаляет заливку.

  Осталась еще одна команда, которой мы пока не касались - beginGradientFill. Далее в этой лекции мы рассмотрим ее.

  Итак, выполним небольшое упражнение с использованием рисования API для создания линий различного размера и цвета.

Беспорядочные линии

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

1. Создайте новый фильм и назовите слой по умолчанию именем actions. Откройте панель Actions и введите следующий код в кадр 1.

   pos = {x:0, y:0}; 
   stageWidth = Stage.width; 
   stageHeight = Stage.height;

   Эти три строки инициализируют переменные для нашего эксперимента. Сначала мы создадим новый объект с именем pos, содержащий параметры x и y, которые будут нашими переменными координатами на протяжении всего фильма. Затем указываем параметры нового объекта Stage и записываем их значения в переменные. Если не сделать этого в начале, эти значения смогут изменяться в течение эксперимента, и строки будут рисоваться вне области рабочего места.

   Учтите, что при объявлении новых массивов или объектов я использую не конструктор new, а быстрое объявление. Поэтому новым пустым массивом или пустым объектом в коде будут, соответственно:

   myArray = [];
   myObject {};

   Все работает точно так же, как приведенное ниже объявление объектов и массивов.

   myArray = new Array ();
   myObject = new Object();

   Наше объявление pos в шаге 1 может быть записано так.

   pos = new Object();
   pos.x = 0;
   pos.y = 0;

   Но более удобной для чтения и краткой оказалась запись в одну строку, в особенности для объектов и массивов с ограниченным числом индексов или параметров. Кроме того, изменение имени объекта (по крайней мере, в данном инстансе) требует изменения одной строки, а не трех. Независимо от формы, которую вы выберете, все сводится к стилю программирования и вашим предпочтениям.

   Я также не объявляю переменные с помощью var, если они не появляются в функциях, а делаю это лишь для отведения для них места внутри функции. Во Flash нет необходимости использовать var для объявления переменной. Разница в том, что при использовании этого выражения в функции ограничивается отводимое для переменной место. Лучше никогда не вводить лишний код!

   К слову: дополнительный код необходим в другой области, особенно если вы избрали сокращенное программирование - это комментарии. Всегда добавляйте в код комментарии во все места, где может возникнуть хоть малейшая неясность. Позднее вы поблагодарите за это самого себя. (В коде этих лекций комментарии не включены, так как к каждому упражнению есть сопроводительный текст. Файлы FLA с комментариями могут быть найдены на прилагаемом к книге компакт-диске.)
2. Теперь перейдем к рассмотрению функции рисования. Под предыдущими тремя строками введите следующий код.

   placeLine = function () {
     var thickness = Math.ceil(Math.random()*4);
     var lineColor = Math.floor(Math.random()*16777215);
     this.lineStyle(thickness, lineColor, 80);
     pos.x = Math.random()* stageWidth;
     pos.у = Math.random()* stageHeight;
     this.lineTo(pos.x, pos.y); 
   };

   Какие действия он выполняет? Сначала здесь устанавливается локальная переменная thickness для случайного числа между 1 и 4 включительно. Math.random будет возвращать число с плавающей точкой (в основном - десятичные дроби) между 0 и 1, которое будет умножаться на 4. Math.cell является методом округления, который будет округлять это десятичное число до его ближайшего целого значения. Далее, lineColor присваивается случайный цвет из 16 миллионов доступных. Math.floor округляет это число до ближайшего целого значения. Наконец, функция устанавливает степень прозрачности линии на 80%. Все это передается в виде параметров методу lineStyle.

   Возможно, вы удивитесь, что можно отправлять метод рисования в десятичном виде, в то время как по правилам полагается отправлять шестнадцатеричное число. Причиной этому является то, что при вводе 0x перед шестнадцатеричным значением в коде Flash автоматически переводит это значение в его десятичный эквивалент. Попробуйте ввести trace (0xFF) ; в пустой фильм и вы увидите, что Flash возвратит значение 255. В нашем коде выше 16777215 является десятичным эквивалентом числа 0xFFFFFF, что соответствует белому цвету. Посредством выбора случайного целого числа между 0 и 16777215 мы можем присваивать случайный цвет из имеющегося диапазона цветов.

   Далее в функции placeLine мы устанавливаем новые координаты посредством поиска случайного числа в диапазоне чисел, соответствующем разрешению экрана. Установив новую позицию, рисуем линию. Имейте в виду, что мы опять не используем метод moveTo, поэтому каждый раз при вызове этой функции линия будет прорисовываться от точки, в которой заканчивается предыдущая линия. Карандаш остается активным.
3. Переходим к последнему шагу. Введите:

   this.onEnterFrame = placeLine;

   Очень удобно иметь возможность динамически присваивать управляющие элементы! Это инстанс, в котором сохраняются некоторые дополнительные шаги, когда нам необходимо повторно выполнять код. Во Flash 5 нужно было создавать пустой фильм для запуска всего кода при событии onEnterFrame, или же устанавливать цикл кадра на главной точке временной диаграммы. Теперь можно присваивать управляющий элемент события onEnterFrame самой главной точке временной диаграммы! В каждом кадре фильма будет вызываться placeLine, что обеспечит беспрепятственную работу цикла.
4. Запустите фильм и наслаждайтесь результатом рисования API с использованием случайных значений! Возможно, это не самый эффектный результат программирования с участием случайных значений, однако довольно удобно с помощью менее чем десяти строк создать подобный эффект без предварительного рисования.