Данная заметка является продолжением одного из прошлых постов, но теперь будет разобран способ создания пользовательского курсора средствами ActionScript 3.0.
Первым делом надо скрыть стандартный курсор. В AS 3.0 это делается так:
Mouse.hide();
Затем надо создать заготовку самого курсора. Как правило, курсоры имеют не очень сложную форму и, следовательно, их без труда можно "нарисовать" средствами программного рисования. Следующий код добавляет на сцену флеш-ролика заготовку для будущего курсора в виде стрелки:
Код ActionScript 3.0:
Mouse.hide();
var cur:Sprite = new Sprite();
cur.graphics.lineStyle(2,0x999999,1);
cur.graphics.beginFill(0xcccccc);
cur.graphics.moveTo(0,0);
cur.graphics.lineTo(20,10);
cur.graphics.lineTo(10,10);
cur.graphics.lineTo(10,20);
cur.graphics.endFill();
addChild(cur);
Но заготовку для курсора можно создать и вручную. Для этого в программе Adobe Flash рисуем саму заготовку, выделяем её и нажимаем F8 на клавиатуре для превращения нашего рисунка в мувиклип. Появляется окно, в котором вводим имя будущего мувиклипа, выбираем тип "Фрагмент ролика", а точку регистрации помещаем в верхний левый угол. В этом же окне ставим галочку у "Экспортировать для ActionScript" и вводим в поле ввода имя класса (в данном примере таким именем будет "Cur"). После этого мы удаляем нашу заготовку с рабочего стола программы (но она сохраняется в библиотеке нашего проекта) и прописываем на главной временной шкале следующий код:
Mouse.hide();
var cur:Cur = new Cur();
addChild(cur);
Курсоры, как правило, имеют эффект тени. Мы тоже можем его добавить к нашему курсору с помощью фильтра DropShadowFilter:
Mouse.hide();
var cur:Sprite = new Sprite();
cur.graphics.lineStyle(2,0x999999,1);
cur.graphics.beginFill(0xcccccc);
cur.graphics.moveTo(0,0);
cur.graphics.lineTo(20,10);
cur.graphics.lineTo(10,10);
cur.graphics.lineTo(10,20);
cur.graphics.endFill();
addChild(cur);
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.color = 0x999999;
shadow.alpha = 0.5;
shadow.angle = 45;
cur.filters = [shadow];
А теперь сделаем так, чтобы при перемещении реального курсора мышки (который у нас скрыт от человеческих глаз, но всё равно существует) изменялось бы положение нашего самодельного курсора:
Mouse.hide();
var cur:Sprite = new Sprite();
cur.graphics.lineStyle(2,0x999999,1);
cur.graphics.beginFill(0xcccccc);
cur.graphics.moveTo(0,0);
cur.graphics.lineTo(20,10);
cur.graphics.lineTo(10,10);
cur.graphics.lineTo(10,20);
cur.graphics.endFill();
addChild(cur);
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.color = 0x999999;
shadow.alpha = 0.5;
shadow.angle = 45;
cur.filters = [shadow];
stage.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
cur.x = event.stageX;
cur.y = event.stageY;
}
В принципе, наш курсор готов и работает. Но у него есть, как минимум, три недостатка, которые стоит устранить. Во-первых, при низком fps наш курсор начинает "тормозить", то есть он движется рывками и явно отстаёт от реального курсора мышки. Этот недостаток мы исправим с помощью использования метода updateAfterEvent(), который будет выполнять постсобытийное обновление экрана. Итак, новый вариант кода:
Mouse.hide();
var cur:Sprite = new Sprite();
cur.graphics.lineStyle(2,0x999999,1);
cur.graphics.beginFill(0xcccccc);
cur.graphics.moveTo(0,0);
cur.graphics.lineTo(20,10);
cur.graphics.lineTo(10,10);
cur.graphics.lineTo(10,20);
cur.graphics.endFill();
addChild(cur);
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.color = 0x999999;
shadow.alpha = 0.5;
shadow.angle = 45;
cur.filters = [shadow];
stage.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
cur.x = event.stageX;
cur.y = event.stageY;
event.updateAfterEvent();
}
Во-вторых, если мы уведём реальный курсор мышки за пределы сцены флеш-ролика, то мы всё равно будем видеть наш самодельный курсор, который будет нагло красоваться у края сцены. Это не есть хорошо. Поэтому мы будем отлавливать событие выхода курсора мышки за пределы сцены флеш-ролика и делать пользовательский курсор невидимым, если он покидает пределы сцены. Для этого в языке AS 3.0 имеется специальное событие - событие mouseLeave, которое отправляется объектом Stage каждый раз, когда курсор мыши покидает рабочую область флеш-ролика. А когда курсор возвращается на сцену, мы снова его делаем видимым. События, обратного событию mouseLeave, как я понял, в ActionScript 3.0 нет, но имитировать его довольно просто.
Третий важный момент заключается в том, что для правильной работы нашего курсора с интерактивными элементами флеш-ролика следует запретить нашему курсору отслеживание событий мыши. Сделать это можно присвоив свойству mouseEnabled пользовательского курсора значение false.
Последний раз модифицируем код и получаем следующее:
/*
скрываем стандартный курсор мышки
*/
Mouse.hide();
/*
создаём свой пользовательский курсор
*/
var cur:Sprite = new Sprite();
cur.graphics.lineStyle(2,0x999999,1);
cur.graphics.beginFill(0xcccccc);
cur.graphics.moveTo(0,0);
cur.graphics.lineTo(20,10);
cur.graphics.lineTo(10,10);
cur.graphics.lineTo(10,20);
cur.graphics.endFill();
addChild(cur);
/*
первоначально пользовательский курсор будет невидимым
*/
cur.visible = false;
/*
запрещаем отслеживание событий мышки
*/
cur.mouseEnabled = false;
/*
добавляем курсору тень
*/
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.color = 0x999999;
shadow.alpha = 0.5;
shadow.angle = 45;
cur.filters = [shadow];
/*
отслеживаем событие перемещение мышки по сцене ролика и каждый раз при изменении положения курсора мышки присваиваем новые координаты курсора мышки спрайту-курсору
*/
stage.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
/*
помещаем координаты курсора мышки в специальные переменные
*/
var coordX:int = event.stageX;
var coordY:int = event.stageY;
/*
если настоящий курсор мышки находится на сцене флеш-ролика...
*/
if (coordX >= 0 && coordY >= 0 && coordX <= stage.stageWidth && coordY <= stage.stageHeight)
{
/*
...делаем курсор видимым...
*/
cur.visible = true;
/*
...изменяем координаты пользовательского курсора...
*/
cur.x = coordX;
cur.y = coordY;
/*
обновляем экран (благодаря методу updateAfterEvent() движение курсора становится плавным).
*/
event.updateAfterEvent();
}
}
/*
если реальный курсор покидает сцену флеш-ролика, то делаем пользовательский курсор невидимым
*/
stage.addEventListener(Event.MOUSE_LEAVE, mLeave);
function mLeave(event:Event):void
{
cur.visible = false;
}
Результат работы данного кода:
В данном примере всё делается программно. Если же Вы рисовали курсор вручную (как описывалось выше), то у Вас код будет иметь следующий вид:
Mouse.hide();
var cur:Cur = new Cur();
addChild(cur);
cur.visible = false;
cur.mouseEnabled = false;
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.color = 0x999999;
shadow.alpha = 0.5;
shadow.angle = 45;
cur.filters = [shadow];
stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
function redrawCursor(event:MouseEvent):void
{
var coordX:int = event.stageX;
var coordY:int = event.stageY;
if (coordX >= 0 && coordY >= 0 && coordX <= stage.stageWidth && coordY <= stage.stageHeight)
{
cur.visible = true;
cur.x = coordX;
cur.y = coordY;
event.updateAfterEvent();
}
}
stage.addEventListener(Event.MOUSE_LEAVE, activateHandler);
function activateHandler(event:Event):void
{
cur.visible = false;
}
Рейтинг поста: 
