Компоненты

Какие действия выполняет подсказка

Теперь у нас есть графический элемент, и мы переходим к самой "хитрой" задаче: мы определим, как должна работать наша всплывающая подсказка. Перечень необходимых элементов может оказаться чрезвычайно большим, но все же лучше рассмотреть возможно большее их количество. Если мы сейчас представим себе все ситуации, в которых можно применять данный компонент, то сэкономим время в дальнейшем. Итак, нам нужно, чтобы:

• всплывающая подсказка ассоциировалась с фильмом при добавлении в него всплывающей подсказки;
• всплывающая подсказка сама присваивала себя указателю мыши, а также обеспечить возможность указания расстояния от указателя;
• подсказка появлялась через короткий интервал времени при перемещении пользователем указателя мыши над фильмом, связанным с подсказкой;
• всплывающая подсказка исчезала при перемещении пользователем указателя мыши в сторону от связанного с ней фильма;
• текст всплывающей подсказки мог быть изменен в любое время и соответствующим образом обновлен;
• подсказка могла быть включена и выключена в любое время;
• можно было в любое время удалить всплывающую подсказку;
• можно было применять подсказку в фильме во время выполнения;
• можно было изменять конечный фильм любой подсказки во время выполнения;
• функция всплывающей подсказки применялась к кнопке без пересечения с обыкновенными функциями данной кнопки.

Теперь, имея список основных требований, составим список нужных параметров.

• Отображаемый текст.
• Максимальная ширина.
• Включенные шрифты.
• Конечный фильм.
• Расстояние от указателя мыши по оси X.
• Расстояние от указателя мыши по оси Y.
• Интервал перед появлением в миллисекундах.
• Включенная всплывающая подсказка.
• Предварительный просмотр.

Укажем, какие действия должны выполнять некоторые из нужных нам функций.

• Устанавливать текст подсказки и перерисовывать фон для согласования размеров.
• Показывать подсказку.
• Скрывать подсказку.
• Устанавливать конечный фильм для всплывающей подсказки.
• Включить подсказку.
• Выключать подсказку.
• Вызывать подсказку.
• Удалять подсказку.

Реализация появления подсказки при проходе указателем

Сначала рассмотрим, как всплывающая подсказка будет относиться к ассоциированному фильму. Нам нужно обеспечить возможность перетаскивания подсказки в фильм и автоматического создания ассоциации аналогично тому, как компонент scrollBar переходит на ближайшее текстовое поле. Получить этот результат довольно просто. Надо добавить параметр в список параметров компонента с именем переменной _targetInstanceName. Мы сможем также добавить дополнительные параметры, перечисленные выше.

1. Откройте файл graphic+livePreview.fla и сохраните его в файле tooltipProper.fla. Выделите компонент tooltip в Library, щелкните на белом значке меню и выберите пункт Component Definition.
2. Откройте диалоговое окно Component Definition для всплывающей подсказки и добавьте параметры. Мы добавили пять новых параметров, включая Target MovieClip, выделенный на следующем рисунке, и четыре параметра под ним.
   

   
   
3. Теперь создайте фильм с любым рисунком (мы использовали в качестве рисунка маленький черный круг без заливки). Назовите его targ_mc. Перетащите копию на рабочее место и с помощью Property inspector дайте инстансу имя targ_mc.
4. Теперь возьмите инстанс компонента tooltip и перетащите его на верх фильма targ_mc. Вы увидите, что теперь он перемещается на место, и что поле Target MovieClip на панели Component Parameters изменилось на targ_mc.
   

   
   увеличить изображение
   

   Конечно, мы могли бы просто ввести это значение вручную, если бы это требовалось (например, если бы мы хотели оставить всплывающие подсказки вне поля зрения).

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

   Другая ситуация - наличие кнопки прокрутки. Несмотря на то, что мы можем расположить кнопку поверх другой кнопки и вызывать функцию прохода нижней кнопки, мы не можем прокручивать ее. Вместо этого мы попытаемся установить функцию прохода фильма для вызова функции внутри всплывающей подсказки, которая будет отображать сама себя через небольшой интервал времени.
