Компоненты

#initclip 1
    function tooltip() {
        // call initialize function
        this.init();
    }
    tooltip.prototype = new MovieClip();
    Object.registerClass("tooltipMc", tooltip);
    tooltip.prototype, init = function() {
        // call the draw function
        this.draw();
    };
    #endinitclip

tooltip. prototype, draw = function() {
        // create textfield
        this.createTextField("myText", 3, 14, 2, this.maxWidth, 10);
        // set text options
        this.myText .autoSize = true;
        this. myText. embedFonts = this.embedFonts ;
        this.myText .wordwrap = true;
        this. myText. condenseWhite = true;
        this.myText.html = true;
        this.myText.htmlText = this.tooltipText;
        this.myText.selectable = false;
    };

Мы присваиваем переменную tooltipText параметру htmlText, так как это наиболее легкий способ применить форматирование к тексту. Мы могли бы настроить всплывающую подсказку на использование объектов textFormat, но в данном случае мы будем использовать более простой способ применения формата к тексту. Вы сможете ввести HTML-текст прямо в панель Component Parameters и отобразить его в подсказке с примененным форматированием. Мы также использовали переменную maxWidth для установки ширины текстового поля. Настроив наш объект с возможностью использования параметров textWidth и textHeight, мы обеспечили перенос текста на следующую строку по достижении им максимальной ширины.

tooltip.prototype.draw = function() {
        this.createTextField("myText", 3, 14, 2, this.maxWidth, 10);
        this. myText .autoSize = true;
        this.myText.embedFonts = this.embedFonts;
        this.myText.wordwrap = true;
        this.myText.condenseWhite = true;
        this.myText.html = true;
        this.myText.htmlText = this.tooltipText;
        this.myText.selectable = false;
        // set width and height of graphic
        var w = this.myText.textWidth+32;
        var h = this.myText.textHeight+7;
        // call drawGraphic function
        this.drawGraphic(w, h);
    };

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

Следующий код рисует фон подсказки. Здесь мы используем метод drawSquare, созданный в предыдущей лекции. Мы создадим его не как метод объекта MovieClip, а как метод объекта toolTip, так как не все фильмы нуждаются в нем, и возможно возникновение конфликтов с пользовательским методом drawSquare. Метод drawGraphic рисует 3 прямоугольника: черный для фона, черный для тени с правой стороны, и, наконец, светлый для самой подсказки.

tooltip.prototype.drawGraphic = function(w, h) {
        // clear any existing drawing
        this.clear();
        // draw three squares to make the background graphic
        this.drawSquare(0, 0, w+2, h+3, 0x000000, 100);
        this.drawSquare(w+2, 3, 1, h, 0x00000, 100);
        this.drawSquare(1, 1, w, h, 0xf3f3f3, 100);
    };

    tooltip.prototype.drawSquare = 
      function(x, y, w, h, fillCol,fillAlpha) {
        this.moveTo(x, y);
        this.lineStyle();
        this.beginFill(fillCol, fillAlpha);
        this.lineTo(x+w, y);
        this.lineTo(x+w, y+h);
        this.lineTo(x, y+h);
        this.lineTo(x, y);
        this.endFill();
    };

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

Приведем целиком код, имеющийся на данный момент.

