Компоненты

Живой просмотр

Чтобы увидеть результат изменений в параметрах всплывающей подсказки, нужно запустить фильм. "Живой" просмотр позволяет просматривать изменения в реальном времени на рабочем месте, сразу по мере их внесения. Такой интерактивный просмотр реализовать довольно просто, однако необходимо учесть некоторые моменты.

Прежде всего, при реализации "живого" просмотра необходимо создать новый файл Flash, который будет принимать все значения, установленные в панели Component Parameters. Каждый раз при изменении значения в панели Component Parameters вызывается функция onUpdate в файле "живого" просмотра.

Все параметры компонента устанавливаются внутри объекта с именем xch. Этот объект автоматически создается в "живом" просмотре фильма, нам не требуется создавать его.

При вызове onUpdate должен перерисовывать всплывающую подсказку с использованием значений, находящихся в xch, таких как xch.maxWidth и xch.tooltipText.

Изменение размера - это одна из особенностей, связанных с интерактивными просмотрами, и мы можем столкнуться с множеством проблем, если фильм в интерактивном просмотре отличается по размеру от фильма tooltip. Способ, который мы использовали для его отображения без рисунков внутри, будет вызывать проблемы при реализации просмотра "вживую".

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

Настройка интерактивного просмотра

Перед созданием "живого"; просмотра нужно изменить пару моментов в нашем компоненте всплывающей подсказки - добавить поле в фильм.

1. Откройте компонент всплывающей подсказки и нарисуйте прямоугольник размером 150 пикселей в ширину и 50 пикселей в высоту.
2. Преобразуйте его в фильм и присвойте ему точку закрепления в левом верхнем углу, назвав символ именем bg_mc, и затем удалите этот интанс.
3. Добавьте строку кода (выделено жирным) в функцию init, чтобы сделать ее невидимой при инициализации фильма.

   tooltip.prototype.init = function() {
           // turn off the bg placeholder
           this.bg_mc._visible = false;
           this.draw();
       };
4. Теперь мы готовы к созданию фильма для "живого" просмотра. Сохраните текущий фильм в файле graphic+LivePreview.fla и сохраните его еще раз под именем tooltipPreview.fla.
5. В tooltipPreview.fla измените размер на 150x50 пикселей. Убедитесь, что имеется только один инстанс компонента всплывающей подсказки на рабочем месте, и расположите его на его собственном слое с именем tooltip в точке (0,0). Далее используйте Property inspector для присвоения инстансу имени tt_mc.
6. Теперь создайте другой слой под tooltip и назовите его bg. На этом слое перетащите инстанс фильма bg_mc на рабочее место и с помощью Property inspector назовите инстанс именем bg_mc.
7. Далее создайте слой scripts для функции onUpdate. onUpdate вызывается каждый раз при изменении параметров компонента на рабочем месте и обновляет компонент всплывающей подсказки в интерактивном просмотре фильма значениями из фильма xch.

   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. В данном случае все шрифты, которые вам нужны, будут отображаться корректно, но без эффекта сглаживания.
8. Запустите фильм так, чтобы для него был SWF, и затем сохраните файл. Теперь мы настроим созданный SWF на SWF просмотра всплывающей подсказки.
9. Откройте graphic+livePreview.fla и, выделив компонент tooltip в Library, щелкните на белом значке меню и выберите пункт меню Component Definition, чтобы открыть диалоговое окно Component Definition.
10. Щелкните на кнопке Set: рядом со строкой Live Preview. Появится диалоговое окно Live Preview:

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

    

    
    
11. Здесь мы используем последнюю опцию. Щелкните на третьей кнопке-переключателе, чтобы включить SWF во FLA; граница при перемещении файла будет сохраняться.
12. Вернитесь в graphic+livePreview.fla, дважды щелкните на компоненте tooltip в Library, чтобы войти в него. Перетащите инстанс фильма bg_mc внутрь компонента tooltip. С помощью Property inspector расположите его на позиции (0,0) и назовите bg_mc.

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

    

    
    

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