Рисование линий (урок 2)

В прошлом уроке у нас получилась простенькая флешка с возможностью рисования черной линии во флеше. В этом уроке я научу Вас изменять цвет, размер и прозрачность линии.

1. Для начала нам понадобится исходник, полученный в результате прошлого урока, если у Вас что - то не получилось, можно скачать исходник тут.

2. Из панели инструментов "компоненты" ("components") перетащим в нашу флешку ColorPicker и дважды Slider:

3. Для ColorPicker(а) присвоим имя cp, одному слайдеру - sizeSlider, а другому - opacitySlider. Так же стоит как - нибудь подписать их, чтобы было понятно, что один служит для изменения размера линии, а второй - для изменения прозрачности.
4. Теперь нужно установить максимальные и минимальные значения для слайдеров, указать их шаг и т.д.

opacitySlider должен иметь значения в диапазоне от 0 (полная прозрачность) до 1 (абсолютная непрозрачность), цена деления пусть будет = 0,1 , а минимальный шаг - 0, 05, при этом значение по умолчанию лучше поставить = 1 (полная непрозрачность). Установить эти параметры нужно в панели "параметры":

Аналогично выставляем значения и для sizeSlider(а). Только минимум пусть будет = 1, максимум - 21, шаг - 1, цена деления - 2, а начальное значение - 12.

5. Теперь нужно привязать наши компоненты непосредственно к свойствам рисуемой линии, для этого в скрипте находим строчку :

this.graphics.lineStyle(12,0,1);

и заменяем ее на такую:

this.graphics.lineStyle(this.sizeSlider.value, this.cp.selectedColor, this.opacitySlider.value);

6. После строк

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing); //Если мышь нажата, начинает рисовать
stage.addEventListener(MouseEvent.MOUSE_MOVE, drawIt); // При движении мыши рисует линию
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing); // Если мышь отпущена, прекращает рисовать

вставляем строчки:

this.cp.addEventListener(Event.CHANGE, changeLineStyle);
this.sizeSlider.addEventListener(Event.CHANGE, changeLineStyle);
this.opacitySlider.addEventListener(Event.CHANGE, changeLineStyle);

и в конце кода добавляем функцию "changeLineStyle" :

function changeLineStyle (event:Event) : void {
this.graphics.lineStyle(this.sizeSlider.value, this.cp.selectedColor, this.opacitySlider.value);
}

7. Итак, полный листинг скрипта выглядит теперь так:

// Переменная drawing будет определять, рисовать ли линию в данный момент.
var drawing:Boolean = false;

// Присвоим ролику события
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing); //Если мышь нажата, начинает рисовать
stage.addEventListener(MouseEvent.MOUSE_MOVE, drawIt); // При движении мыши рисует линию
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing); // Если мышь отпущена, прекращает рисовать

this.cp.addEventListener(Event.CHANGE, changeLineStyle);
this.sizeSlider.addEventListener(Event.CHANGE, changeLineStyle);
this.opacitySlider.addEventListener(Event.CHANGE, changeLineStyle);

function startDrawing(event:MouseEvent):void{
this.graphics.lineStyle(this.sizeSlider.value, this.cp.selectedColor, this.opacitySlider.value); //Линия имеет ширину, прозрачность и цвет, равную положениям компонентов
this.graphics.moveTo( mouseX, mouseY);//Ставим "начало" линии в точку положения курсора
drawing = true;//Начинаем рисовать
}

function drawIt (event:MouseEvent){
if(drawing){//Проверка переменной drawing
this.graphics.lineTo(mouseX,mouseY);//Линия ведется к новой координате
}

}

function stopDrawing (event:MouseEvent) :void {
drawing = false;//Прекращаем рисовать
}

function changeLineStyle (event:Event) : void {
this.graphics.lineStyle(this.sizeSlider.value, this.cp.selectedColor, this.opacitySlider.value);//Линия меняет ширину, прозрачность и цвет, в зависимости от положения компонентов
}

8. Жмем Контр+Ентер и получаем приблизительно такой результат:

Если что- то не вышло, тут можно скачать исходник...