Замена курсора в Flash на ActionScript 3

Судя потому, что этот поисковый запрос очень популярен на моем блоге, считаю своим долгом донести до общественности такую вещь, как замена курсора в as3.

Итак, заменяем курсор

Скрыть курсор в Flash приложении довольно легко, для этого нам необходимо выполнить следующий порядок действий:

  1. Скрыть текущий курсор мыши
  2. Добавить на сцену курсор, который мы хотим получить
  3. Установить «слушатель событий», чтобы он перерисовывал (двигал) наш курсор за указателем.

В AS3 есть объект Mouse, у которого есть метод hide, с помощью него мы скрываем курсор, вызвав Mouse.hide(), далее создадим объект Sprite, и нарисуем наш курсор:

var cursor:Sprite = new Sprite();
cursor.graphics.beginFill(0x000000);
cursor.graphics.drawCircle(0,0,20);
cursor.graphics.endFill();

Теперь мы можем добавить наш курсор в рабочую область:
addChild(cursor);

Скрываем старый курсор:
Mouse.hide();

Добавляем слушатель событий, к объекту stage (сцена), то есть когда курсор будет двигаться по рабочей области, мы будем менять его на текущие координаты курсора:
stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
Ну и собственно сама функция замены курсора:

function redrawCursor(event:MouseEvent):void
{
cursor.x = event.stageX;//координата по оси x
cursor.y = event.stageY; //координата по оси y
}

Итак вот, что у нас получилось:

[sourcecode language=»as3″]
var cursor:Sprite = new Sprite();
cursor.graphics.beginFill(0x000000);
cursor.graphics.drawCircle(0,0,20);
cursor.graphics.endFill();
addChild(cursor);
stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
Mouse.hide();
function redrawCursor(event:MouseEvent):void
{
cursor.x = event.stageX;
cursor.y = event.stageY;
}
[/sourcecode]

Если есть вопросы, буду рад ответить на них в комментариях.
Записал скринкаст — «Замена курсора в Flash приложении«.

17 thoughts on “Замена курсора в Flash на ActionScript 3

  1. Все красиво… Прямо как в учебнике 🙂 Но… Вот незадача…
    Попробуем провести эксперимент…

    /*
    * Курсор - как глобальная переменная -
    * чтобы он у нас был единственным,
    * а не повторялся бы при каждом движении мышки
    */
    var cursor:Sprite = new Sprite();

    /*
    * К символу в пабочей области прикручиваем
    * событие (чтобы курсор был немного
    * более полезен)
    */
    button_mc.addEventListener(
    MouseEvent.MOUSE_MOVE,
    function (e:MouseEvent){

    cursor.graphics.beginFill(0x000000);
    cursor.graphics.drawCircle(0,0,20);
    cursor.graphics.endFill();
    stage.addChild(cursor);

    Mouse.hide();

    cursor.x = e.stageX;//координата по оси x
    cursor.y = e.stageY; //координата по оси y
    }
    );
    /*
    * Пока все чудесно работает - как в учебнике...
    * Правда, одна мелочь - не можем вернуть курсор на место...
    * Ну, да это, кажется, элементарно? Как-то так, например...
    */
    button_mc.addEventListener(
    MouseEvent.MOUSE_OUT,
    function (e:MouseEvent){
    Mouse.show();

    stage.removeChild(cursor);

    }
    ); // Правильно?

    /*
    * Э-э-э...
    * Честно говоря, я, когда попробовал, ждал совсем не то,
    * что получил...
    * Впечатления - незабываемые... :)
    */

    /*
    * Ну, и для полного кайфа... Стираем предыдущую процедуру
    * (добавление MouseEvent.MOUSE_OUT - что бы не мешалась).
    * И пробуем дописать что-то типа следующего:
    */
    button_mc.addEventListener(
    MouseEvent.CLICK,
    function (e:MouseEvent){
    trace("Test of click");
    }
    );

    /* Простая вроде бы обработка клика...
    * Угадайте с одного раза: если я сделаю
    * два одинарных щелчка и один двойной -
    * сколько надписей я получу?
    */

    В предыдущем примере мне пришлось убедиться: клики не работают, если мышь скрыта.

    Пришлось находить, что у объекта Mouse есть такое свойство, как cursor… А также существуют еще и объекты MouseCursor и CustomCursor…

    И тогда подмена происходит, например, так:

    Mouse.cursor = MouseCursor.HAND; // Перетаскивающая рука

  2. Кстати, в предыдущем посте немного соврал 🙂

    Вот тут:

    class CustomCursor extends Shape {
    var bgColor:uint = 0x333333;
    var size:uint = 10;

    public function CustomCursor() {
    visible = false;
    draw();
    }

    private function draw():void {
    graphics.clear();
    graphics.beginFill(bgColor);
    graphics.drawRect(0, 0, size, size);
    graphics.endFill();
    }
    }

    А полный пример можно посмотреть по адресу http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/ui/Mouse.html

    P.S. Xo66uT, если не влом — подкрась, пожалуйста, код и ссылки 🙂

  3. Что бы постараться быть до конца справедливым, надо сказать, что метод, описанный в теме, действительно работает, в том числе и для моего примера. Просто в моем варианте реализации нарисованный курсор появляется строго под скрытой мышью, из-за чего мышь выходит из оласти кнопки и в ходит в область «курсора» 🙂 Происходит MouseOver — и далее по кругу: движение — появление объекта — выход — движение…

    Для нейтрализации этого эффекта достаточно просто передвинуть нарисованный курсор так, чтобы он не попадал под мышь:

    cursor.x = e.stageX + 20 + 1; //координата по оси x + радиус + 1 точка (для гарантии)
    cursor.y = e.stageY + 21; //координата по оси y

  4. Зачем переписывать стандартные примеры из справки Adobe в блог? По поиску и так первые позиции занимают официальные справочники. Лучше бы показали, как сделать курсор с пользовательской картинкой, а не каким-то черным пятном.

  5. Здравствуйте!
    Я реализовал замену курсора двумя строчками:

    Mouse.hide()
    my_cursor.startDrag(true);

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

    Заранее благодарен за ответ))

  6. Все спасибо=) я решил вот так заменить курсор
    Mouse.hide();

    cursor.startDrag(true)
    function redrawCursor(event:MouseEvent):void

    {

    cursor.x = event.stageX+3;

    cursor.y = event.stageY+3;

    }

  7. а можно во много сберечь время:
    рисуем на сцене что угодно
    приобразовываем это в символ(мувик)
    даём мувику instance name:obj
    и на этом же слое добавляем в панель actions следующий код:
    Mouse.hide();
    obj.x = mouseX;
    obj.y = mouseY;
    (код на actionscript 3.0)

Добавить комментарий для elmortem Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *