Создание интерактивных приложений в Adobe Flash

Рисование

Показывать лекцию целиком

Рисование

Материалы к лекции Вы можете скачать здесь.

ActionScript содержит команды, при помощи которых можно рисовать разные фигуры.

Создадим скрипт, реализующий мини-графический редактор (с возможностью рисования "кистью"). Для этого необходимо задать настройки рисования для линии, такие как толщина, цвет, прозрачность. Затем установить курсор в точку начала рисования и уже от нее рисовать линию. Рисование происходит по нажатию кнопки мыши, при отпускании – рисование прекращается:

var flag,.x,.y:Number;
this.graphics.lineStyle(1,0x0000ff,100);
stage.addEventListener(MouseEvent.MOUSE.UP,f1);
function f1(event:MouseEvent):void
{
  flag = 1;
}
stage.addEventListener(MouseEvent.MOUSE.DOWN,f2);
function f2(event:MouseEvent):void
{
  .x = event.stageX;
  .y = event.stageY;
  this.graphics.moveTo(.x,.y);
  flag = 0;
}
stage.addEventListener(MouseEvent.MOUSE.MOVE,f3);
function f3(event:MouseEvent):void
{
  if (flag == 0)
  {
    .x = event.stageX;
    .y = event.stageY;
    this.graphics.lineTo(.x,.y);
  }
}

Рассмотрим некоторые фрагменты данного программного кода:

  • В скрипте используются переменные flag, .x, .y. После ключевого слова var объявляются переменные, через двоеточие указывается их тип (после объявления типа возможно начальное присваивание переменным какого-то значения):

    var flag,.x,.y: Number;

    В процессе выполнения скрипта значение переменных может меняться. Так, переменные .x,.y в дальнейшем используются для хранения координат; в переменную flag будет заноситься "0", когда нажата левая кнопка мыши и "1", когда отпущена.

  • Стиль линии задается так: this.graphics.lineStyle (толщина, цвет, прозрачность); рисовать можно не только в на сцене, как в нашем примере, но и в любом клипе (для этого кодовое слово this надо поменять на имя экземпляра):

    this.graphics.lineStyle(1,0x0000ff,100);

  • Для того чтобы получать события от мышки, нужно символу (ролику, кнопке) добавить слушателя событий, но события будут приходить только тогда, когда мышка находится над этим символом. Для того чтобы получать события мышки в любом месте, нужно добавить Listener к stage (сцене):

    stage.addEventListener(MouseEvent.MOUSE.UP,f1);

  • Устанавливаем курсор (чертежное перо) в начальную точку рисования: this.graphics.moveTo (координата по Х, координата по У); координата по оси Х и У берется из текущих координат курсора (.x=event.stageX; .y=event.stageY): 
    .x = event.stageX;
.y = event.stageY;
this.graphics.moveTo(.x,.y);
  • Рисуем линию из текущей позиции чертежного пера до заданной точки: this.graphics.lineTo (координата по Х, координата по У); координата заданной точки по оси Х и У также берется из текущих координат курсора.
  • Команда ветвления используется для того, чтобы организовать рисование по нажатию кнопки мыши (в команде анализируется значение переменной flag): 
    .if (flag == 0)
  {
    .x = event.stageX;
    .y = event.stageY;
    this.graphics.lineTo(.x,.y);
  }

    • Продолжим работу над созданием графического редактора. Самостоятельно добавьте в рабочую область кнопку, дайте ей имя (например, Clear). Назначение данной кнопки – очистка экрана. В скрипт добавьте фрагмент кода:

    Clear.addEventListener (MouseEvent.CLICK,f4);
function f4 (event:MouseEvent):void
{
this.graphics.clear ();
this.graphics.lineStyle (5,0x0000ff,100);
}

    В приведенном фрагменте в программной строке this.graphics.clear() происходит удаление созданной ранее графики и сброс параметров стиля линии. Для того, чтобы пользователь смог снова рисовать на чистом экране, параметры стиля линии задаются еще раз.

    Краткие итоги лекции:

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

  • задать настройки рисования для линии, такие как толщина, цвет, прозрачность (this.graphics.lineStyle(1,0x0000ff,100));
  • установить курсор в точку начала рисования (this.graphics.moveTo(.x,.y));
  • от предыдущей точки до точки, координаты которой задаются, рисуется линия (this.graphics.lineTo(.x,.y));
  • при необходимости происходит удаление созданной ранее графики и сброс параметров стиля линии (this.graphics.clear()).
    •

    Ключевые термины

    Переменная

    Тип переменной

    Значение переменной

    Набор для практики:

    Вопросы

  • Перечислите последовательность действий для программной реализации рисования в ролике.
  • Назовите параметры стиля линии
  • При помощи какого приема можно организовать рисование линии по нажатию кнопки мыши и отмены рисования при ее отпускании?
    •

    Упражнения

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

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^