НОУ ИНТУИТ | Flash MX Studio. Лекция 5: Компоненты

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный

|

Вам нравится? Нравится 30 студентам

| Поделиться |

Поддержать программу

Теперь создадим некоторые функции, использующие эти значения. Начнем с функции init, которая будет вызываться при запросе на функцию конструирования. Назовите слой с кодом именем scripts в фильме tooltip и введите следующий выделенный жирным шрифтом код, который вы уже добавляли, но перед #endinitclip.
```
#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
```
Функция draw будет создавать текстовое поле и устанавливать его параметр text на значение переменной tooltipText. Добавьте этот код после функции init, но перед #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

Пример 4.1.

Сохраните фильм в файле justGraphic.fla, убедитесь, что инстанс компонента находится в главной части фильма, и запустите его. Вы увидите рисунок подсказки на рабочем столе с текстом "empty" и стандартным шрифтом Times New Roman 12 пт.

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

 A TITLE
 
 
 and a larger piece of body text
 
```
Вы увидите, что всплывающая подсказка изменит свой размер, чтобы вместить текст.

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

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

Дальше >>

Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

ответить

Александр Коргапольцев

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

ответить