67. [howto] Tooltip Part1. Создаем tooltip – всплывающую подсказку

howto – Серия статей, в которых мы будем разбирать как делать эффекты во флеше и другие интересные полезности. Посмотреть все уроки серии: http://flashpress.ru/blog/category/howto/
Серия статей на тему создания всплывающей подсказки(ToolTip):
  1. Tooltip Part1. Создаем tooltip – всплывающую подсказку
  2. Tooltip Part2. Подключаем плавное появление используя Alpha
  3. Tooltip Part3 Подключаем плавное появление используя Zoom (скоро)
  4. Tooltip Part4. Подсказка с отображением картинки и цвета текста (скоро)

Ни одна flash-игра или просто приложение не обходятся без всплывающих подсказок. В этой статье я расскажу вам как можно создать ActionScript3.0 класс, с помощью которого можно создавать самые различные подсказки(tooltips). Что бы вам было проще понять чем мы будем заниматься в этой статье, взгляните на флешку ниже, наведите мышкой на квадраты и вы увидите всплывающую подсказу:

Здесь должна быть флешка. Установите Flash Player

В этой статье мы с вами напишем базовый ActionScript класс для компонента tooltip. Далее этот класс можно использоваться для создания любого типа подсказки. Унаследовавшись от базового класса мы сможем создать классы-tooltip который умеют показывать подсказку в виде простого текста или например в виде картинки с текстом. Для того что бы лучше понять как это делается, мы создадим класс-подсказку который отображает только текст, а в домашнем задании вы попробуйте создать точно такую же подсказу которая умеет текст и задавать цвет этого текста. Так же в следующей статье из этой серии, мы с вами будет дополнять базовый класс tooltip различными функциями, например плавное появление подсказки при наведении на объект.

Базовый класс подсказки TooltipBase.as:

В этом классе у нас есть один public метод Register, в этом методе мы сообщаем подсказке(tooltip) на каком объекта надо показывать подсказку(параметр target) и какую информацию надо показывать(параметр data). Обратите внимание что параметр data имеет тип не String а Object. Это сделано для того что бы компонент был универсальным, т.е. что бы мы могли сделать отображение не только текста, но и любой другой информации. Например вы можете передать в этом параметре объект Object в котором есть ссылка и текст, таким образом мы сможем сделать подсказку которая отображает картинку(видео, да все что угодно) и текст в придачу.

Обратите внимание на статичную(static) функцию Init. Эту функцию надо вызвать в основном классе приложения один раз, что бы инициализировать наш компонент tooltip. В этом методе мы сохраняем ссылку на stage, что бы в любой момент мы могли показать(stageLink.addChild) и удалить(stageLink.removeChild) подсказку.


Базовый класс создан, давайте теперь создадим класс который наследуется от TooltipBase и отображает подсказку в виде текста:

В этом классе мы унаследовались от класса TooltipBase (строка 13). В конструкторе создали текстовое поле(TextField). И переопределили метод showHint(строка 40). Этот метод вызывается в базовом классе(TooltipBase) в момент когда надо отобразить подсказку. В методе showHint передается один параметр data – это информация которую надо показать в подсказке, в нашем случае это просто текст, который мы показываем в текстовом поле(строка 43).


Вот как выглядит главный класс нашего приложения:

В строке 14 мы инициализируем наш компонент tooltip, передав в методе Init ссылку на stage. В строке 18 мы создаем компонент tooltip который умеет показывать подсказку в виде обычного текста. Далее мы создаем два спрайта, над которыми надо показать подсказку. В строчках 31 и 46 мы сообщаем нашему компоненту myTextTooltip над какими объектами и какой текст надо показать при наведении мыши.


Как это реализовать в Adobe Flash CS

Выше указанный пример реализуется в проекте FlashBuilder. Если вы пишите код в Adobe Flash CS, то использовать этот пример можно следующим образом. Откройте проект ActionScript3.0. Поместите класс TooltipBase.as рядом с вашим FLA файлом. Создайте в библиотеке новый MovieClip и назовите его tooltip. Зайдите в свойства этого клипа, кликнув правой клавишей на нем и выбрав пункт Properties(Свойства). В открывшемся окне в поле Class напишите textTooltip, а в поле BaseClass напишите название нашего базового класса подсказки TooltipBase, как показано на скрине:
tooltip-part1-1

Войдите внутрь созданного клипа, создайте текстовое поле Dynamic Text и задайте ему isntance name textField. Внутри этого клипа, на первом кадре напишите следующий код:

Перенести на stage этот мувиклип и дайте ему isntance name: myTextToolTip. Далее создайте на stage два мувиклипа и задайте им имена red_mc и green_mc, и напишите на первом кадре первого слоя следующий код:

Вот и все, теперь вы можете создавать любое количество спрайтов и задавать каждому из них подсказку с помощью одной строчки ActnioScript кода

Если вдруг у вас что то не получилось, вы можете скачать готовый FLA файл и посмотреть как это реализовано у меня. Скачать все исходники для Adobe Flash CS можно здесь. А исходники для FlashBuilder лежат здесь.


Задание №1

Сделайте так что бы можно было в классе подсказке TextTooltip задавать не только текст но и цвет текста. Передавайте в методе Register вторым параметром не String, а Object с двумя параметрами: text и color. Пример того как должно это выглядеть:

Здесь должна быть флешка. Установите Flash Player


Кто будет пытаться декомпилировать эту флешку – получит сразу двойку! :)

Если у вас что то не получилось или вы хотите получить оценку сделанному, прикладывайте в комментариях или отправляйте мне на почту архив с вашим проектом. Отправить письмо можно в разделе Контакты

Задание №2

Создайте новый класс подсказку ImageTooltip который умеет загружать и отображать картинку, а рядом с картинкой отображается текст подсказки. Пример того как должно это выглядеть:

Здесь должна быть флешка. Установите Flash Player


Если у вас что то не получилось или вы хотите получить оценку сделанному, прикладывайте в комментариях или отправляйте мне на почту архив с вашим проектом. Отправить письмо можно в разделе Контакты

Если у вас не получилось выполнить эти два задания, но очень хочется научиться создавать такие тултипы, следите за новостями – в одной из последующих статей серии tooltip, я обязательно выложу статью о том как отображать сложные подсказки
Серия статей на тему создания всплывающей подсказки(ToolTip):
  1. Tooltip Part1. Создаем tooltip – всплывающую подсказку
  2. Tooltip Part2. Подключаем плавное появление используя Alpha
  3. Tooltip Part3 Подключаем плавное появление используя Zoom (скоро)
  4. Tooltip Part4. Подсказка с отображением картинки и цвета текста (скоро)

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 3075 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress:


  1. Уведомление: Tooltip. Подключаем плавное появление/пропадание используя alpha | FlashPress.ru - ActionScript 3.0 и Adobe Flash

  2. shaidenko

    Serious Sam спасибо Вам за Ваши замечательные уроки! они очень полезные ,лично для меня ,так как настоящего “мастер класса” не кто не показывает при ответах на простые вопросы. у меня один очень волнующий меня вопрос ,мне очень сложно уловить назначение метода Init() и сохранения ссылки на стейдж.
    если у Вас есть такая статья ,то я был бы очень рад получить на неё ссылку ,а
    если такая отсутствует ,то я очень бы обрадовался увидев её.