Action Script 3. Урок 5. Рисование и addChild.

Всем привет, это очередной, 5-ый по счету урок по изучению Action Script 3  с нуля. Этот урок будет достаточно большим, потому что тема важная и практически всегда используется разработчиками Flash-приложений.


Урок 5. Рисование и метод addChild().

В этом уроке мы рассмотрим один из самых важных классов - это класс graphics, а также не менее значимый метод addChild.

Не все объекты в приложении, которыми мы управляем с помощью кода (например, изменяем координаты) находятся на сцене. А лучше, чтобы на сцене не было ничего. Однако объекты появятся после создания их программно. То есть мы даем задачу нарисовать объект, даем все необходимые параметры: цвет, размеры, координаты, указываем форму объекта. А затем мы просто добавляем этот объект на сцену с помощью метода addChild. Все просто, не правда ли?

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

var line:Sprite = new Sprite();

Запускаем, и видим, что на сцене ничего нет. Правильно, ведь мы еще ничего не нарисовали, а только подготовили контейнер для рисования.

Итак, мы создали новый объект Sprite, в который нам нужно помещать графику.
Начнем с самого простого объекта - нарисуем прямую, или линию.

line.graphics.lineStyle(2, 0x000000);
line.graphics.lineTo(stage.stageWidth, stage.stageHeight);

Обращаемся  к свойствам нашего Спрайта, а именно graphics.lineStyle - этот параметр показывает, какими свойствами будет обладать обводка будущего объекта, а именно: толщина, в нашем случае она равна 2, и цвет. Цвет определяется в знакомой шестнадцатеричной системе, однако перед шестью знаками необходимо прописать дополнительные знаки 0x, иначе эти шесть знаков будут определяться как число, а требуется именно цвет. В нашем случае цвет черный. Следует заметить, что черный цвет используется по умолчанию, поэтому его можно и не указывать.
Затем мы указываем в какой точке закончится линия, мы указали ширину и длину сцены, значит линия дойдет до правого нижнего угла. Начинается она по умолчанию в координатах (0;0).

Итак, осталось только добавить объект на сцену с помощью метода addChild. Добавляем строчку после всех свойств.

addChild(line);

Тестируем ролик, и видим, что на сцене появилась черная линия, пересекающая экран.



Однако кроме линии есть еще различные методы graphics,  позволяющие нарисовать круги, прямоугольники. Рассмотрим, как это делается.

Создаем спрайт, определяем свойства обводки, а затем добавляем еще один метод - beginFill, которое указывает начальную заливку объекта. Заменяем метод lineTo методом drawRect, что в переводе значит «нарисовать Прямоугольник». В скобках указывается по порядку: координата х, координата у, ширина прямоугольника и высота. Всего четыре обязательных параметра.

var box:Sprite = new Sprite();
box.graphics.lineStyle(2);
box.graphics.beginFill(0x0000CC);
box.graphics.drawRect(200,100, 100,150);
addChild(box);

Итак, мы указали цвет заливки синий, ширину 100 пикселей, высоту 150 пикселей, и координаты (200;100).

Тестируем ролик, получаем такой результат.

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

var circle:Sprite = new Sprite();
circle.graphics.lineStyle(2);
circle.graphics.beginFill(0x0000CC);
circle.graphics.drawCircle(100,100,50);
addChild(circle);

Теперь попробуем создать более сложные фигуры, например треугольники и многоугольники.
Мы будем использовать метод создания  линий, и метод lineTo, причем каждую сторону многоугольника мы будем рисовать пошагово, прыгая от угла к углу.

var figure:Sprite = new Sprite();
figure.graphics.lineStyle(2);
figure.graphics.beginFill(0x0000CC);
figure.graphics.moveTo(200,150); // Это место начала рисования линии
figure.graphics.lineTo(400,150);
figure.graphics.lineTo(500,250);
figure.graphics.lineTo(400,350);
figure.graphics.lineTo(200,350);
figure.graphics.lineTo(100,250);
figure.graphics.endFill();
addChild(figure);

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

Основы рисования мы разобрали, теперь попробуем соединить их с тем, что мы изучили ранее.

Создадим окружность и заставим ее двигаться.

var circle:Sprite = new Sprite();
circle.graphics.lineStyle(2);
circle.graphics.beginFill(0x0000CC);
circle.graphics.drawCircle(100,100, 75);
addChild(circle);

stage.addEventListener(Event.ENTER_FRAME, goF);
function goF(e:Event):void {
 circle.x+=10;
}

Все работает, все здорово.

Теперь, на основе этой теории и простых  примеров, попробуем создать небольшое приложение - рисовалку.

var lineStart:Boolean=false; // Переменная для рисования линии

graphics.lineStyle(2);
graphics.moveTo(mouseX,mouseY);

stage.addEventListener(MouseEvent.MOUSE_DOWN, startF);
function startF(e:MouseEvent):void {
 lineStart=true;
}

stage.addEventListener(MouseEvent.MOUSE_UP, stopF);
function stopF(e:MouseEvent):void {
 lineStart=false;
}

stage.addEventListener(Event.ENTER_FRAME, drawF);
function drawF(e:Event):void {
 if (lineStart) {
 graphics.lineTo(mouseX,mouseY);
 } else {
 graphics.moveTo(mouseX, mouseY);
 }
}

Мы создаем некую переменную типа Boolean(то есть ее значение либо false, либо true), которая отвечает за рисование. Мы создаем линию, и если эта переменная  - true, то рисуем ее, перемещая к курсору, а если false, то просто перемещаем без рисования. А меняем ее значение, исходя из события нажатия и отпускания кнопки мыши.

Результат:


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

Теперь рассмотрим последний пример.

var count:Number=0;
var timer:Timer=new Timer(100,100);
timer.start();
var rectX:Number=13;
var rectY:Number=20;
timer.addEventListener(TimerEvent.TIMER, createF);
function createF(e:Event):void {
 count++;
 var block:Sprite=new Sprite;
 block.graphics.lineStyle(2,0x000000);
 block.graphics.beginFill(Math.random()*0xFFFFFF);
 block.graphics.drawRoundRect(rectX, rectY, 30, 20, 5, 5);
 addChild(block);
 block.name = "block_"+count;
 rectX+=55;
 if (rectX>=stage.stageWidth-13) {
 rectX=13;
 rectY+=40;
 }
}

Итог:


При помощи таймера на поле создается 100 объектов, 30х20 пикселей, причем заполняют экран не выходя за рамки ширины. Цвет у них определяется случайным образом, а сами они представляют собой прямоугольники со скругленными углами (для этот надо указать метод drawRoundRect,  и в свойствах указать еще ширину и высоту скругления углов). Также каждому объекту дается порядковое имя типа block_1, block_2 и так далее.

Итак, этот большой воскресный урок подошел к концу, кто все выполнил - молодец. Всем спасибо.