Рисуем мувиками в ActionScript 3.0

Этот пост является продолжением одного из предыдущих постов, в котором рассматривалось динамическое рисование мувиклипами средствами языка ActionScript 2.0. Теперь мы сделаем тоже самое, но уже на языке ActionScript 3.0, а в качестве среды разработки возьмём программу Adobe Flash CS5.5 (подойдут и другие версии, начиная с 3-й, но данный урок делался именно на 5.5).

Сперва сформулируем задачу. Чего же мы хотим? Мы хотим, чтобы после нажатия левой кнопки мышки (ЛКМ) каждое изменение координат курсора мышки сопровождалось добавлением на сцену флеш-ролика нового экземпляра определённого мувиклипа из библиотеки проекта. Для этого нам надо выполнить следующие два шага.

1. Создаём сам мувиклип.

Для начала рисуем заготовку будущего мувиклипа. Это может быть любой геометрический примитив, но не стоит его делать слишком большим. У меня он будет 20Х20 px. Затем выделяем получившуюся заготовку и жмём F8 на клавиатуре (как вариант, можно, при выделенной заготовке, перейти к пункту Модификация главного меню программы и выбрать команду Преобразовать в символ). Появится окно настроек преобразования в символ.

На картинке показано, как это окно выглядит в Adobe Flash CS5.5. В этом окне мы даём имя нашему будущему клипу - mc (под этим именем мувиклип будет хранится в библиотеке проекта). Обязательно выбираем тип мувиклип (фрагмент ролика). Точку регистрации желательно поместить в середину. Но самое важное - поставить галочку у пункта Экспорт для ActionScript и в поле ввода Класс ввести имя нашего будущего класса - Mc (скорее всего, программа уже скопировала в это поле имя нашего мувика - mc, но стоит изменить именно на Mc, так как имена классов принято писать с большой буквы). Все перечисленные настройки продемонстрированы на приведённом выше скриншоте.

Если всё сделали правильно, то жмём Ok и программа автоматически создаёт класс Mc. Мувик mc с рабочего стола теперь можно удалить, но он будет доступен для редактирования в библиотеке.

Если по каким-то причинам сделать перечисленные настройки не удалось или они были сделаны неправильно, а мувиклип всё же был создан и появился в библиотеке проекта, то настройки мувика следует изменить. Для этого идём в библиотеку и над нашим мувиком правым кликом мышки вызываем контекстное меню. В данном контекстном меню выбираем пункт Свойства. Появится рассмотренное ранее окно настроек. Редактируем настройки.

2. Добавляем код ActionScript 3.0.

Идём в панель Действия программы и вставляем туда следующий код:


/*
Переменная-флаг.
Если она имеет значение true, то рисование разрешено.
Если переменная имеет значение false, то рисование запрещено.
*/
var flag:Boolean = false;
/*
cont - это спрайт-контейнер, внутри которого мы и будем рисовать.
*/
var cont:Sprite = new Sprite();
cont.graphics.beginFill(0x333333,1);
cont.graphics.drawRect(0,0,550,400);
cont.graphics.endFill();
addChild(cont);
/*
Разрешаем рисование.
*/
cont.addEventListener(MouseEvent.MOUSE_DOWN,mDown);
function mDown(event:MouseEvent):void
{
	flag = true;
}
/*
Запрещаем рисование.
*/
cont.addEventListener(MouseEvent.MOUSE_UP,mUp);
function mUp(event:MouseEvent):void
{
	flag = false;
}
/*
Начинаем рисовать при зажатой ЛКМ.
*/
cont.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
	if (flag)
	{
		var mc:Mc = new Mc();
		cont.addChild(mc);
		mc.x = event.stageX;
		mc.y = event.stageY;
		event.updateAfterEvent();
	}
}

Конечно, надо предусмотреть возможность очистки контейнера от нарисованной ранее графики. То есть нужен "ластик". В качестве ластика может выступать кнопка или клавиша клавиатуры. Это уже по вашему желанию. Здесь гораздо важнее, каким кодом мы осуществим удаление мувиклипов из контейнера. А код очень простой:


while (cont.numChildren)
	{
		cont.removeChildAt(0);
	}

Я, например, сделал так, что при зажатой ЛКМ приложение рисует, а если отпустить ЛКМ, программа стирает ранее нарисованное (это не так и глупо, если учесть относительную ресурсоёмкость данного способа динамического рисования).


/*
Переменная-флаг.
Если она имеет значение true, то рисование разрешено.
Если переменная имеет значение false, то рисование запрещено.
*/
var flag:Boolean = false;
/*
cont - это спрайт-контейнер, внутри которого мы и будем рисовать.
*/
var cont:Sprite = new Sprite();
cont.graphics.beginFill(0x333333,1);
cont.graphics.drawRect(0,0,550,400);
cont.graphics.endFill();
addChild(cont);
/*
Разрешаем рисование.
*/
cont.addEventListener(MouseEvent.MOUSE_DOWN,mDown);
function mDown(event:MouseEvent):void
{
	flag = true;
}
/*
Запрещаем рисование и стираем ранее нарисованное.
*/
cont.addEventListener(MouseEvent.MOUSE_UP,mUp);
function mUp(event:MouseEvent):void
{
	flag = false;
	while (cont.numChildren)
	{
		cont.removeChildAt(0);
	}
}
/*
Начинаем рисовать при зажатой ЛКМ.
*/
cont.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
	if (flag)
	{
		var mc:Mc = new Mc();
		cont.addChild(mc);
		mc.x = event.stageX;
		mc.y = event.stageY;
		event.updateAfterEvent();
	}
}

Результат таков:

Вообще, в случае с ActionScript 3.0, использовать для рисования экземпляры класса MovieClip не очень разумно. Мувиклипы, конечно, имеют богатейший набор возможностей (которые нам не очень и нужны), но при этом они и более требовательны к ресурсам. Гораздо умнее в нашем случае воспользоваться услугами класса Sprite или класса Shape. Далее пример именно с использованием Shape.


var flag:Boolean = false;

var cont:Sprite = new Sprite();
cont.graphics.beginFill(0x333333,1);
cont.graphics.drawRect(0,0,550,400);
cont.graphics.endFill();
addChild(cont);

cont.addEventListener(MouseEvent.MOUSE_DOWN,mDown);
function mDown(event:MouseEvent):void
{
	flag = true;
}

cont.addEventListener(MouseEvent.MOUSE_UP,mUp);
function mUp(event:MouseEvent):void
{
	flag = false;
	while (cont.numChildren)
	{
		cont.removeChildAt(0);
	}
}

cont.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
	if (flag)
	{
		var shape:Shape = new Shape();
		shape.graphics.beginFill(0xffffff,1);
		shape.graphics.drawCircle(0,0,10);
		shape.graphics.endFill();
		cont.addChild(shape);
		shape.x = event.stageX;
		shape.y = event.stageY;
		event.updateAfterEvent();
	}
}

Просто скопируйте этот код в панель Действия вашего флеш-проекта. Ничего рисовать и помещать в библиотеку проекта не надо. Кроме всего прочего, данный код должен работать быстрее предыдущего варианта.

Автор: admin

Дата добавления: 2011-09-05

Рейтинг поста: 11