Пользовательский курсор на ActionScript 3.0

Данная заметка является продолжением одного из прошлых постов, но теперь будет разобран способ создания пользовательского курсора средствами 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; }

Результат работы данного кода:

Загрузить Adobe Flash Player

В данном примере всё делается программно. Если же Вы рисовали курсор вручную (как описывалось выше), то у Вас код будет иметь следующий вид:

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; }

Автор: admin

Дата добавления: 2011-07-23

Просмотров: 6692

Рейтинг поста: +9-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-10-01
Как-то так, наверно: http://edapskov.ru/pages.php?id=270
Комментатор
Комментарий добавил(а): Яповчанка
Дата добавления: 2015-09-30
Здравствуйте!!!
Огромная просьба.
Помогите ,пожалуйста, Это и Это реализовать на AS3..
Буду Очень,Очень.. благодарна!!!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-11-19
Отслеживайте наведение/увод курсора мышки с объекта и перерисовывайте содержимое спрайта с помощью методов динамического рисования (http://edapskov.ru/pages.php?id=149) или, если курсор представляет из себя мувиклип, то просто переходите на кадр, который будет содержать нужный курсор. Для удобства, конечно, вам надо будет создать функцию или класс, который будет всё это делать.
Комментатор
Комментарий добавил(а): Станислав
Дата добавления: 2012-11-19
Здравствуйте, подскажите пожалуйста как сделать практически то же самое так же на action script 3.0 но чтобы курсор заменялся (на свой) при наведении на определенный символ на сцене.
P.S. у вас к стати самый четкий способ замены, работает плавно даже с анимированным курсором!
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика