ActionScript 3.0. Урок 8-2. Пример реагирования на мышь

Большая часть пользовательского взаимодействия во флеш вращается вокруг событий мыши. Этот пример демонстрирует, как события мыши могут использоваться с векторным API рисованием, чтобы сделать приложение для рисования. Оно будет основано на щелчках мышью, а также на перетаскивании курсора мыши по экрану (mouseMove), чтобы делать штрихи на полотне.
Чтобы использовать это приложение, пользователь сперва выберет цвет из палитры цветов, расположенной с левой стороны экрана, затем щелкнет по нему и перейдет в область для рисования в правой части экрана. По мере перемещения мыши по экрану, на полотне будут появляться линии выбранного цвета. Для очистки экрана от текущей картинки можно будет щелкнуть по кнопке Clear, расположенной под палитрой цветов.

Что касается цветов, в этом примере в некоторой степени будут использоваться «быстрые клавиши». Вместо определения переменных для цвета при каждом выборе цвета, будет использоваться массив, в котором будут храниться все используемые значения цвета. Эти цвета потом будут привязаны к выбираемым цветным клипам путем сопоставления позиции клипа в таблице отображения цвету в данной позиции в массиве. Реальная выгода здесь для всех ленивцев заключается в том, что нет необходимости привязывать имена экземпляров к каждому источнику, так как каждый источник будет иметь ссылку и привязку к цвету посредством getChildAt(). Их позиции внутри таблицы отображения будут использоваться как для привязки цветов, так и для извлечения цвета, когда он выбран.
Примечание: Динамическое создание
Процесс создания выборов цвета также может быть сделан динамически, что предотвратит необходимость привязки имен экземпляров, по крайне мере, в условиях разработки настройки. Тем не менее, в этом примере выборы добавляются на экран вручную, а использование их индекса внутри таблицы отображения устраняет необходимость обращаться к ним по имени.

Так как на экране существуют другие элементы, этим выбираемым цветным клипам потребуется своя собственная таблица отображения. Для этого, был создан клип colorCollection, чтобы содержать их. Каждый выбор также содержит клип colorBlock (чтобы показать их цвет) и клип border, который будет подсвечиваться при выборе цвета. Каждый выбор цвета внутри colorCollection, тем не менее, остается безымянным.

картинка https://i.servimg.com/u/f69/14/89/42/41/210.png

Рисунок: Выборы цвета внутри приложения для рисования



Еще будет несколько первоначальных шагов, в которых цвета из массива будут привязаны к каждому выбору. Этот выбор, и цвет, на который он ссылается, будут сохранены в переменных до тех пор, пока пользователь рисует на экране, или изменяет выбор с текущего цвета на следующий.


Шаги:


1.Из исходных файлов откройте файл DrawingBoardApplication.fla в директории Events. Этот файл состоит из одного пустого слоя под названием ActionScript и слоя Interface с содержимым интерфейса приложения для рисования.
2. Выберите первый кадр на слое ActionScript и откройте панель Actions.
3. Добавьте следующий скрипт на панель Actions.

// A variables to contain the
// selected color and color clip
var selectedColor:uint;
var selectedColorClip:MovieClip;
// Colors to be used in the selections
var colors:Array = [
0x000000, 0xFFFFFF,
0xFF0000, 0x00FF00,
0x0000FF, 0xFF00FF,
0xFFFF00, 0x00FFFF,
];

Это устанавливает текущий цвет (на который будут ссылаться при рисовании), выбранный в настоящее время цветной клип и цвета, которые нужно привязать к разным выборам цвета. Обратите внимание, что переменная selectedColor имеет тип uint. Обычные RGB значения цвета, такие как 0xFFFFFF являются числовыми значениями, которые могут подходить для положительных значений типа данных int. Тем не менее, когда мы имеем дело с RGBA, или Red, Green, Blue и Alpha, мы можем увидеть значения цвета, которые выходят за рамки положительного диапазона внутри типа ints. Беззнаковые целые (uint) могут считать эти значения, вот почему вы будете часто видеть цвета под типом uint.

Далее необходима функция для осуществления связи между цветами и выбираемыми цветными клипами. Эта функция должна будет проходить в цикле через потомков клипа colorCollection и устанавливать colorBlock каждого из тех потомков в соответствующий цвет в массиве цветов. Эта функция также будет устанавливать взаимодействие, которое выбирает цвет, когда каждый из этих клипов нажимается, используя addEventListener(). Эта функция может быть названа defineColorSelections().

4. Добавьте следующий скрипт на панель Actions.

