Сегодня: 18 января 2017 года, среда

Поиск по сайту


Дизайнерский форум

Рассылка

Наша кнопка

Мы рекомендуем

Создание собственного курсора

Шаг 1

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


Начнем с того, что создадим новый Flash файл, размеры сцены и фон совершенно неважны. Однако я советую вам выставить frame rate равный 30, чтобы наш курсор двигался плавно и без разких рывков. Изменить frame rate вы можете на панели Propeties Inspector (Window > Properties > Properties или Ctrl+F3).

Шаг 2

Теперь нужно нарисовать сам курсор. Для этого вы можете использовать Карандаш или любой другой инструмен, выбрать который вы можете на панели инструментов. Рекомендуется расположить ваш курсор немного левее от центра сцены, для чего - поймете позже.

Шаг 3

Выделите ваш курсор и нажмите F8, чтобы конвертировать его в символ. ActionScript может управлять только сиволами, но никак не рисованными объектами. В появившемся окошке «Convert to Symbol» название символа можете задать любым, главное выберите тип «Movie clip». Так же стоит убедится, что точка регистрации - верхний левый угол. Точка регистрации задает центр мувиклипа, при задании такого положения точки регистрации мы сможем максимально добится эффекта настоящего курсора. Когда все готово, нажмите OK.

Шаг 4

Пока ваш новорожденный символ еще выделен, откройте Properties Inspector и задайте этому мувиклипу instance name как «cursor_mc». Instance name используются для определения объекта ActionScript'ом, ведь если у нас есть два совершенно одинаковых объекта без instance name, как ActionScript поймет, над каким выполнять команды?

Шаг 5

Курсор готов, теперь нам следует написать волшебный ActionScript, чтобы заменить обычный курсор на наш только что созданный. Для этого создадим новый слой и переименуем его в Script. В нашем случае это совсем необязательно, однако в крупных проектах принято создавать отдельный слой для кода, чтобы в любой момент можно было легко найди нужную часть кода, а не искать его по всем объектам. Нажимаем F9, для открытия панели AtionScript, или жмем правой кнопкой мыши на первый кадр и выбираем «Actions».

Шаг 6

В нашем коде будет всего две функции: первая заставит наш мувиклип двигаться за настоящим курсором, а вторая - скроет настоящий курсор. У пользователя появится полное ощущение того, что наш мувиклип - настоящий курсор (за исключением графики, конечно). Все это умещается в две строчки:
cursor_mc.startDrag("true");
Mouse.hide();
Скопируйте этот код и вставьте в свой проект. Теперь протестируем, нажмем Ctrl+Enter. Работает! :)

Метод startDrag для мувиклипов заставляет их двигаться за курсором.

Если у вас что-то не получилось, попробуйте скачать исходник. Удачи!
Дизайн навигатор - Photoshop, уроки фотошоп, шаблоны сайтов