ActionScript 3.0. Урок 7-6. Динамическая графика

Начиная с Flash MX, ActionScript обладает библиотекой API для создания динамической векторной графики во флеш. Эта API библиотека состоит из таких методов как beginFill(), moveTo(), lineTo() и curveTo(), используемые внутри экземпляров MovieClip. В ActionScript 3 эти методы по-прежнему доступны, но они больше не используются с экземплярами MovieClip, или даже экземплярами DisplayObject, для этих целей. Вместо этого они используются с экземплярами Graphics (flash.display.Graphics).



Класс 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 добавляет некоторые новые методы, чтобы сделать рисование простых форм, наподобие прямоугольников и окружностей, немного еще более простым. Эти методы включают:

drawCircle
drawEllipse
drawRect
drawRoundRect
drawRoundRectComplex
Пример: Динамические рисунки, созданные с помощью 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.

// Call drawing functions drawing
// checkerboard and checkers
drawBoard();
drawCheckerRow(0, player2Color);
drawCheckerRow(1, player2Color);
drawCheckerRow(2, player2Color);
drawCheckerRow(5, player1Color);
drawCheckerRow(6, player1Color);
drawCheckerRow(7, player1Color);