5. Чтобы создать функцию onRollOver в конечном фильме, создадим функцию setTarget. Прежде всего добавим вызов функции setTarget в функции init. Добавленный код выделен жирным шрифтом.

   tooltip.prototype.init = function() {
           this.bg_mc._visible = 0;
           // hide tooltip to start with
           this._visible = 0;
           // call setTarget
           this.setTarget(this._parent[this._targetInstanceName]);
           this.draw();
       };

   Мы передаем функции setTarget ссылку на конечный фильм. В функции setTarget необходимо создать ссылку на компонент tooltip для простоты использования, и затем установить функции для элементов управления rollOver, rollOut и dragOut.
6. Функция rollOver будет инициализировать паузу, после которой будет отображаться всплывающая подсказка. Функции onRollOut и onDragOut будут выполнять одно и то же действие - заканчивать паузу, в случае, если подсказка еще не отображена, и затем вызывать функцию для удаления подсказки. Теперь добавим следующий код над исходной функцией draw.

   tooltip.prototype.setTarget = function(me) {
           // create reference to target movieclip
           this.targetMovie = me;
           // create reference to tooltip inside target movieclip
           this.targetMovie.toolTip = this;
           this.targetMovie.onRollOver = function() {
           // create an interval after which to display tooltip
           this.toolTip.wait = setlnterval
             (this.toolTip, "displayToolTip", 
              this.tooltip.interval);
           };
           this.targetMovie.onRollOut = function() {
           // on rollOur clearlnterval in case tooltip has not yet
           // appeared
               clearlnterval(this.toolTip.wait);
               this.toolTip.clearToolTip();
           };
           this.targetMovie.onDragOut = this.targetMovie.onRollOut;
       };

   Несмотря на то, что мы определяем управляющие функции внутри подсказки, при выполнении они будут вести себя так, будто они находятся внутри конечного фильма, и поэтому для обращения к подсказке мы используем this.tooltip.
7. Далее мы создаем методы displayTooltip и clearTooltip. Их действие понятно из названий; метод displayTooltip будет сначала прерывать вызванный интервал и затем устанавливать функцию mouseMove для подсказки putMeByMouse, что переместит фильм на позицию указателя мыши.

   tooltip.prototype.displayTooltip = function() {
           // clear interval so the method is not called again
           clearlnterval(this.wait);
           // show tooltip
           this._visible = 1;
           // set mouseMove function
           this.onMouseMove = this.putMeByMouse;
           // put tooltip by mouse
           this.putMeByMouse();
       };

   Метод clearTooltip будет удалять управляющий элемент mouseMove и заканчивать отображение всплывающей подсказки.

   tooltip.prototype.clearTooltip = function() {
           delete this.onMouseMove;
           this._visible = 0;
       };

   Теперь нам нужно создать метод putMeByMouse, чтобы получить функционирующую всплывающую подсказку. Этот метод довольно прост. Он получает координаты X и Y указателя мыши и затем использует метод globalToLocal для преобразования этих глобальных координат в локальные координаты.

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

   Метод globalToLocal переводит глобальные координаты указателя мыши в локальные координаты текущего фильма. Метод, грубо говоря, отвечает на вопрос: "Где примерно внутри этого фильма нужно расположить фильм, чтобы он оказался на указанном наборе координат в root?". Для обеспечения работы globalToLocal мы передаем этому методу объект с параметрами X и Y. Затем он превращает глобальные координаты, указанные внутри объекта, в локальные координаты относительно указанного фильма, в данном случае - _parent.

   tooltip.prototype.putMeByMouse = function() {
       // create point object
           var point = {x:_root._xmouse+this.xOffSet,
            y:_root._ymouse+this.yOffset};
       // translate co-ordinates inside point to local co-ordinates
           this._parent.globalToLocal(point);
           this._x = point.x;
           this._y = point.y;
           updateAfterEvent();
       };
8. Сохраните фильм в файле finalTooltipBasic.fla. Запустив его, вы увидите работающую базовую подсказку.
   

   
   

   При прохождении курсора мыши над объектом появляется всплывающая подсказка, а при движении его в сторону от объекта подсказка исчезает. Вы можете изменять продолжительность интервала на панели Component Parameters, так же как и расстояние X и Y от позиции курсора мыши, для достижения различных эффектов.