Динамическое рисование

I-часть. Рассматриваем основные методы динамического рисования в ActionScript 2.0.

II-часть. Практический пример динамического рисования.

III-часть. Простая "рисовалка" на AS 2.0.

Итак, подведём некоторые итоги...

Основные методы динамического рисования во флеш:

lineStyle(толщина,цвет,прозрачность); - задаёт стиль обводки;

beginFill(цвет,прозрачность); - задаёт настройки для заливки;

endFill(); - завершает заливку;

moveTo(x,y); - создаёт исходную точку рисования;

lineTo(x,y); - проводит линию из исходной точки в заданную (указанная в параметрах);

curveTo(параметры); - рисует кривую;

clear(); - удаляет программную графику.

Примечание:

1.) Толщина обводки - это целое число от 0 до 255.

2.) Прозрачность измеряется в процентах от 0 (полная прозрачность) до 100 (полная непрозрачность).

3.) Цвет в ActionScript - это шестнадцатиричное число, которое начинается с "0x", например:

0x000000 - чёрный;

0xffffff - белый;

0xff0000 - красный.

4.) Флеш-ролики имеют специфическую систему координат:

Система координат в флеш-ролике

Точка отсчёта координат (0,0) в флеш-ролике находится в верхнем левом углу видимой области флеш-ролика.

Для того, чтобы нарисовать линию толщиной 5 px и прозрачностью 100%, которая идёт из точки 100,100 в точку 450,100 нам понадобится следующий код ActionScript 2.0:

_root.createEmptyMovieClip("mc",0); mc.lineStyle(5,0x000000,100); mc.moveTo(100,100); mc.lineTo(450,100);

Зачем нужен метод createEmptyMovieClip()? Дело в том, что этот метод создаёт пустой MovieClip, в котором мы и будем рисовать. Через данный MovieClip очень удобно в дальнейшем управлять динамически созданной графикой. Сам метод createEmptyMovieClip() имеет следующие параметры:

createEmptyMovieClip("имя_создаваемого_MovieClip-а", номер_слоя_на_котором _будет_располагаться_MovieClip);

В следующем примере мы с помощью методов beginFill() и endFill() рисуем прямоугольник и заливаем его серым цветом:

_root.createEmptyMovieClip("mc",0); mc.lineStyle(5,0x000000,100); mc.beginFill(0xcccccc,100); mc.moveTo(100,100); mc.lineTo(450,100); mc.lineTo(450,300); mc.lineTo(100,300); mc.endFill();

С помощью методов программного рисования можно создать (и уже создано) множество интересных и оригинальных эффектов и флеш-приложений. Именно благодаря методам динамического рисования в своё время широкое распространение в сети получили разнообразные флеш-рисовалки. Простую "рисовалку" реализовать под силу даже новичку.

Код простой рисовалки на ActionScript 2.0:

/* создаём пустой мувик с именем mc */ _root.createEmptyMovieClip("mc", 0); /* создаём переменную flag; если flag имеет значение true, то мы можем рисовать, а если flag имеет значение false - нет */ flag = false; /* если мы зажали ЛКМ, то переменная flag принимает значение true и мы начинаем рисовать */ onMouseDown = function () { flag = true; mc.lineStyle(10, 0x333333, 50); mc.moveTo(_xmouse, _ymouse); }; /* если мы отпустили зажатую ранее ЛКМ, то переменная flag принимает значение false и мы завершаем рисование */ onMouseUp = function () { flag = false; }; /* если переменная flag имеет значение true, то каждый раз при изменении положения курсора мышки, мы рисуем линию к новым координатам курсора мышки */ onMouseMove = function () { if (flag) { mc.lineTo(_xmouse, _ymouse); updateAfterEvent(); } }; /* стираем всё то, что нарисовали внутри мувика mc */ btn.onPress = function(){ mc.clear(); }

Для данной рисовалки надо заранее создать кнопку "Стереть" с именем btn. Всё остальное генерируется кодом. Пример того, что может получиться, представлен ниже:

Просто зажмите левую клавишу мышки и перетаскивайте её в зажатом состоянии по сцене флеш-ролика.

Автор: admin

Дата добавления: 2011-07-13

Просмотров: 10571

Рейтинг поста: +21-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-11-05

Способов много. Вот, например, один из них:

var mc:MovieClip; var flag:Boolean = false; container.onPress = function() { mc = container.createEmptyMovieClip("mc", container.getNextHighestDepth()); flag = true; mc.lineStyle(10, 0x333333, 50); mc.moveTo(_xmouse, _ymouse); }; container.onRelease = function() { flag = false; }; container.onMouseMove = function() { if (flag) { mc.lineTo(_xmouse, _ymouse); updateAfterEvent(); } }; btn_1.onPress = function() { var depths:Number = container.getNextHighestDepth() - 1; for (var i:Number = depths; i>=0; i--) { container.getInstanceAtDepth(i).removeMovieClip(); } }; btn_2.onPress = function() { var depths:Number = container.getNextHighestDepth() - 1; for (var i:Number = depths; i>=0; i--) { if (container.getInstanceAtDepth(i)) { container.getInstanceAtDepth(i).removeMovieClip(); break; } } };

Результат:

Исходник тут - скачать исходник.

Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2013-11-02
Спасибо огромное за урок.
Скажите пожалуйста, а как сделать так, чтобы отменялось только последнее действие, а не производилась полная очистка.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-12-15
Есть дополнительные настройки у метода lineStyle, но, честно говоря, как-то слабо помогают.

Можно, конечно, добавить фильтр размытия:

import flash.filters.GlowFilter;
_root.createEmptyMovieClip("mc", 0);
mc.filters = [new GlowFilter(0x333333, 100, 10, 10, 10, 1)];

и далее по тексту...

Но этот способ довольно ... ресурсоёмкий.
Комментатор
Комментарий добавил(а): Виктор
Дата добавления: 2012-12-15
Здравствуйте. Отличный урок. Огромное спасибо. Подскажите пожалуйста. Можно ли дать линии какое-нибудь сглаживание? Очень буду признателен если ответите мне на victorchel@bk.ru
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-07-10
Очень рад, если урок оказался вам полезным.
Комментатор
Комментарий добавил(а): Alex_M
Дата добавления: 2012-07-10
Супер! Спасибо!!!
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика