Делаем рисовалку по типу «Вконтакте-граффити».

Привет всем. Давайте сегодня отвлечемся от уроков и сделаем интересное и полезное приложение на основе изученного. А именно рисовалку, что-то вроде граффити Вконтакте.

Для начала создадим проект и немного поработаем над сценой (кликабельно).


Разделим сцену на три части:

• I. Панель инструментов. Здесь будут располагаться инструменты, параметры, вспомогательные кнопки.


• II. Панель отображения. Здесь будут располагаться вспомогательные надписи.


• III. Рабочее пространство, непосредственно для рисования.

Теперь перейдем к расстановке объектов на сцене. На панель I расположим, по порядку: кнопки "кисть", "линия", "ластик" (в каждом клипе во втором кадре — измененная картинка при наведении), компонент ColorPicker, компонент Slider, кнопку для выхода.
На панель II динамические поля для вывода текущего инструмента и координат курсора.
Важно правильно сделать рабочее поле. Сама рамка III — это пустое пространство, а остальная белая часть — это объект слоем выше.

Теперь назовем все объекты:


Также нужно стараться располагать отдельные части на отдельных слоях.
Теперь перейдем к главной части — написанию кода. В коде у меня будут расположены комментарии к различным частям приложения.

import fl.events.ColorPickerEvent;
import flash.geom.ColorTransform;
import fl.events.SliderEvent;

//Холст для рисования — он занимает то оставленное на сцене место.
var list:Sprite = new Sprite();
list.graphics.beginFill(0xFFFFFF);
list.alpha=0;
list.graphics.drawRect(150,100,500,400);
addChildAt(list,0);

//Слайдеры
style_slider.maximum=100; //максимальное и минимальное значения  
style_slider.minimum=1;
style_slider.value=Number(line_style.text); // текущее значение

//перечень инструментов
var tools:Array=new Array(line_btn,brush_btn,eraser_btn); /* В этот массив мы вносим все инструменты, сколько бы их ни было. При этом для него автоматически применятся все свойства, описанные в функции defaultF() далее. */

//выбор инструмента
out.text="Выберете инструмент";
defaultF();
var draw_id:Number=0; // текущий инструмент

brush_btn.addEventListener(MouseEvent.CLICK, brush_btnF); //кисть
function brush_btnF(e:MouseEvent):void {
	defaultF();
	draw_id=1;
}
line_btn.addEventListener(MouseEvent.CLICK, line_btnF); // линия
function line_btnF(e:MouseEvent):void {
	defaultF();
	draw_id=2;
}
eraser_btn.addEventListener(MouseEvent.CLICK, eraser_btnF); // ластик
function eraser_btnF(e:MouseEvent):void {
	defaultF();
	draw_id=3;
}

//Функция для панели инструментов. 
function defaultF():void {
	tools.forEach(toolsF); /* метод работы с массивом, позволяющий производить одно и то же действие со всеми элементами массива. */
	function toolsF(element:*, index:int, arr:Array):void {
		element.stop();
		//действие при наведении
		element.addEventListener(MouseEvent.MOUSE_OVER,select_toolF);
		function select_toolF(e:MouseEvent):void {
			element.gotoAndStop(2);
		}
		element.addEventListener(MouseEvent.MOUSE_OUT,unselect_toolF);
		function unselect_toolF(e:MouseEvent):void {
			element.gotoAndStop(1);
		}
	}
	draw_id=0;
}

//Кисть
var brush_active:Boolean=false;

list.addEventListener(MouseEvent.MOUSE_DOWN, brush_downF);
function brush_downF(e:MouseEvent):void {
	brush_active=true;
}
stage.addEventListener(MouseEvent.MOUSE_UP, brush_upF);
function brush_upF(e:MouseEvent):void {
	brush_active=false;
}
stage.addEventListener(Event.ENTER_FRAME, eventF); // главная EnterFrame функция.
function eventF(e:Event):void {
	line_style.text=style_slider.value.toString(); //обновляем вывод слайдера
	if (draw_id==1||draw_id==3) { //ластик и кисть — это по существу одно и то же
		out.text="Кисть";
		graphics.lineStyle(style_slider.value,main_color.selectedColor);
		if (draw_id==3) {
			out.text="Ластик";
			graphics.lineStyle(style_slider.value,0xFFFFFF);
		}
		if (brush_active) {
			graphics.lineTo(mouseX,mouseY);
		} else {
			graphics.moveTo(mouseX, mouseY);
		}
	}
	if (draw_id==2) {
		out.text="Линия";
	}
	if (mouseX>=150&&mouseY>=100&&mouseY<=500&&mouseX<=650) { /* вывод координат мыши в текстовое поле */
		coord.text=(mouseX-150).toString()+":"+(mouseY-100).toString();
	} else {
		coord.text="";
	}
}

//переменные для рисования линии
var line_step:Number=0;   //шаг рисования
var lineX:Number=0;   //первая координата по X
var lineY:Number=0;   //первая координата по Y

list.addEventListener(MouseEvent.CLICK, mouseF);
function mouseF(e:MouseEvent):void {
	if (draw_id==2) {
		graphics.lineStyle(style_slider.value,main_color.selectedColor);
		if (line_step==0) { // первый шаг —  запоминаем координаты начала отрезка
			lineX=mouseX;
			lineY=mouseY;
			line_step++;
			return;
		}
		if (line_step==1) { // соединяем начало отрезка с координатами мыши
			graphics.moveTo(lineX,lineY);
			graphics.lineTo(mouseX,mouseY);
			line_step--;
		}
	}

}

off_btn.addEventListener(MouseEvent.CLICK, offF); /* функция выхода. fscommand работает только при опубликованном *.exe файле.*/
function offF(e:MouseEvent):void {
	fscommand("quit");
}

fscommand("showmenu",false); // убрать стандартное меню флеш-плеера.

Вот и все. Протестируем?