// Adds colors to the color movie clips
// in the colorCollection clip and sets
// them up with click listeners
// for selecting a current color
function defineColorSelections():void {

// set up some variables to be used
var colorClip:*;
var colorForm:ColorTransform;

// loop through all the child
// instances within colorCollection
// using this loop, instance names do
// not have to be given for each child
var i:int = colorCollection.numChildren;
while(i--) {

// get the current child in the loop
colorClip = colorCollection.getChildAt(i);

// set the color of the colorClip's
// colorBlock instance to the color
// specified in the colors array
// at this same position.
colorForm = colorClip.colorBlock.transform.colorTransform;
colorForm.color = colors[i];
colorClip.colorBlock.transform.colorTransform = colorForm;

// set up an event handler so that when
// the colorClip is clicked, it will set
// itself to be the selected color
colorClip.addEventListener(MouseEvent.CLICK, selectColor);
}
}

Обратите внимание, что в конце этой функции addEventListener был использован вместе с colorClip – текущим потомком клипа colorCollection в цикле – чтобы установить обработчик событий selectColor для события click. Это означает, что всякий раз, когда один из этих клипов-потомков нажат, запускается обработчик события функции selectColor. Единственная цель этого обработчика – вызвать функцию под названием setCurrentColor, которая будет устанавливать текущий цвет, основываясь на нажатом выборе.

Функция setCurrentColor проделает пару вещей. Она установит свойство selectedColor, определенное раньше, чтобы оно соответствовало цвету нажатого клипа. Также она будет применять подсветку к границе этого клипа, но не перед тем, как удалять любую подсвеченную границу последнего выбора. Вот где selectedColorClip вступает в игру. Держа выбранный клип внутри этой переменной, ссылка на него может даваться позже, когда нужно удалить его подсветку, так как выбран новый цветной клип.

5. Добавьте следующий скрипт на панель Actions.

// Event handler for selecting a color
function selectColor(event:MouseEvent):void {
// the currentTarget property of the event
// object represents the color selection clicked
// or the object from which addEventListener was
// called; pass it to setCurrentColor to select it
setCurrentColor(event.currentTarget);
}

// Sets the passed color selection clip
// as the currently selected color
function setCurrentColor(colorClip:*):void {

// if there is a selected color clip already
// remove the highlight from its border
// be assigning a default ColorTransform
if (selectedColorClip) {
selectedColorClip.border.transform.colorTransform = new ColorTransform();
}

// assign the new selected color clip
selectedColorClip = colorClip;

// get the selected color for the new clip
// by referencing the color in the colors
// array that has the same index as the
// clip in the display list (since they match)
var index:int = colorCollection.getChildIndex(selectedColorClip);
selectedColor = colors[index];

// add a highlight to the border
// of the new selection by adding some
// rgb to the black color using ColorTransform
var lighter:ColorTransform = new ColorTransform(1, 1, 1, 1, 120, 160, 200, 0);
selectedColorClip.border.transform.colorTransform = lighter;
}

Функция selectColor здесь делает одну вещь; вызывает фукнцию setCurrentColor, которая определяется одним параметром colorClip. Необходимо, чтобы этот клип был нажатым клипом выбора цвета. Функция selectColor может получить доступ к нему через свойство currentTarget событийного объекта. Это свойство представляет объект, в котором использовался addEventListener – объект, получающий событие, или в данном случае, один из потомков в colorCollection.

В функции setCurrentColor вы можете видеть, когда удаляется подсветка последнего выбранного цветного клипа selectedColorClip. Затем переменной будет переназначено значение colorClip, которая затем получает собственную подсветку через свойство colorTransform. Свойство selectedColor привязывается на основе позиции этого нового клипа внутри таблицы отображения colorCollection.

Таким образом, получаем функционирующую возможность выбора цвета. На данный момент, мы имеем достаточно кода, чтобы протестировать клип, по крайней мере, с выбором цветов, но не с рисованием.

6. Добавьте следующий скрипт на панель Actions.

// Set up color selections to have the
// colors defined in the colors array
defineColorSelections();
// Set the current selection to
// be the first clip in colorCollection
setCurrentColor(colorCollection.getChildAt(0));
7. Протестируйте свое приложение.

Рисунок: Приложение для рисования с определениями цветов


Следующим шагом нужно сделать возможным рисование с помощью выбранного цвета. Для этого мы будем использовать клип drawingBoard наряду с событиями мыши mouseDown, mouseMove и mouseUp (и rollOut). Можно начать рисовать после нажатия мышкой по экземпляру drawingBoard. Если при этом начать двигать мышкой по холсту, получаться рисунки. Когда клавиша мышки отпущена (либо курсор мыши выходит за пределы области рисования), рисование прекращается.

Рисование происходит во время события mouseMove. Чтобы убедиться, что рисование происходит только после того, как нажата клавиша мыши, этот обработчик события будет добавлен только в качестве листенера события mouseMove во время события mouseDown. Походим образом, когда кнопка мыши отпускается, либо курсор уходит с экземпляра drawingBoard, обработчик события будет удален в качестве листенера, чтобы остановить дополнительное рисование.