#initclip 1
        function tooltip() {
            this.init();
        }
        tooltip.prototype = new MovieClip();
        Object.registerClass("tooltipMc", tooltip);
        tooltip.prototype.init = function() {
            this.draw();
        };
        tooltip.prototype.draw = function() {
            this.createTextField("myText", 3, 14, 2, this.maxWidth, 10);
            this.myText.autoSize = true;
            this.myText.embedFonts = this.embedFonts;
            this.myText.wordWrap = true;
            this.myText.condenseWhite = true;
            this.myText.html = true;
            this.myText.htmlText = this.tooltipText;
            this.myText.selectable = false;
            var w = this.myText.textWidth+32;
            var h = this.myText.textHeight+7;
            this.drawGraphic(w, h);
        };
        tooltip.prototype.drawGraphic = function(w, h) {
            this.clear();
            this.drawSquare(0, 0, w+2, h+3, 0x000000, 100);
            this.drawSguare(w+2, 3, 1, h, 0x00000, 100);
            this.drawSquared, 1, w, h, 0xf3f3f3, 100);
        };
        tooltip.prototype.drawSquare = function(x, y, w, h, fillCol,fillAlpha) {
            this.moveTo(x, y);
            this.lineStyle();
            this.beginFill(fillCol, fillAlpha);
            this.lineTo(x+w, y);
            this.lineTo(x+w, y+h);
            this.lineTo (x, y+h);
            this.lineTo(x, y);
            this.endFill();
        };
        #endinitclip

Попробуйте изменить некоторые параметры, например, установите ширину maxWidth на значение 140, и в поле текстовой переменной добавьте:

<font face="verdana" size="10" color="#ff0000">
        <b>A TITLE</b>
        <br/>
    </font>
    <font face="arial"   size="10"> and a larger piece of body text
    </font>

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

Имейте в виду, что если вы установите параметр embedFonts на значение Истина (True), то, как обычно в случае с динамическими текстовыми полями, вам понадобится применить шрифт еще в каком-либо месте фильма. Это неудобно, так как было бы предпочтительнее соблюдать автономность компонента, но с этим приходится мириться.

tooltip.prototype.init = function() {
        // turn off the bg placeholder
        this.bg_mc._visible = false;
        this.draw();
    };

function onUpdate() {
        // if displayPreview is true turn off bg_mc and vice versa
        this.bg_mc._visible = !_root .xch. displayPreview;
        // if displayPreview is true turn on tt_mc and vice versa
        this.tt_mc._visible = _root.xch.displayPreview;
        // do not embed fonts
        this.tt_mc.embedFonts = false;
        // retrieve values from xch and set as values inside tt_mc
        this.tt_mc.maxWidth = _root.xch.maxWidth;
        this.tt_mc.tooltipText = _root.xch.tooltipText;
        // call tt_mc'xs draw method
        this.tt_mc.draw();
    }

Здесь мы используем параметр displayPreview для настройки отображения фильма всплывающей подсказки и фильма bg_mc. Если значением параметра displayPreview является истина, то bg_mc невидим, а tt_mc отображается, в противном случае - наоборот.

Мы здесь также устанавливаем embedFonts на значение Ложь (False) независимо от значения в xch, поскольку нельзя получить все возможные включенные шрифты в предварительном просмотре фильма. Чтобы включенный шрифт отображался в предварительном просмотре с включенным сглаживанием, можно включить отдельные шрифты внутри просмотра SWF. В данном случае все шрифты, которые вам нужны, будут отображаться корректно, но без эффекта сглаживания.

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

Если вы сейчас посмотрите на рабочее место, то увидите всплывающие подсказки с установленными вами параметрами.

Теперь, если вы измените параметры, добавите новый текст, измените ширину и т.д., внешний вид всплывающих подсказок на рабочем месте будет обновляться для отображения внесенных изменений, передавая эти значения объекту xch в просмотре SWF и вызывая функцию onChanged.

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

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

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

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.

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.

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;
    };

Теперь нам нужно создать метод указателя мыши и затем использует метод 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();
    };

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

targ_mc.onPress = function() {
        this.tooltip.tooltipText +=
         "<font face='arial' size='10'> oh</font>";
    };

Как видите, при выполнении кода не происходит никаких действий, поскольку текстовое поле обновляется только тогда, когда вызывается функция draw. Если бы мы знали, что происходит внутри подсказки, то поступили бы так:

targ_mc.onPress = function(} {
        this.tooltip.tooltipText += 
        "<font face='arial' size='10'> oh</font>";
        this.tooltip.draw();
    };

