10
фев
  Заменяем стандартные курсоры во Flash 2 балла
 

Учимся изменять стандартные изображения курсоров


Часто бывает, что в соответствии с задумками дизайна, или по другим причинам нам нужно изменить стандартное изображение курсора в Flash на другое, своё собственное. Допустим вы хотите сделать анимированный курсор, наподобие “песочных-часов”, что появляются в Windows при загрузке, или мелкий текст, который можно было бы просматривать в увеличенном виде под лупой, согласитесь, смотрелось бы не плохо, если бы курсором в этом случае выступало само увеличительное стекло. В общем применений такому эффекту в флешках можно найти море, а как вы будете его использовать — это уже совсем другой вопрос. Нашей задачей сегодня является разобрать, на примере Flash урока, как такой эффект создаётся. Исходники прилагаются.

Разбираем всё по-полочкам на примерах


Собственно, что нужно для превращения стандартного Flash курсора, в «супер-мега-курсор», которого ни у кого нет? Нужно для этого:

1. а) Выключить старое изображение курсора;
2. б) Создать Movie Clip с новым изображением, и, каждый раз при передвижении мышки, присваивать ему координаты курсора.

Как это делается? Ну, если вас пугает смена координат, то подробнее об этом вы можете почитать в статье, посвящённой основным свойствам Movie Clip объектов в Flash. А что касается “срытия” и “открытия” курсора, то для этого в Flash существует специальный метод объекта Mouse, точнее их даже два:

1. Mouse.hide() — скрыть отображение курсора;
2. Mouse.show() — восстановить нормальное отображение курсора.

Вот, собственно, и всё. Теперь осталось только создать нужные объекты на рабочем поле:

И написать код:

/*
Сегодня мы научимся скрывать стандартное изображение курсора, и устанавливать любое
другое, которое нам понравится. делается это очень просто.
Во-первых, скрывается стандартное изображение курсора.
Во-вторых, выбирается нужный MovieClip объект, который будет просто двигаться за
курсором мышки.
*/
//
//СМОТРИМ
//
//Подгружаем необходимые классы (класс Tween)
import mx.transitions.Tween;
import mx.transitions.easing.*;
//Останавливаем проигрывание
stop();
//На рабочем столе у нас созданно 6 клипов-курсоров, которые мы будем передвигать, при
//наведении на них мышкой.
//Этот цикл, будет перебирать все клипы, заносить в переменные их начальные координаты
//и присваивать каждому клипу событие на onRollOver;
for (var i = 1; i<7; i++) {
        //”Запоминаем” начальные координаты
        _root[“mc”+i+“_mc”].varStartX = _root[“mc”+i+“_mc”]._x;
        _root[“mc”+i+“_mc”].varStartY = _root[“mc”+i+“_mc”]._y;
        //Задаём событие onRollOver
        _root[“mc”+i+“_mc”].onRollOver = function() {
                //Переменная _root.varCursor будет ссылаться на текущий MovieClip объект,
                //который двигался за мышкой. При наведении на новый клип, старый нужно убрать
                //на место, что мы и делаем следующим кодом.
                //Плавно изменяем координаты по оси X
                _root.varCursor.varTweenX.stop();
                _root.varCursor.varTweenX = new Tween(_root.varCursor, “_x”, Regular.easeOut, _root.varCursor._x, _root.varCursor.varStartX, 0.5, true);
                _root.varCursor.varTweenX.onMotionFinished = function() {
                        //После того, как Movie Clip встал на свою текущую позицию, мы “включаем” его.
                        this.obj.enabled = true;
                };
                //Плавно изменяем координаты по оси Y
                _root.varCursor.varTweenY.stop();
                _root.varCursor.varTweenY = new Tween(_root.varCursor, “_y”, Regular.easeOut, _root.varCursor._y, _root.varCursor.varStartY, 0.5, true);
                //Присваиваем переменной _root.varCursor текущий Movie Clip объект, на который
                //мы навели мышкой (курсором). Теперь, при движении мышки, текущий Movie Clip
                //объект будет двигаться за курсором.
                _root.varCursor = this;
                //”Оключаем” текущий Movie Clip, чтобы, пока он будет двигаться за мышкой не
                //срабатывало события onRollOver. Если объект не “отключить”, то это событие
                //будет срабатывать постоянно, т.к. координаты клипа будут совпадать с
                //координатами курсора.
                this.enabled = false;
        };
}
//Создаём событие, которое будет срабатывать каждый раз при движении мышки.
onMouseMove = function () {
        //Проверяем, если курсор мышки ниже серой черты (line_mc), то скрываем курсор.
        //Если курсор будет опускаться ниже line_mc, то делаем курсор видимым
        //
        //Функции hide() и show() объекта Mouse, как вы могли уже догадаться, скрывают или
        //показывают изображение курсора (стрелочку), соответственно.
        if (_root._ymouse<_root.line_mc._y) {
                Mouse.hide();
        } else {
                Mouse.show();
        }
        //Присваиваем значение координат мышки, координатам Movie Clip’a, на который будет
        //ссылаться переменная _root.varCursor. Таким образом будет создаваться впечатление,
        //что Movie Clip двигается за мышкой =)
        _root.varCursor._x = _root._xmouse;
        _root.varCursor._y = _root._ymouse;
};
//Вызываем событие onRollOver (на наведение курсора мышки) для объекта mc1_mc. Теперь
//этот Movie Clip будет передвигаться за курсором.
mc1_mc.onRollOver();
//Вызываем событие onMouseMove, чтобы присвоить mc1_mc координаты курсора.
onMouseMove();

Кто не до конца разобрался, всегда может скачать флеш исходник (fla) к уроку и посмотреть флешку-пример (.swf).

Сама флешка
| Исходник

Комментарии (4)   Автор: admin
Комментарии
aztek
08.09.09 | 12:35
0 баллов

для AS 1 и 2 нужно использовать updateAfterEvent, чтоб новоявленный курсор двигался плавно, а не дрыгался в такт частоты кадров ролика. в этом примере скачки не так видны, потому что установлен сумасшедший фреймрейт. большой фреймрейт грузит проц. это неправильный путь.

aztek
08.09.09 | 12:43
0 баллов

пардон, скачал исходник, фреймрейт нормальный, 30 фпс. :)
но все равно, если дописать после строк

_root.varCursor._x = _root._xmouse;
_root.varCursor._y = _root._ymouse;

одну строку

updateAfterEvent();

движение станет гораздо более плавным.

munir
13.01.10 | 14:46
0 баллов

а как сделать чтобы твой курсор, когда наводишь на кнопку, допустим, становился рукой?

И.Р.И.Н.А
20.03.10 | 01:49
0 баллов

О, я нашла))) клааас))) описание такое же прелестное=***

 
 
 
 

Последние комментарии

Полезные ссылки

Реклама сайтов

Купальники известный марки Amarea
В широком ассортименте мебель для ванной в Вашу квартиру
Сайт о фильмах любых жанров и направлений
проектирование пожаротушения на производстве для обеспечения пожарной безопасности