Запомните, в ActionScript 3 событие mouseMove случается только во время нахождения внутри объекта, получающего событие, в отличие от ActionScript 2, где событие onMouseMove происходило в любое время, пока мышь двигалась внутри окна плеера. Это означает, что не нужно писать код для каких-либо границ, если рисование ограничено событием mouseMove клипа drawingBoard.

Наряду с определением обработчиков событий для рисования, необходим один дополнительный шаг: создание места для рисования. Существует две проблемы с рисованием непосредственно в экземпляре drawingBoard. Первая заключается в том, что слой graphics объекта отображения (того, который имеет такой слой) находится под всем другим своим содержимым. Клип drawingBoard уже содержит белый квадрат. Любой динамический рисунок, созданный внутри этого экземпляра, будет помещен под этим квадратом и не будет виден. Во-вторых, рисуя на объекте, который вы используете в качестве границ, есть возможность, что рисунок сам по себе создаст графику, которая выйдет за пределы границ, делая возможным создание постоянно расширяющегося холста для рисования.

Мы не хотим этого, поэтому можем создать динамический экземпляр объекта Sprite, называемый canvas, который будет содержать графику рисунка. Он будет помещен прямо над экземпляром drawingBoard, а все рисунки, созданные из соответствующих событий, будут нарисованы на объекте graphics экземпляра canvas.

9. Добавьте следующий скрипт на панель Actions.

// Create a shape to draw in and
// position it over the drawingBoard
var canvas:Shape = new Shape();
canvas.x = drawingBoard.x;
canvas.y = drawingBoard.y;
addChild(canvas);

// This starts the drawing process
// for when the user clicks on the
// drawing board on the screen
function startDrawing(event:MouseEvent):void {

// set up the drawing API with that
// color starting at the mouse location
canvas.graphics.lineStyle(1, selectedColor);
canvas.graphics.moveTo(canvas.mouseX, canvas.mouseY);

// create an event listener for the mouse
// moving so that it can draw lines in the canvas
drawingBoard.addEventListener(MouseEvent.MOUSE_MOVE, whileDrawing);
}

// When the user has clicked the drawing
// board, this function will be called when
// the mouse moves to draw lines in canvas
function whileDrawing(event:MouseEvent):void {
// draw a line in the canvas to
// the new mouse location
canvas.graphics.lineTo(canvas.mouseX, canvas.mouseY);
}

// When drawing has stopped, this function
// removes the event calling userDrawing
function stopDrawing(event:MouseEvent):void {
// prevent mouse movements from drawing
// anymore lines until startDrawing
// is called again during mouseDown
drawingBoard.removeEventListener(MouseEvent.MOUSE_MOVE, whileDrawing);
}

Эти события, или по крайней мере startDrawing и stopDrawing, теперь нужно привязать к необходимым событиям.

10. Добавьте следующий скрипт на панель Actions.

// Define event handlers
// drawingBoard event handlers control drawing
// on the drawing board (to canvas) based
// on the occurrences respective event types
drawingBoard.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
drawingBoard.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
drawingBoard.addEventListener(MouseEvent.ROLL_OUT, stopDrawing);

Теперь, когда нажата кнопка мыши на экземпляре drawingBoard, startDrawing делает whileDrawing листенером события mouseMove. Пользователь будет перемещать мышь, и благодаря этому на экземпляре canvas будут появляться линии (основываясь на selectedColor), пока не будет отпущена кнопка мыши над drawingBoard, или курсор не уйдет за пределы drawingBoard, тогда whileDrawing будет удален как листенер события mouseMove, и рисование прекратится.

Еще остается кнопка clear, определенная с помощью имени экземпляра clearButton. Эта кнопка будет использовать событие click для очистки объекта graphics в экземпляре canvas. Являясь символом кнопки, кнопка clear в своей основе будет иметь курсор в виде руки, когда мышь будет находиться над ней. Чтобы сделать интерфейс более последовательным и помочь показать, что выборы цветов по сути являются интерактивными, на них тоже курсор должен принимать вид руки. Его можно добавить, установив свойство buttonMode экземпляра colorCollection в true.

11. Добавьте следующий скрипт на панель Actions.

// Clears the canvas of all drawings
function clearCanvas(event:MouseEvent):void {
// clear the canvas graphics
canvas.graphics.clear();
}

// clearButton handler clears the
// canvas when clicked
clearButton.addEventListener(MouseEvent.CLICK, clearCanvas);

// Give the color selections a finger cursor
colorCollection.buttonMode = true;

12. После добавления кода протестируйте свое приложение и начните рисовать. Вы должны увидеть нечто похожее, как на следующем рисунке (хотя, возможно, внешне более привлекательное).

Рисунок: Законченное приложение для рисования с возможностью рисования