Это далеко не идеальный вариант. Мы хотим как можно проще обеспечить интерфейс компонентом, поэтому будет гораздо лучше, если при изменении tooltipText будет автоматически обновляться подсказка. Одним из новых методов во Flash MX, позволяющим реализовать это, является addProperty. addProperty позволяет добавлять параметр, который существует как обычная переменная, но при обращении к нему вызывает специальные функции для установки переменной и получения переменной - "получатель" и "установщик".

Параметр, создаваемый с помощью выражения addProperty, называется получатель/установщик и появляется при перечислении переменных с помощью [getter/setter] после имени переменной. Установим tooltipText для подсказки в виде получателя/установщика.

tool tip.prototype.init = function() {
        this.bg_mc._visible = 0 ;
        this._visible = 0;
        this.setTargetIthis._parent[this._target!nstanceName]);
        // add tooitipText as a getter / setter property
        this.addProperty("tooitipText", this.getText, this.setText);
        this.draw();
    };

Если вы когда-либо столкнетесь с проблемами при использовании addProperty, убедитесь, имеются ли и правильно ли настроены функции получения и установки. Обычно проблемы возникают, если отображаемое значение не определено при указании переменных. Другой способ проверить, все ли в порядке - это поместить все выражение addProperty в trace: если параметр определен, то будет возвращено значение "истина", в противном случае - "ложь".

tooltip.prototype.getText = function() {
        return this.tooltipText;
    }

tooltip.prototype.setText = function(newVal) {
        this.tooltipText = newVal;
        this.draw();
    };

Если вы изменяли код ранее в вашей временной диаграмме, вернитесь к исходному коду.

targ_mc.onPress = function() {
        this.tooltip.tooltipText +=
          "<font face='arial' size='10'> oh</font>";
    };

Это еще не настоящее приложение, но мы теперь знакомы с некоторыми важными концепциями. Теперь добавим параметр активности.

tooltip.prototype.init = function() {
    this.bg_mc._visible = 0;
    this._visible = 0;
    this.setTarget(this._parent[this._targetInstanceName]);
    this.addProperty("tooltipText", this.getText, this.setText);
    // add ttEnabled as a getter / setter property
    this.addProperty("ttEnabled", this.getEnabled, this.setEnabled) ;
    this.draw();
};

tooltip.prototype.setEnabled = function(newval) {
        this.ttEnabled = newval;
        if (!this.ttEnabled) {
            this.clearTooltip();
        }
    };
    tooltip.prototype.getEnabled = function() {
        return this.ttenabled;
    };

Итак, если ttEnabled установлен на значение "ложь", мы устанавливаем переменную и затем удаляем подсказку, если она уже отображена, с помощью вызова метода clearTooltip.

tooltip.prototype.displayTooltip = function() {
        clearlnterval(this.wait);
        // check if tooltip enabled before displaying
        if (this.ttEnabled) {
            this._visible = 1;
            this.onMouseMove = this.putMeByMouse;
            this.putMeByMouse();
        }
    };

targ_mc.onPress = function() {
        this.tooltip.ttEnabled = !this.tooltip.ttEnabled;
    };

obj = {
        ttEnabled:true, _targetInstanceName:"targ_mc",
         tooltipText: "whatever text you reckon",
        КmaxWidth:150, interval:50, x0ffset:6, y0ffset:-12
        }
    _root.attachMovie("tooltipMc","tt_mc",1,obj)

Запустив код, вы увидите, что все работает правильно, но не очень удобно для пользователя, которому необходимо вводить множество данных с клавиатуры, причем если пользователь забудет ввести хотя бы один параметр, код работать не будет. Поэтому нам нужно как-то изолировать функцию init. Если какие-либо параметры не будут определены, мы будем устанавливать их на значения по умолчанию.

