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. Всё остальное генерируется кодом. Пример того, что может получиться, представлен ниже:
Просто зажмите левую клавишу мышки и перетаскивайте её в зажатом состоянии по сцене флеш-ролика.
Способов много. Вот, например, один из них:
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; } } };
Результат:
Исходник тут - скачать исходник.