Класс Graphics теперь используется для содействия динамическому рисованию. Экземпляры этого класса доступны в качестве графических свойств внутри классов, которые позволяют рисовать в них динамически. Эти классы включают:

• Shape
  Sprite
  MovieClip

// Create a blue triangle with a red
// outline within the current timeline
graphics.lineStyle(2, 0xFF0000);
graphics.beginFill(0x0000FF);
graphics.moveTo(50, 0);
graphics.lineTo(100, 100);
graphics.lineTo(0, 100);
graphics.endFill();

Когда внутри этих экземпляров для объекта Graphics используются методы рисования, динамические рисунки создаются внутри слоя рисования, расположенного внутри этих объектов. Для классов Sprite и MovieClip этот слой рисования существует под объектами-потомками внутри их таблицы отображения. Не существует способа рисовать динамические векторы над потомками экземпляра Sprite или MovieClip.

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

Пример: Динамические рисунки, созданные с помощью ActionScript

В этом примере используется векторная библиотека рисования API для создания шахматной доски с помощью ActionScript. В нем будет использовано два новых метода API, drawRect и drawCircle.

Шахматные доски не так просты, так как они в клеточку. Это означает, что любая другая клетка на шахматной доске – противоположного цвета, чем смежная с ней. В ActionScript может использоваться модульный, или mod, оператор (%), чтобы помочь определить, на каком цвете основаны координаты x и y на доске. Оператор пригодится при создании шахматной доски и рисовании каждой из клеток доски.

Основная идея здесь заключается в том, чтобы сгенерировать изображение шахматной доски на основной временной шкале, а затем добавить поверх данного изображения набор шашек, которыми можно играть в шашки. Хотя в данном примере к этим шашкам не будет привязано никакого взаимодействия, оно может быть сделано немного позже, поэтому каждая шашка будет помещена в свой собственный экземпляр Sprite при добавлении на доску, позволяя каждой шашке, действовать независимо друг от друга.

Шаги:

1.В исходных файлах откройте файл DrawingAPICheckerBoard.fla в директории DisplayObjects. Этот файл состоит из одного пустого слоя под названием ActionScript.
2. Выделите первый кадр на слое ActionScript и откройте панель Actions.

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

3. Добавьте следующий код на панель Actions.

// Set up some variables
var player1Color:uint = 0x000000;
var player2Color:uint = 0xFF0000;
var spaceSize:Number = 40;
var checkerSize:Number = 30;

Далее мы определим функцию для рисования доски. В ней будет использоваться два цикла for для прохождения через всю доску и рисования каждой клетки с помощью библиотеки API, основанной на размере клетки. Правильный цвет клетки можно определить, используя оператор mod с координатами на сетке шахматной доски (spaceX и spaceY).
 
4. Добавьте следующий скрипт на панель Actions.

// Draws the checkerboard
function drawBoard():void {
 var currColor:uint;
 var spaceX:int;
 var spaceY:int;
 
 // loop through x and y coordinates of board
 for (spaceX = 0; spaceX < 8; spaceX++){
  for (spaceY = 0; spaceY < 8; spaceY++){
  
   // alternate colors using modulous
   currColor = (spaceX%2 != spaceY%2) ? player1Color : player2Color;
   
   // draw square in graphics object

   // this will be drawn in the current timeline
   graphics.beginFill(currColor);
   graphics.drawRect(spaceX*spaceSize, spaceY*spaceSize, spaceSize, spaceSize);
   graphics.endFill();
  }
 }
}

Теперь может быть определена функция рисования шашек. Чтобы немного упростить процесс рисования большого количества шашек, можно использовать эту функцию для рисования целого ряда. Каждая шашка нарисована в спрайте, а этот спрайт добавлен в активную таблицу отображения (текущей временной шкалы), поэтому он может быть виден на экране.
 
5. Добавьте следующий скрипт на панель Actions.

// Draws a row of checkers on the checker
// board. Each checker is in it's own Sprite
function drawCheckerRow(rowNumber:int, playerColor:uint):void {
 var spaceX:int;
 var checkerOffset:Number = spaceSize/2;
 var checkerRadius:Number = checkerSize/2;
 var checker:Sprite;
 
 // loop through each column in the row
 // skipping every other column
 for (spaceX = (rowNumber + 1)%2; spaceX < 8; spaceX += 2){
 
  // create a new Sprite for the checker
  checker = new Sprite();
  checker.x = spaceX*spaceSize + checkerOffset;
  checker.y = rowNumber*spaceSize + checkerOffset;
  
  // draw checker in checker sprite's graphics
  checker.graphics.lineStyle(2, player2Color);
  checker.graphics.beginFill(playerColor);
  checker.graphics.drawCircle(0, 0, checkerRadius);
  checker.graphics.endFill();
  
  // be sure to add it to the display list
  addChild(checker);
 }
}

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

6. Добавьте следующий скрипт на панель Actions.

7. После добавления кода проверьте свой клип. Вы должны увидеть следующее.

Рисунок: Динамически нарисованная шахматная доска

Включение методов drawRect и drawCircle по-настоящему сделало этот процесс намного проще в ActionScript 3. В ActionScript 2 вам бы пришлось рисовать каждую линию или кривую отдельно, или создать свои собственные функции, которые бы вели себя как drawRect и drawCircle.

• Примечание: работа с объектами отображения
• 
  
• В уроках с 7-1 по 7-6 были рассмотрены только основы использования объектов отображения и их характеристики. Существует много других важных тем, относящихся к объектам отображения, которые более детально будут рассмотрены в последующих уроках.