tooltip.prototype.init = function() {
        this.bg_mc._visible = 0;
        this._visibie = 0;
        // with all of the following we check if the property
        // is defined and if not set a default value
        if (this.tooltiptext == undefined) {
            this.tooltiptext = "empty";
        }
        if (this.interval == undefined) {
            this.interval = 500;
        }
        if (this._parent[this._targetlnstanceName]) {
            this.setTarget(this._parent
             [this._targetInstanceName]);
        }
        if (this.maxWidth == undefined) {
            this.maxWidth = 500;
        }
        if (this.xOffset == undefined) {
            this.xOffset = 12;
        }
        if (this.yOffset == undefined) {
            this.yOffset = -6;
        }
        if (this.ttEnabled == undefined) {
            this.ttEnabled = true;
        }
        this.setTarget(this._parent[this._targetInstanceName]);
        this.addProperty("tooltipText", this.getText, this.setText);
        this.addProperty("ttEnabled", 
          this.getEnabled, this.setEnabled);
        this.draw
    };

Мы также вызываем функцию setTarget только в том случае, если у нас есть _targetInstanceName. В противном случае мы ждем, пока она не будет вызвана вручную.

_root.attachMovie "tooltipMc" , "tt_mc", 1);
    tt_mc.setTarget(targ_mc);
    tt_mc.tooltipText = "a piece of text";

Сохраните фильм в файле finalTooltipbasicAttach.fla. Этот подход использует только значения по умолчанию, однако мы могли бы передавать инициализационный объект так же, как раньше передавали установки максимальной ширины, и т.д. Если значения на месте, они используются, в противном случае берутся значения по умолчанию.

targ_mc.onRollOver = function() {
        this._alpna = 50;
    };
    targ_mc.onRollOut = function() {
        this._alpha = 100;
    };

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

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

Нам также нужно быть уверенными в том, что если пользователю нужно будет присвоить разные функции этим управляющим элементам, то все обновится еще раз для выполнения как новой функции, так и функции вызова подсказки. Для реализации этой возможности мы можем использовать еще один новый метод, доступный во Flash MX - метод Object.watch.

Object.watch работает аналогично addProperty, позволяя следить за значением параметра или метода, а также вызывать указанную функцию каждый раз при изменении параметра. Это может использоваться для выяснения значения функции rollOver фильма и дальнейшего присвоения новой функции, что будет сначала вызывать эту новую функцию, а потом и саму подсказку.

tooltip.prototype.setTarget = function(me) {
        this.targetMovie = me;
        this.targetMovie.toolTip = this;
        / / set watch points on the button actions of the target
        this.targetMovie.watch("onRollOver", this.addToRollOver);
        this.targetMovie.watch("onRollOut", this.addToRollOut);
        this.targetMovie.watch("onDragOut", this.addToDragOut);
        this.targetMovie.onRollOut = this.targetMovie.onRollOut;
        this.targetMovie.onRollOver = this.targetMovie.onRollOver;
        this.targetMovie.onDragOut = this.targetMovie.onDragOut;
    }

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

tooltip.prototype.addToRollover = function(id, oldVal, newVal) {
        // store tne new rollover value in oldRollover
        this.tooltip.oldRollOver = newVal;
        // define the function that will be returned to the
        // target movieclip as its new rollover function
        return function    {
            // call the old Rollover function
            this.tooltip.oldRollover.call(this);
            / trigger the tooltip
            this.tooltip.wait = setlnterval
              (this.tooltip, "displayTooltip" , 
                this . tooltip, interval) ;
        };
    };

Разберем каждую строку этого кода, начиная с определения функции.

tooltip.prototype.addToRollover = function (id, oldVal, newVal) {

Функции, вызываемой Object.watch, передаются три аргумента: id, oldVal и newVal. id ссылается на наблюдаемый параметр, oldVal представляет собой предыдущее значение, присвоенное параметру, а newVal - новое значение, присваиваемое параметру.

this.tooltip.oldRollOver = newVal;

Здесь мы сохраняем функцию, на которую установлен onRollOver или на которую пользователь попытался установить его, в переменной с именем oldRollOut внутри подсказки. Строго говоря, мы перехватываем это значение. Мы могли бы сохранить его в конечном фильме, но лучше по мере возможности избегать помещения в объект-цель различных элементов.

Теперь возвращаем функцию, которая будет непосредственно настроена как onRollOver конечного фильма.

return function () {
        this.tooltip.oldRollover.call(this);
        this.tooltip.wait = setlnterval(this.tooltip, "displayTooltip", 
             this.tooltip.interval);

Первая строка этого кода вызывает функцию oldRollover, а вторая устанавливает интервал до вызова displayTooltip, точно так же, как это делалось ранее. Вы могли заметить, что первая строка кода использует функцию call для вызова функции. Это по той причине, что функция oldRollover находится внутри подсказки. Но мы хотим, чтобы она действовала так, как если бы она находилась в конечном фильме. Наш исходный метод хранения oldRollOver внутри конечного фильма состоял в том, что мы имели бы только следующий код.

this.oldRollover () ;

Так как oldRollover находится внутри подсказки, а не в конечном фильме, мы не можем так поступить. Вместо этого мы используем function.call - еще одно новое дополнение к Flash MX. Оно позволяет осуществлять вызов функции, находящейся в каком-либо месте, как если бы она находилась где-то еще. Если вы обратите внимание на объявление прохода курсора (rollover), вы увидите, что местом, в котором выполняется код, является конечный фильм. Другими словами, this ссылается на конечный фильм.

return function    {
    this.tooltip.oidRollover.call(this);
    this.tooltip.wait = setlnterval(this.tooltip, "displayTooltip", 
        this.tooltip.interval;
    };

Когда мы используем function.call для вызова функции, то передаем аргумент (перед любыми другими аргументами, которые у нас могут быть), указывая место, в котором функция должна выполняться, в данном случае это this. По сути дела, это выражение означает "вызвать функцию oldRollover внутри фильма подсказки, однако выполнить ее так, будто она была бы в моей собственной временной диаграмме".

tooltip.prototype.addToRollover = function(id, oldVal, newVal) {
    this.tooltip.oldRollOver = newVal;
    return function () {
        this.tooltip.oldRollover.call(this);
        this.toolTip.wait = setlnterval(this.toolTip, "displayToolTip",
             this.tooltip.interval);
     };
};
tooltip.prototype.addToRollOut - function(id, oldVal, newVal) {
    this.tooltip.oldRollOut = newVal;
    return function () {
        this.tooltip.oldRollOut.call(this);
        clearlnterval(this.toolTip.wait);
        this.toolTip.clearToolTip();
     };
};
 tooltip.prototype.addToDragOut = function(id, oldVal, newVal) {
     this.tooltip.oldDragOut = newVal;
     return function () {
        this.tooltip.oldDragOut.call(this);
        clearlnterval(this.toolTip.wait);
        this.toolTip.clearToolTip();
     };
 };

Если мы посмотрим на исходный список возможностей подсказки, то станет видно, что нам осталось обеспечить лишь небольшую их часть. Нереализованными остались требования удаления подсказки и ее переключения с одного фильма на другой. Эти требования взаимосвязаны. На данный момент пользователь может просто удалить фильм с использованием tooltip.removeMovieClip(). Это будет действовать, однако когда подсказка будет удалена, будут удалены также все управляющие элементы onRollOver, и останется только ссылка на подсказку в конечном фильме.

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

tooltip.prototype.clearTooltipInfо = function() {
        // delete reference to tooltip
        delete this.targetMovie.tooltip;
        // stop watching the button handlers
        this.targetMovie.unwatch("onRollOver");
        this.targetMovie.unwatch("onRollOut");
        this.targetMovie.unwatch("onDragOut");
        // if the button handlers are undefined delete them
        if (this.oldRollOut == undefined) {
            delete this.targetMovie.onRollOut;
        } else {
            this.targetMovie.onRollOut = this.oldRollOut;
        }
        if (this.oldDragOut == undefined) {
            delete this.targetMovie.onDragOut;
        } else {
            this.targetMovie.onDragOut = this.oldDragOut;
        }
        if (this.oldRollOver == undefined) {
            delete this.targetMovie.onRollOver;
        } else {
            this.targetMovie.onRollOver = this.oldRollOver;
        }
    };

tooltip.prototype.onUnload = function() {
        this.clearTooltipInfo();
    };

tooltip.prototype.setTarget = function(me) {
        // if targetMovie is already defined, disassociate the
        // tooltip from it
        if (this.targetMovie) {
            this.clearTooltipInfo();
        }
        this.targetMovie = me;
        this.targetMovie.tooltip = this;
        this.targetMovie.watch("onRollOver", this.addToRollOver);
        this.targetMovie.watch("onRollOut", this.addToRollOut);
        this.targetMovie.watch("onDragOut", this.addToDragOut);
        this.targetMovie.onRollOut = this.targetMovie.onRollOut;
        this.targetMovie.onRollOver = this.targetMovie.onRollOver;
        this.targetMovie.onDragOut = this.targetMovie.onDragOut;
    };

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

targ_mc.onRollOver = function() {
        this._alpha = 50;
    };
    targ_mc.onRollOut = function() {
        this._alpha = 100;
    };
    targ_mc.onPress = function () {
        this.tooltip.removeMovieClip();
    };
    _root.attachMovie "tooltipMc", "nootool", 2);
    _root.nootool.setTarget(targ_mc);

Код данной программы достаточно велик, чтобы приводить его в книге, однако вы можете обратиться к полному коду в исходном файле finalTooltipDone.fla. Имеется также дополнительный файл FLA (finalTooltipImplemented.fla) с несколькими вариантами применения подсказки, включая ее динамическое создание, применение к рабочему месту и к вложенному фильму.

Существуют и другие элементы, которые вы можете добавить в фильм. Вы можете реализовать управление цветом, которое будет добавляться так же, как и параметр text, или добавить параметры для указания глубины тени подсказки и ее яркости.

Можно превратить tooltipText в параметр конечного фильма, чтобы пользователь мог использовать выражение myMovie.tooltiptext вместо mymovie.tooltip.tooltiptext. Это делается либо с помощью watch, либо посредством addProperty. Можно превратить maxWidth в получатель/установщик, если нужно осуществлять управление во время выполнения, а также добавить проверку изменения размера фильма, содержащего подсказку. Если изменения есть, то размер подсказки изменялся бы с сохранением пропорций. При таком подходе лучше создать подсказку на главном рабочем месте, а не в фильме. Итак, мы изучили подход к созданию компонента - самостоятельного программного продукта.

Напоследок настроим отображение компонента подсказки на панели Components. Создайте новый файл FLA с одним компонентом подсказки внутри него. Откройте диалоговое окно Component Definition и отметьте опцию Display in Components Panel. После этого разместите этот FLA в папке, где Flash осуществляет поиск компонентов при запуске. Путь будет выглядеть примерно так: Program Files/Macromedia/Flash MX/First Run/Components. При закрытии Flash и повторном его открытии, компонент должен будет появиться на панели Components. Помните, что можно помещать несколько компонентов внутри FLA, в случае чего они будут отображаться в виде набора (так же, как отображаются компоненты Flash UI).

#initclip
    function nooButton() {
        this.init();
    }
    nooButton.prototype = new MovieClip();
    Object.registerClass ("nooButtonMc" , nooButton) ;

nooButton.prototype.init = function() {
        // set up a new color object
        this.col = new Color(this);
        this.texta.autosize = true;
        this.texta.embedfonts = this.embedFonts;
        this.texta.text = this.myText;
        this.texta.setTextFormat(this.tf);
        // add getter / setter properties for width and height
        this.addProperty("width", this.getWidth, null);
        this.addProperty("height", this.getHeight, null);
        this.setButtonActions();
    };

Здесь мы выполняем несколько действий: создаем объект Color для фильма, настраиваем текстовое поле, добавляем параметры для ширины и высоты, и, наконец, вызываем функцию для установки всех действий кнопки. Все значения, такие как this.myText, this.embedFonts и т.д., будут передаваться в фильм при его подключении.

nooButton. prototype . getWidth = function() {
        return this.texta.textWidth;
    };
    nooButton.prototype.getHeight = function() {
        return this.texta.textHeight;
    };

nooButton.prototype.setButtonActions = function() {
        this.onPress = function() {
        this.setActive();
        this.obj [this.pressFunction] (this.pressArgs);
        };
        this.onRelease = function() {
        this.obj [this.releaseFunction](this.releaseArgs);
        };
        this.onRollOver = function() {
            this.setCol(this.rollOverBright);
            this.obj [this.rollOverFunction](this.rolloverArgs);
        };
        this.onDragOut = function() {
            this.setCol(this.defaultBright);
            this. obj [this .dragOutFunction] (this.dragOutArgs);
        };
        this.onRollOut = function() {
            this.setCol(this.defaultBright);
            this.obj [this.rolloutFunction] (this.rolloutArgs);
        };
    };

Помимо этих функций, мы вызвваем еще один внутренний метод. Первым из них является setCol, который просто вызывает setBrightness для объекта цвета.

nooButton.prototype.setCol = function(bright) {
        this.col.setBrightness(bright);
    };

После этого для функции press мы вызываем setActive, который отменяет все действия кнопок и затем сохраняет ссылку на самое себя в глобальной переменной nooActive. Фильм, уже имеющийся внутри nooActive, вызывает свой метод setInactive. В других обстоятельствах вы можете применить своего рода обратную связь для создания более мелких групп кнопок, однако для наших целей это не требуется.

nooButton.prototype.setActive = function() {
        this.clearButtonActions();
        // deactivate the button that is currently active
        nooActive.setInactive();
        _global.nooActive = this;
        this.setCol(this.activeBright);
    };
    nooButton.prototype.clearButtonActions = function() {
        // delete all button handlers
        delete this.onPress;
        delete this.onRelease;
        delete this.onRollOver;
        delete this.onDragOut;
        delete this.onRollOut;
    };

Метод setInactive сбрасывает действия кнопки и затем вызывает setVisited. setVisited, в свою очередь, устанавливает значение яркости по умолчанию для кнопки на значение яркости посещенной кнопки, поэтому при вызове rollOut и т.п. они вернут кнопке яркость посещенной кнопки вместо исходной яркости.

nooButton.prototype.setInactive = function() {
        this.setButtonActions();
        this.setVisited();
        this.setCol(this.defaultBright);
    };
    nooButton.prototype.setVisited = function() {
        this.def aultBricrht = this.visitedBright;
    };

function createButtons(imageArr, tF) {
        _root.createEmptyMovieClip("buttonHolder", ++this.depth);
        buttonHolder._x = leftPos+10;
        buttonHolder._y = topPos+imageHeight+5;
        var currx;
        for (var i = 0; i<images.length; i++) {
            var caption = (i+1).toString().length>1 ? i+1 : "0"+(i+1);
            var obj = {myText:caption, _x:currx, obj:_root,
            КdefaultBright:0, rollOverBright:30, visitedBright:60,
            КactiveBright:-10, pressFunction:"centerPic",
            КpressArgs:imageArr [i], tf:buttonTextFormat,
            КembedFonts:true}; var nooButton = buttonHolder.attachMovie
            К("nooButtonMc", "noob"+i, i, obj);
            currX += nooButton.width+5;
        }
    }

buttonTextFormat = new TextFormat ("Arial", 15, 0xdddddd, true);

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