← Назад

Урок 7.

Свойства и функции

В этом уроке вы познакомитесь с ролью свойств и функций в системе Flash. Ключ к созданию динамичных фильмов — это возможность изменять значение свойств и передавать информацию о состоянии свойств различных объектов. Помимо свойств в данном уроке подробно рассматриваются многие функции Flash и способы их использования во взаимодействии с соответствующими объектами и свойствами.

Свойства в системе Flash

В уроке 1 вы познакомились с понятием объектно-ориентированного программирования (ООП). Основу объектно-ориентированного подхода к разработке программ составляет методика адресации свойств, присущих объектам. В системе Flash клип — это основной объект сценариев ActionScript, в котором реализуются принципы ООП. В сценариях вы можете определять состояние свойств клипов и устанавливать эти свойства. В предыдущих уроках основное внимание уделялось способам использования и изменения значений переменных. В этом уроке мы сосредоточимся на применении и изменении значений свойств.

Понятие свойства

У всех объектов в фильмах Flash есть свои свойства, так же как у всякого человека есть определенные черты. Например, человека можно описать набором таких признаков, как имя, рост, вес, особенности внешности, адрес, социальное положение и круг общения. Легко представить себе некоего Фреда, если известно, что в нем 6 футов росту, 200 фунтов весу, он живет в Сент-Луисе, у него рыжие волосы, он выпускник колледжа, женат. Какие-то свойства Фреда могут со временем измениться. Так, он может переехать из Сент-Луиса в Чикаго, похудеть или прибавить в весе, может измениться его семейное положение. Однако некоторые условия его жизни, или свойства, являются имманентными и никогда не меняются. Он всегда будет относиться к мужскому полу; раз окончив колледж, он навсегда останется его выпускником; ему никогда не стать брюнетом; его рост будет оставаться неизменным (по крайней мере до глубокой старости).

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

Задание свойств в панели Info

Не все свойства объектов в фильмах Flash могут изменяться. В первую очередь мы будем говорить об общих свойствах, значения которых могут устанавливаться в ходе воспроизведения фильма. Ряд свойств других .категорий, связанных с уникальными объектами и конструкторами объектов, таких как Col or и Sound, рассматриваются в уроке 8. В предыдущих уроках мы уже сталкивались со свойствами таких объектов, как Array и Mouse. В табл. 7.1 вы найдете краткую сводку различных свойств клипов, допускающих программную установку, а также их идентификаторы в языке ActionScript.

Таблица 7.1. Изменяемые свойства клипов

Свойство

Код

Описание

Горизонтальная позиция

_х

Расположение фильма относительно центральной позиции объекта и родительского объекта по горизонтальной оси (оси X). Позиция измеряется в пикселах. По умолчанию задается позиция верхнего левого угла клипа относительно верхнего левого угла (либо центра) объекта. Когда родительский объект экземпляра изменяется, его центр может сместиться. Такая ситуация часто возникает, когда родительский объект поворачивается вокруг центра

Вертикальная позиция

Расположение фильма относительно центральной позиции объекта и родительского объекта по вертикальной оси (оси Y). Применяются те же правила измерения, что и для свойства _х

Ширина (относительная)

_xscale

Относительная ширина по горизонтальной оси (оси X), выраженная в процентах; по умолчанию используется значение, равное 100 %. Объект может быть масштабирован как в сторону увеличения, так и в сторону уменьшения

Высота (относительная)

_yscale

Относительная высота по вертикальной оси (оси Y), выраженная в процентах; по умолчанию используется значение, равное 100 %. Объект может быть масштабирован как в сторону увеличения, так и в сторону уменьшения

Угол поворота rotation Свойство, указывающее угол поворота, задается в градусах (от 0 до 360). Для поворота против часовой стрелки можно использовать отрицательные значения (0 и 360 — это эквивалентные значения, которые задают нулевой угол поворота)
Динамическое имя name Это свойство позволяет задавать имя и переименовывать клип в тексте сценария
Скрытый/Видимый _visible Логическое свойство, определяющее видимость объекта. Принимает значения True и False (1 и 0)

Прозрачность

_alpha

Степень прозрачности объекта. Шкала прозрачности находится в диапазоне от 0 (для полностью прозрачных объектов) до 100 (для совершенно непрозрачных объектов), то есть прозрачность также выражается в процентах. Даже нулевое значение этого свойства не препятствует определению способа реакции объекта на действия пользователя

 

В приведенном ниже примере мы создадим фильм с клипом, иллюстрирующий механизм установки значений свойств. Этот фильм чрезвычайно прост, и его назначение состоит лишь в том, чтобы показать, что происходит при изменении того или иного свойства. Данный фильм содержит клип с кнопкой, представляющей собой прямоугольник размером 50 на 200 пикселов с зеленой радиальной заливкой; клип располагается в рабочей зоне размером 400 на 400 пикселов. Особенность данного фильма состоит в том, что здесь мы будем использовать различные сценарии для одной и той же кнопки, не создавая дополнительных кнопок для отражения эффекта изменения различных свойств. Это позволит вам попрактиковаться в работе со сценариями. Чтобы начать работу над фильмом, выполните следующую последовательность шагов.

  1. Создайте новый фильм и выполните команду меню Insert > New Symbol (Вставка > Новый символ). В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Movie Clip (Клип) и введите имя Property Test (Проверка свойств). Щелкните на кнопке ОК, чтобы перейти в режим редактирования символов.
  2. Откройте панель Info (Информация). Расположите ее на экране таким образом, чтобы с ней было легко работать, так как именно здесь вы будете изменять значения многих свойств.
  3. С помощью инструмента Rectangle (Прямоугольник), установив режим радиальной заливки и выбрав зеленый цвет, нарисуйте прямоугольник размером приблизительно 50 на 200 пикселов. После преобразования этого прямоугольника в символ вы сможете ввести его точные размеры в соответствующих полях панели Info (Информация).
  4. Выделите рисунок и нажмите клавишу F8, чтобы открыть диалоговое окно Symbol Properties (Свойства символа). Установите переключатель Button (Кнопка) и введите имя Stick (Ручка). Щелкните на кнопке ОК.
  5. Не выходя из режима редактирования символов, выделите зеленый прямоугольник. Введите точные значения ширины и высоты (50 и 200 пикселов соответственно). Введите координаты (0, 0) в полях X и Y, а затем щелкните на центральной точке в элементе позиционирования, также находящемся в панели Info (Информация).

ПРИМЕЧАНИЕ

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

  1. Щелкните на кнопке Scene 1 (Сцена 1), чтобы вернуться к главной киноленте. Перетащите в рабочую зону экземпляр клипа Property Test (Проверка свойств). В панели Info (Информация) введите значения координат X и Y, равные 200 и 100 соответственно. Теперь клип, созданный на главной киноленте, будет располагаться в 200 пикселах от левого и в 100 пикселах от верхнего края рабочей зоны. Его центральной точкой будет считаться верхний левый угол.
  2. Нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр). Выделив клип, введите имя экземпляра greenbar (зеленая полоска).

ВНИМАНИЕ

Это был очень важный шаг — объект получил имя.

  1. Выделите клип и перейдите в режим редактирования символов, нажав комбинацию клавиш Ctrl+E (Windows) либо Cmd+E (Macintosh).
  2. Выделите экземпляр зеленого прямоугольника и щелкните на кнопке Show Actions (Показать операции), находящейся в нижней части окна рабочей зоны, чтобы открыть панель операций. В поле редактора сценариев этой панели вы сможете ввести приведенные ниже сценарии. Чтобы протестировать фильм, не нужно выходить из режима редактирования символов. Поскольку вы периодически будете изменять в процессе тестирования текст сценариев, то сэкономите время, если выполните команду Control > Test Movie (Управление > Тестировать фильм) либо воспользуетесь комбинацией клавиш Ctrl+Enter (Windows) либо Cmd+Return (Macintosh) непосредственно в режиме редактирования символов. Не забудьте, что имя Stick в тексте сценариев соответствует кнопке Stick (Ручка), расположенной внутри клипа. На рис. 7.1 показано начало работы над фильмом в режиме редактирования символов.

Задание свойств в панели Object Actions

Прежде чем приступить к вводу сценария, обеспечивающего проверку механизма свойств, давайте посмотрим на способ работы с операцией Set Property (Установить значение свойства) в панели операций. На рис. 7.2 вы можете видеть текст первого сценария, который вам следует ввести. В обычном режиме редактирования с именами операций пользователь работает так же, как с переменными. Главное отличие здесь состоит в том, что вместо переменной используется объект, обладающий определенными свойствами.

Рис. 7.1. Позиция объекта внутри клипа может совпадать или не совпадать с позицией этого объекта на главной киноленте

Рис. 7.2. Для установки значения свойства необходимы три элемента: имя свойства, имя экземпляра клипа и значение

Вы можете не выбирать пункт Set Property (Установить свойство) в списке Actions (Операции), а работать с категорией или подменю Properties (Свойства). Тогда последовательность шагов будет следующая.

  1. Выберите требуемое свойство в категории Properties (Свойства) списка доступных языковых конструкций или в подменю Properties (Свойства), щелкнув в последнем случае на кнопке со знаком + (плюс) для раскрытия меню.
  2. Задайте имя экземпляра клипа и путь к нему.
  3. Задайте значение свойства (здесь можно использовать произвольное выражение, в котором адресуются данные, базирующиеся в других компонентах фильма) либо константу.

Сценарии изменения свойств

В приведенных ниже сценариях демонстрируется техника изменения различных свойств. Мы не будем использовать операцию setProperty(); имена свойств в этих сценариях связываются с именем экземпляра клипа с помощью оператора . (точка). Обратите особое внимание на способ задания имени экземпляра либо косвенной ссылки на это имя. В предыдущем разделе мы назвали экземпляр клипа Property Test (Проверка свойств) именем greenbar (зеленая полоска). Именно это имя будет использоваться во всех дальнейших примерах. В формате Flash 4 клип, расположенный на верхнем уровне иерархии объектов, обозначался косой чертой (/); в формате Flash 5 рекомендуется адресовать верхний, или корневой, уровень иерархии идентификатором _root. Хотя кнопка, в которой определен сценарий, расположена внутри клипа, эта проблема решается адресацией данного клипа относительно верхнего уровня, то есть указанием абсолютного адреса клипа, к которому относится кнопка. Чтобы запустить любой из приведенных ниже сценариев, достаточно щелкнуть на зеленой полоске.

Установка горизонтальной и вертикальной координат

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

Вариант, совместимый с Flash 4

on (release) {

setProperty ("/greenbar", _x. 20);

setProperty ("/greenbar", y. 20); }

Вариант Flash 5

on (release) {

_root.greenbar._x = 20; _root.greenbar._y = 20; }

Результаты. При щелчке на кнопке Stick (Ручка) полоска перемещается

влево.

Установка горизонтальных и вертикальных размеров

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

on (release) {

_root.greenbar._xscale = 225;

_root.greenbar._yscale = 5;

}

Результаты. При щелчке на кнопке Stick (Ручка) на экране появляется узкая длинная полоска.

Установка степени прозрачности

В данном примере для установки и изменения значения одного из свойств используются два события мыши. Свойство _alpha определяет уровень прозрачности объекта, принимая значения в диапазоне от 0 до 100 процентов. В приведенном ниже сценарии при нажатии кнопки мыши уровень прозрачности устанавливается равным 0, а при ее отпускании этот уровень становится равным 100 %. Попробуйте заменить первую константу на число 25, а вторую — на число 50 и посмотрите, что получится.

on (press) {

_root.greenbar._alpha = 0;

} on (release) {

_root.greenbar._alpha = 100; }

Результаты. При нажатии кнопки мыши на объекте Stick (Ручка) объект исчезает. При отпускании кнопки мыши он вновь появляется на экране.

Скрытие кнопки

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

on (press) {

_root.greenbar._visible = false;

}

on (release) { _root.greenbar._visible = true;

}

Результаты. При нажатии кнопки мыши на объекте Stick (Ручка) объект исчезает. При отпускании кнопки мыши он вновь появляется на экране, как и в предыдущем примере.

Поворот

Угол поворота задается свойством _rotation, значения которого могут находиться в интервале от 0 до 360 (величина угла задается в градусах). Вообще говоря, можно использовать также числа больше 360 и меньше 0 — они рассматриваются в соответствии с обычными правилами геометрии. К примеру, если вы зададите значение угла поворота, равное 365, то получите тот же результат, что и при использовании константы 5; константа -10 соответствует 350 градусам. В следующем сценарии применяются как положительное, так и отрицательное числа.

ПРИМЕЧАНИЕ

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

on (press) {

_root.greenbar._rotation = 270;

}

on (release) {

_root.greenbar._rotation = -10;

}

Результаты. При нажатии кнопки мыши на объекте Stick (Ручка) объект как бы опрокидывается набок. При отпускании кнопки мыши полоска поворачивается влево на величину угла, равную 350 градусам.

Установка имени

Вы имеете возможность изменять имя экземпляра клипа «на лету». Более того, вы можете, изменив это имя, в том же самом сценарии обратиться к объекту по новому имени. В следующем сценарии при нажатии кнопки мыши имя экземпляра greenbar заменяется идентификатором si debar, а при ее отпускании новое имя используется, чтобы повернуть объект на 80 градусов.

on (press) {

_root.greenbar._name = "si debar";

}

on (release) {

_root.sidebar._rotation = 80;

}

Результаты. При отпускании кнопки мыши полоска поворачивается на 80 градусов.

Добавьте к фильму круглую кнопку на главной киноленте и определите для нее следующий сценарий. (Ничего не меняйте в приведенном выше тексте сценария и не трогайте ранее созданные кнопку и клип.)

on (release) {

_root.greenbar._rotation =120;

}

Запустите фильм на тестирование и щелкните на вновь созданной круглой кнопке. Эта кнопка обеспечивает поворот зеленого прямоугольника на 120 градусов. Затем щелкните на кнопке в форме полоски, и она повернется на 80 градусов. Наконец, вторично щелкните на круглой кнопке. Ничего не происходит. При первом щелчке на круглой кнопке у экземпляра клипа было имя greenbar; после щелчка на кнопке в форме полоски имя экземпляра изменилось, и теперь экземпляр клипа носит имя si debar. Поэтому при повторном щелчке на круглой кнопке сценарий попытался найти экземпляр объекта с именем greenbar, но такового уже не оказалось в фильме, поскольку соответствующее имя экземпляра было заменено именем si debar.

Пример фильма. Задание глобальных свойств

В предыдущем разделе вы познакомились с методикой установки свойств в сценариях фильма. Теперь мы рассмотрим работу с особыми свойствами, которые определяют модель поведения фильма в целом и всех входящих в него клипов. Поскольку глобальные свойства позволяют изменять характеристики всех объектов фильма, нет необходимости в указании конкретного объекта, свойства которого будут изменяться. По умолчанию таким объектом выступает сам фильм. В фильме, находящемся в файле Globalquality.fla на компакт-диске, присутствуют три слоя:

На примере этого фильма вы увидите, каким образом можно установить значения всех шести параметров, связанных с двумя свойствами фильма, доступными для изменения в сценариях Action Script. Чтобы избежать проблем, возникающих на границах объектов, можно использовать свойства _highquality и _qual ity. Свойство Jiighqual ity принимает логические значения (true и false). Новое свойство _qua1ity, появившееся в пакете Flash 5, принимает строковые значения LOW, MEDIUM, HIGH и BEST, позволяющие задать определенный уровень качества экранных изображений. Таблица 7.2 содержит список всех значений свойства _qual ity.

Таблица 7.2. Значения свойства _quality

Значение

Сглаживание 2x2

Сглаживание 4x4

Растровое сглаживание

LOW Нет Нет Нет

MEDIUM

Да

Нет

Нет

Значение

Сглаживание 2x2

Сглаживание 4x4

Растровое сглаживание

HIGH - Да Да (только для статического изображения)

BEST

-

Да

Да

Установка значения true для свойства _highquality эквивалентна выбору вариантов HIGH или LOW для свойства _qua1ity. При указании значения свойства _quality следует использовать строковые константы, в которых присутствуют только прописные буквы. Образец корректной инструкции присваивания: _quality="MEDIUM" Примеры неверных инструкций:

_quality="Medium"

_quality=MEDIUM

На рис. 7.3 представлена рабочая зона фильма в начале его работы.

Рис. 7.3. Эти шесть кнопок позволяют изменять значения глобальных свойств

Слой Background

Слой Background (Фон) состоит из нескольких разноцветных прямоугольников. Рекомендуется сначала разместить все прямоугольники в отдельных слоях, чтобы иметь возможность корректно расположить их на экране. После этого выделите второй снизу слой в списке слоев на киноленте, вырежьте его, воспользовавшись комбинацией клавиш Ctrl+X (Windows) либо Cmd+X (Macintosh), а затем вставьте на место в слое Background. Чтобы вставить символ графики на место, следует выполнить команду Edit > Paste in Place (Правка > Вставка на место). Затем нужно вставить на свои места и прямоугольники из других слоев. В конце работы над слоем Background следует удалить пустые слои и заблокировать слой Background.

Слой Labels

Завершив работу над фоном, выберите какой-либо шрифт, в символах которого присутствуют острые углы и множество граней, что позволит продемонстрировать эффект сглаживания неровностей. Автор воспользовался шрифтом Rocket Gothic (вы можете найти его по адресу www.flashfonts.com). Надпись следует преобразовать в символ графики, чтобы разница между режимами сглаживания неровностей шрифтов и отсутствия сглаживания, переключение между которыми осуществляется за счет изменения значения свойства _quality, была более очевидной. Заблокируйте слой Labels (Метки), чтобы не повредить готовые рисунки при создании кнопок.

Слой Buttons

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

  1. Создайте вручную или импортируйте рисунок с множеством линий, находящихся под различными углами друг к другу. В рассматриваемом образце был использован свободно распространяемый рисунок, представляющий собой изображение глаза (этот рисунок можно найти по адресу www.flashfonts.com).
  2. Нарисуйте вокруг готового изображения овал с толщиной рамки 6 пунктов. Выделите вновь созданный овал и графическое изображение и нажмите клавишу F8.
  3. В открывшемся окне Symbol Properties (Свойства символа) установите переключатель Button (Кнопка) и введите имя кнопки eye (глаз).
  4. Перетаскивайте экземпляры кнопки из окна Library (Библиотека), располагая их над надписями, присутствующими в рабочей зоне. Введите приведенный ниже сценарий ActionScript.

Кнопка Best

on (release) {

_qua1ity="BEST";

}

}

Кнопка High

on (release) {

_quality="HIGH":

}

Кнопка Medium

on (release) {

_quality="MEDIUM";

}

Кнопка Low

on (release) {

_quality="LOW";

}

Кнопка True

on (release) {

_highqua1ity=true;

}

Кнопка False

on (release) {

_highquality=false;

}

Сохраните программу и протестируйте ее.

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

Пример фильма. Появление на экране прямоугольника

В фильме, который вы можете найти в файле TabOutline.fla на компакт-диске, логическое свойство _focusrect используется для отображения на экране желтого прямоугольника, появляющегося вокруг кнопок при переключении между ними с помощью клавиши Tab. Когда это свойство принимает значение true, прямоугольник появляется на экране; значение fal se делает его невидимым. По умолчанию в фильмах Flash используется значение true. Как и в случае с другими глобальными свойствами, здесь нет необходимости указывать конкретный объект, поскольку данное свойство влияет на способ отображения всех элементов фильма. В рассматриваемом фильме два слоя:

Чтобы не усложнять пример, мы создадим фильм, в котором всего четыре кнопки, как показано на рис. 7.4.

Рис. 7.4. Начальный экран фильма с четырьмя экземплярами символа кнопки и текстовым полем

Слой Background

Прежде чем нарисовать фон, выполните команду Modify > Movie (Модифицировать > Фильм) и установите размеры рабочей зоны 250 на 250 пикселов. Затем выберите инструмент Rectangle (Прямоугольник) и закрасьте все пространство рабочей зоны черным цветом.

Слой Buttons

Создайте символ кнопки и перетащите мышью четыре экземпляра этого символа из окна Library (Библиотека) в рабочую зону. Разместите на всех кнопках соответствующие надписи; выровняйте кнопки и надписи средствами панели Align (Выравнивание), как показано на рис. 7.5. В нашем фильме только первая и вторая кнопки располагают встроенными сценариями. Первый из них включает режим отображения прямоугольника, а второй отключает этот режим. В качестве экранного объекта, на котором будет располагаться фокус ввода в начале фильма, используется текстовое поле типа Input Text (Набираемый текст). Кроме того, в рабочей зоне фильма необходимо расположить надпись, то есть текстовое поле типа Static Text (Статический текст) вида Start Here > (Начните отсюда) рядом с полем ввода.

Рис. 7.5. Когда свойство _focusrect имеет значение true, при нажатии клавиши табуляции, обеспечивающей переключение межу кнопками, вокруг соответствующей кнопки появляется прямоугольник

Кнопка Button 1

on (release) {

_focusrect = false:

}

Кнопка Button 2

on (release) {

_focusrect = true;

}

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

Настройка режима буферизации звука

Последнее глобальное свойство, которое мы рассмотрим, — это свойство _sound-buftime. По умолчанию время предварительной загрузки, предшествующей началу воспроизведения звука, составляет пять секунд. Чтобы уменьшить или увеличить значение задержки, можно явным образом изменить значение данного параметра.

_soundbuftime=15:

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

Получение значений свойств

В системе Flash для получения значений свойств и их установки используются несколько различные операции. Значения всех свойств, допускающих возможность их установки в клипах, доступны для чтения. Однако в фильмах Flash существуют также доступные для чтения свойства, значения которых нельзя изменить. В табл. 7.3 приведен список свойств, доступных для чтения в сценариях ActionScript, с кратким описанием. Обратиться к любому из этих свойств можно либо с помощью функции getProperty, либо через переменную.

Таблица 7.3. Свойства клипов

Свойство

Описание

_alpha


Степень прозрачности объекта. Значение 100 соответствует совершенно

непрозрачному объекту, а значение 0 — абсолютно прозрачному

_currentframe

Номер текущего кадра клипа

_droptarget

Путь к клипу, на который перетаскивается другой клип

_f namesloaded

Текущее число кадров, загруженных в клипе

_height

Высота клипа в пикселах

_name

Имя экземпляра клипа

_rotation

Угол поворота (от 0 до 360)

_target

Полный путь к клипу

_total frames

Количество кадров в клипе

_url

URL-адрес файла с расширением .SWF, содержащего клип

_width _х Ширина клипа в пикселах Расстояние в пикселах от левой границы рабочей зоны до центральной точки клипа
_xmouse Текущая позиция указателя мыши по горизонтальной оси (оси X)
_xscale _y Масштаб объекта по горизонтальной оси (оси X) в процентах Расстояние в пикселах от верхней границы рабочей зоны до центральной точки клипа. Если используется механизм вложенных клипов, свойства х и вложенного клипа задаются относительно внешнего
_ymouse Текущая позиция указателя мыши по вертикальной оси (оси Y)
_yscale Масштаб объекта по вертикальной оси (оси Y) в процентах

_visib1e

Видимость (принимает логическое значение true или false, либо 1 или 0)

Разумеется, для получения информации о конкретном клипе вы можете по-прежнему пользоваться функцией getProperty (target, property), как в сценариях Flash 4. Параметр target представляет абсолютный или относительный путь к нужному объекту; параметр property — это любое свойство из числа перечисленных в приведенной выше таблице. Например, следующая инструкция помещает в переменную howMany число загруженных кадров:

howMany = getProperty (_root.purpleHaze. _framesloaded);

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

howMany = _root.purpleHaze._framesloaded;

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

Пример фильма. Передача значений свойств

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

В этом фильме содержится 18 кнопок; для каждой кнопки определен сценарий, который выводит на экран одно из 18 значений свойств. Два клипа, расположенных в рабочей зоне, содержат свойства, возвращаемые кнопками. Один из клипов допускает перетаскивание мышью, что позволяет увидеть значение свойства _droptarget, возвращаемое при перетаскивании одного клипа на другой. Текстовое поле show (демонстрация) отображает значения, содержащиеся в свойствах. На рис. 7.6 показан начальный экран фильма (на главной киноленте видны не все слои).

Рис. 7.6. Значения свойств выводятся на экран сценариями ActionScript, размещенными в кнопках

Слой Show

Поместите текстовое поле в центре рабочей зоны между двумя рисунками, изображающими полицейских. Выделите это текстовое поле и воспользуйтесь командой Modify > Text Field (Модифицировать > Текстовое поле). Введите имя переменной show (демонстрация) в панели Text Options (Параметры текста), установив значение других свойств, как показано в табл. 7.4.

Таблица 7.4. Имя переменной и значения свойств текстового поля

Имя Флажок переменной Border/Bg

Способ выравнивания

Запрет на редактирование

Запрет на выделение

show Снят

По центру

Да

Да

 

Слой Property Buttons

Создайте кнопку в слое Property Buttons (Кнопки свойств) на уровне главной киноленты, как описано ниже.

  1. Нарисуйте кнопку размером 17 на 17 пикселов с рамкой толщиной 2 пункта. Выберите голубой цвет в качестве внутреннего и черный в качестве внешнего.
  2. Выделите рисунок и нажмите клавишу F8, чтобы открыть окно Symbol Properties (Свойства символа). Введите в соответствующее поле имя PropButton (Кнопка свойства) и установите переключатель Button (Кнопка).
  3. В режиме редактирования символов выделите кадр Over (Над) и нажмите клавишу F6, чтобы сделать этот кадр ключевым. Выберите желтый цвет и с помощью инструмента заливки закрасьте центральный круг. Щелкните на кнопке Scene 1 (Сцена 1), чтобы вернуться к главной киноленте.
  4. Откройте окно Library (Библиотека) с помощью комбинации клавиш Ctrl+L (Windows) либо Cmd+L (Macintosh). Разместите 18 экземпляров кнопки в рабочей зоне путем перетаскивания из окна Library.

Эти 18 кнопок являются экземплярами одного и того же символа. Во всех кнопках используются идентичные сценарии, но для разных свойств. Текстовые надписи рядом с кнопками указывают, какое свойство клипа связано с той или иной кнопкой. Графическое изображение в левой части экрана представляет собой клип, допускающий перетаскивание, с именем экземпляра сор (Коп); все свойства связаны именно с этим клипом. Приведенный ниже сценарий следует использовать для всех кнопок, заменяя имя свойства _width именами, расположенными рядом с соответствующими кнопками.

Все экземпляры кнопки PropButton

on (release) {

show = _root.cop._width;

}

Слой MCs

В слое MCs (Клипы) расположены два клипа. Один из клипов является основным источником свойств, а другой демонстрирует механизм действия свойства _droptarget. Сначала необходимо создать клип, на который будет осуществляться перетаскивание другого клипа. Для неподвижного клипа следует использовать имя Сор2 (Коп-2).

  1. Выполните команду Insert > New Symbol (Вставка > Новый символ) для главной киноленты. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Movie Clip (Клип) и введите имя Policel (Полицейский-1).

ПРИМЕЧАНИЕ

Здесь нет никаких противоречий. Имя экземпляра действительно выглядит как Сор2 — (Коп-2), но символ клипа называется Policel (Полицейский-1), поскольку этот клип создается первым.

  1. Нарисуйте или импортируйте изображение полицейского. В данном случае взят готовый рисунок на сайте www.flashfonts.com. Единственный слой в клипе назван Nothing Here (Здесь ничего нет), чтобы подчеркнуть, что в клипе нет никаких сценариев.
  2. Щелкните на кнопке Scene 1 (Сцена 1) в верхнем левом углу, чтобы вернуться к работе с главной кинолентой. Перетащите экземпляр клипа в правую часть рабочей зоны, как показано на рис. 7.6 и 7.7.

Рис. 7.7. Если перетащить левый рисунок, ряд его свойств изменится

  1. Нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр), и введите имя экземпляра Сор2 (Коп-2).

ВНИМАНИЕ

Это чрезвычайно важный шаг. Здесь объект получает имя.

Теперь необходимо создать второй клип. Назовите его PoliceZ (Полицейский-2) и свяжите с ним имя экземпляра Сор (Коп).

  1. Выполните команду Insert > New Symbol (Вставка > Новый символ) для главной киноленты. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Movie Clip (Клип) и введите имя Police2 (Полицейский-2). Щелкните на кнопке ОК, чтобы перейти в режим редактирования символов.
  2. Нарисуйте или импортируйте изображение полицейского.
  3. Выделите рисунок и нажмите клавишу F8, чтобы преобразовать его в символ. В диалоговом окне Symbol Properties (Свойства символа) введите имя СорА (Коп А) и установите переключатель Button (Кнопка). Щелкните на кнопке ОК.
  4. Щелкните на кнопке Show Actions (Показать операции), чтобы открыть панель операций. Введите следующий сценарий ActionScript для кнопки СорА (Коп А).

    Экземпляр кнопки СорА

    on (press) {

    startDrag (_root.cop):

    }

    on (release) {

    stopDrag ();

    }

  5. He выходя из режима редактирования символов, выделите кадр 7 и нажмите клавишу F5, чтобы установить длину клипа, равной семи кадрам. Смысл этого действия состоит лишь в том, что теперь у вас появляется возможность познакомиться с механизмом действия различных свойств кадра. Вообще говоря, никакой реальной пользы для фильма эта операция не принесет, поскольку кадры в фильме практически не используются.
  6. Щелкните на кнопке Scene 1 (Сцена 1) в верхнем левом углу, чтобы вернуться к работе с главной кинолентой. Перетащите экземпляр клипа в левую часть рабочей зоны, как показано на рис. 7.6 и 7.7.
  7. Нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр), и введите имя экземпляра Сор (Коп).

ВНИМАНИЕ

Это чрезвычайно важный шаг. Здесь объект получает имя.

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

Попытайтесь перетащить изображение полицейского в левой половине рабочей зоны на аналогичное изображение справа. Щелкните на кнопке с надписью _droptarget В окне вывода появится строка /сор2. В уроке 6 в проекте фильма с покупательской тележкой мы перетаскивали на клип тележки различные клипы с изображением товаров. При каждом перетаскивании, зарегистрированном свойством _droptarget, вы можете обеспечить корректный пересчет суммы покупки. Обратите также внимание на реакцию свойств _xmouse и _ymouse на факт перетаскивания клипа. Поскольку эти свойства привязаны к начальной позиции клипа, а не к системе глобальных координат рабочей зоны, при перемещении клипа вниз или вправо от кнопок сценарий возвращает отрицательное значение.

Функции в системе Flash

В языке ActionScript предусмотрено 25 функций, позволяющих вычислять определенные значения на основе задаваемых параметров. Кроме того, существует 8 дополнительных строковых функций. Некоторые функции, такие как eval, init, true, false, chr и getProperty, мы уже рассмотрели в предыдущих уроках. Ниже приводится полный список функций с их краткой характеристикой. Целый ряд функций Flash действует во многом (если не во всем) подобно свойствам, методам и параметрам.

Кроме набора общих функций в пакете Flash 5 существует особый набор строковых функций. Эти функции обычно выделяются в отдельную группу не в силу каких-то особенностей работы с ними, а из соображений логической категоризации.

Для всех строковых функций «предусмотрены также их мультибайтные аналоги — mbchr(), mblength и mbord().

Строковые функции

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

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

Пример фильма. Использование подстрок

В фильме, находящемся в файле substrings.fla на компакт-диске, содержится одна кнопка, несколько текстовых полей, предназначенных для демонстрации результатов, и соответствующие надписи; все элементы фильма распределены по четырем слоям:

Этот фильм поможет вам лучше разобраться в некоторых механизмах Action-Script. Экспериментируя с различными строками, вы сможете ясно увидеть, что происходит в том или ином случае. На рис. 7.8 представлены все элементы фильма в рабочей зоне.

Рис. 7.8. Для демонстрации результатов работы строковых функций в данном фильме используется несколько текстовых полей

Слой Background

Выберите оранжевый цвет в панели Swatches (Образцы цветов) или создайте цвет FF8000 в панели Mixer (Смеситель). Этот цвет следует использовать как для заливки, так и для рисования линий. Затем выберите инструмент Rectangle (Прямоугольник) и нарисуйте прямоугольник, полностью покрывающий рабочую зону. После этого блокируйте слой Background (Фон).

Слой Button

Единственный сценарий в данном фильме находится в слое Button (Кнопка). В этом сценарии анализируются исходные данные, введенные пользователем; результат обработки выводится в соответствующих текстовых полях. При щелчке на кнопке сценарий выполняет ряд операций присваивания, в которых используются выражения, представляющие собой вызовы строковых функций. Чтобы создать единственную кнопку фильма, выполните следующие действия.

  1. Нарисуйте круглую кнопку с помощью инструмента Oval (Овал). Затем выделите вновь созданное изображение и нажмите клавишу F8, чтобы открыть диалоговое окно Symbol Properties (Свойства символа). Установите переключатель Button (Кнопка) и введите имя doit. Щелкните на кнопке ОК.
  2. Выделите кнопку в рабочей зоне главной киноленты и нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр). Щелкните на кнопке с изображением стрелки в нижней части окна рабочей зоны, чтобы открыть панель операций. В приведенном ниже сценарии осуществляется обращение к переменным, связанным с текстовыми полями. Удостоверьтесь в том, что вы правильно ввели все имена переменных, а также в том, что именно эти имена связаны с текстовыми полями. Переменная entry является строковой; в сценарии применяются строковые функции, позволяющие получить значение ASCII-кода, длину строки и подстроку.

on (release) {

ascii = ord(entry);

stLength = length(entry);

partString = substring(entry, index, subLength);

}

Разбирая приведенный сценарий, следует помнить о том, что имена переменных и атрибуты, используемые в вызовах функций, связаны с текстовыми полями. В ходе работы сценария происходит обращение к значениям, связанным с текстовыми полями, и установка этих значений. Внимательно изучите все инструкции присваивания. Убедитесь в корректности записи самих инструкций, имен переменных и данных.

Рис. 7.9. Результаты работы различных строковых функций

Слой Text Fields

Все входные и выходные данные размещаются в слое Text Fields (Текстовые поля). Текстовые поля применяются как для получения входных данных от пользователя, так и для вывода результатов работы сценариев. Имена переменных и свойства всех текстовых полей представлены в табл. 7.5, а размещение текстовых полей на экране представлено на рис. 7.8 и 7.9, которые мы уже видели. Создавая текстовые поля, не забудьте о корректном выборе типа текстового поля в панели Text Options (Параметры текста): Input Text (Набираемый текст) или Dynamic Text (Динамический текст).

Таблица 7.5. Имена переменных и свойства текстовых полей

Имя переменной

Флажок Border/ Bg

Способ выравнивания

Запрет на редактирование

Запрет на выделение

ascii Снят По правому краю Да Да
stLength Снят По правому краю Да Да
index Установлен По правому краю Нет Нет
sublength Установлен По правому краю Нет Нет
entry Установлен По центру Нет Нет

partString

Снят

По центру

Да

Да

 

Слой Labels

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

Таблица 7.6. Надписи рядом с текстовыми полями

Имя текстового поля

Надпись

Размещение

Ascii ASCII Enter String (Введите строку) Справа
StLength Value (ASCII-код) Справа
Index Begin Substring (Начальная позиция подстроки) Справа
Subl ength Length of Substring (Длина подстроки) Справа
Entry Length (Длина) Сверху

Substring

Substring (Подстрока)

Сверху

Наконец, необходимо разместить надпись над кнопкой. Эта надпись должна гласить Show String Information (Показать информацию о строках).

Значимость подстрок

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

Применив цикл, в котором будут последовательно перебираться начальные позиции подстроки в строке, и использовав длину подстроки, равную 1, вы можете проверить все символы в исходной строке. В следующем сценарии такой цикл применяется для определения факта наличия символа @, то есть chr(64), в введенном пользователем адресе электронной почты.

on (release) {

n = length(string);

i=0;

}

flag = 0;

while (Number(n)>=l) {

n-=1;

i+=l:

if (substring(string, i. 1) == chr(64)) {

flag = 1; }

if (flag == 1) {

error = "Correct";

} else {

error = "You forgot to include the '@' sign in the email address.";

}

Рис. 7.10. Механизм подстрок может использоваться для проверки вхождения в строку определенного символа

Как flag, так и error в этом тексте — имена переменных. Переменная flag получает значение 1, если в ходе выполнения цикла while в строке обнаруживается символ @, то есть chr(64). Если флаг flag установлен (равен 1), программа понимает, что символ @ действительно был обнаружен. Переменная error в этом случае будет содержать сообщение Correct (верно). В противном случае пользователю будет прочитана краткая лекция о важности включения c имвола @ в адрес электронной почты. На рис. 7.10 можно видеть результат работы этого сценария для случая, когда пользователь забыл ввести символ (см. файл Find@.fla на компакт-диске).

Объекты класса String

Как и многие другие объекты ActionScript, объекты класса String располагают предназначенной для создания объекта «оболочкой», которая может связываться в тексте сценариев с именами методов и свойств при помощи оператора . (точка). Строковые функции, рассмотренные в предыдущем разделе, выполняют целый ряд операций, сходных с операциями, инкапсулируемыми строковыми объектами, однако строковые функции не способны вызывать собственные методы и обращаться к собственным свойствам за неимением таковых.

Конструктор объекта String действует аналогично конструкторам других объектов. К примеру, следующая инструкция определения создает строковый объект с именем Sam, содержащий строку "Web page designer" (дизайнер Web-страниц).

Sam = new String("Web page designer");

Объект Sam может обращаться ко всем методам и свойствам класса String; в тексте сценария в этом случае должен использоваться оператор . (точка).

Job=Sam.slice(9.17):

Данная инструкция размещает подстроку "designer" строки Sam в переменной с именем Job. При разработке сложных фильмов, в которых требуется выполнять значительный объем операций со строками, применение объектов String вместо обычных функций может упростить работу авторов. В приведенном ниже списке перечислены 12 методов и одно свойство, связанные с объектом String (идентификатор StringName здесь обозначает произвольное имя строкового объекта, о методе которого идет речь).

Генератор случайных чисел

Генератор случайных чисел в системе Flash способен дать фору любому аналогичному средству из числа существующих в системах обработки сценариев, поскольку позволяет задавать диапазон случайных чисел в чрезвычайно удобном формате. К примеру, следующая строка приводит к порождению случайного числа в диапазоне от 0 до 24.

fortuitous = random(25)

Функция генератора случайных чисел random() относится к числу специальных функций, однако ее используют достаточно часто, так как процедура генерации случайных чисел имеет большое значение для обработки сценариев. Скажем, вам может понадобиться создать фильм, в котором клип будет произвольно перемещаться по экрану на основе случайных значений координат X и Y, — здесь-то вам и пригодится генератор случайных чисел. (Хотя автору доводится использовать эту функцию нечасто, в некоторых ситуациях без нее не обойтись.) Допустим, вам хочется, чтобы по всему пространству рабочей зоны в вашем фильме постоянно летал некий жучок. Приведенный ниже сценарий поможет обеспечить его произвольное перемещение в пределах квадрата со стороной 200 пикселов. Идентификатор fly здесь представляет собой имя экземпляра клипа:

bugX=random(200);

bugY=random(200);

fly._x=bugX;

fly._y=bugY;

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

Пользовательские функции

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

function titleOfFunction (параметры) {

actions go here

}

Под параметром здесь разумеется значение определенного типа. В качестве параметров могут использоваться константы, строки, числа и логические значения. Так, при создании сайта электронной коммерции вам может потребоваться многократно использовать функцию, которая обеспечивает ввод цены того или иного товара и вычисляет размер налога на продажу, одновременно учитывая накладные расходы. Допустим, размер накладных расходов представляет собой константу (6,99 доллара), а ставка налога на продажу составляет 8 % (0,08). Цена товара выражается переменной, а следовательно, вполне может использоваться в качестве параметра. Кроме того, в тексте сценария осуществляется определенная «декоративная» работа со строковыми данными. У такой функции должен быть единственный параметр pri се, выражающий цену товара, как показано ниже.

function ringUp (price) {

goFigure = price*1. 08+6. 99;

sayFig = new String ( "bogus");

sayFig = String(goFigure);

for (i=0: i<=sayFig. length; i++) {

if (sayFig. charAt(i) == ".") {

x = i+3;

}

}

sayFig = sayFig. substr(0. x);

total = "$"+sayFig;

showCus = total ;

}

В уроке 8 мы рассмотрим объект Math, который позволяет выполнить аналогичные операции при помощи значительно более лаконичного сценария, например такого, как приведенный ниже:

function ringUp (price) {

goFigure = price*1. 08+6. 99;

sayFig = Math.floor(goFigure*100)/100;

total = "$"+sayFig;

showCus = total ;

}

В первом из этих сценариев сначала для вычисления общей цены товара, которая помещается в переменную goFigure, используется значение параметра price. Затем с помощью конструктора объекта String создается строковый объект sayFlg. Сначала объект sayFig получает значение строковой константы "bogus" (фиктивный), поскольку конструкторы более эффективно работают с константами, нежели с переменными. Однако уже на следующем шаге функция String (не путайте с конструктором объекта) преобразует значение переменной goFigure в строку и помещает результат преобразования в строковый объект sayFig. Таким образом, вычисленная цена товара оказывается представленной в виде строкового объекта.

После этого в нашей функции используется цикл, в котором осуществляется поиск десятичной точки в строке. Как только точка найдена, увеличенное на 3 значение переменной — параметра цикла присваивается переменной х. Константа 3 в данном случае позволяет получить такую длину строки, которая соответствует второму символу после десятичной точки. Затем объект sayFi g получает значение части строки, содержащей вычисленную сумму, представленную с точностью до цента. Наконец, в значении переменной total к значению sayFig присоединяется знак доллара ($) и получившееся значение присваивается переменной showCus, связанной с текстовым полем.

Реализация данной функции специально усложнена, чтобы подчеркнуть, что во многих случаях операции, выполняемые функциями, при использовании вне последних значительно «утяжеляли» бы текст сценария, в то время как работать с готовой функцией очень просто. Предположим, наша функция определена в первом ключевом кадре слоя. Вам нужна кнопка, которая будет получать значение цены через редактируемое текстовое поле и выводить результат в другом текстовом поле. Поскольку в приведенной выше функции используется конкретная переменная showCus, именно она должна быть связана с текстовым полем, содержащим выходные данные. Следовательно, достаточно задать имя переменной, содержащей входные данные, через параметр, обозначающий цену, и назвать текстовое поле для вывода результата showCus. Следующий сценарий содержит весь код, необходимый для кнопки, обращающейся к нашей функции:

on (release) {

ringUp(itemCost);

}

Строго говоря, вызов этой функции, как и любой другой, можно разместить в любом кадре, кнопке или клипе; при этом нет необходимости раз за разом воспроизводить набор инструкций, составляющих тело функции, — достаточно указать конкретный параметр. В следующем примере фильма мы применим нашу функцию на практике. Текст функции располагается в первом кадре, а ее вызов производится в сценарии кнопки. С расположенным сверху входным текстовым полем связана переменная itemCost, а с находящимся внизу редактируемым текстовым полем (оно не выделяется на экране ни рамкой, ни фоном) — переменная showCus. На рис. 7.11 показаны слои и начальный экран фильма, а на рис. 7.12 демонстрируется его работа (этот фильм можно найти в файле ownFunction.fla на компакт-диске).

Рис. 7.11. Вызов функции производится в сценарии кнопки, а исходный текст функции находится в сценарии кадра

Рис. 7.12. Вызов функции производится по нажатию кнопки

В уроке 9 вы узнаете о том, что механизм пользовательских функций пришел на смену операции call, существовавшей в системе Flash 4. Кроме того, в уроке 9 рассматриваются вопросы адресации клипов и создания функций, которые могут использоваться в нескольких клипах в рамках одного фильма.

Проект. Вращение стрелки компаса

Фильм, находящийся в файле SlideRotation.fla на компакт-диске, демонстрирует возможность применения ползунка для выполнения операций, связанных со свойствами. В этом фильме необходимо создать два клипа. Один из. них представляет собой изображение ползунка, рукоятку которого можно перетаскивать мышью в пределах узкой горизонтальной «щели». Во втором клипе используется стандартный рисунок черной кошки, который будет своеобразной стрелкой компаса. При перемещении ползунка вправо и влево «стрелка» компаса будет вращаться соответственно по часовой стрелке и против часовой стрелки. В фильме четыре слоя:

Особое значение для этого фильма имеет точность. Рукоятка ползунка перемещается в пределах прямоугольника. При этом координация начальной позиции рукоятки и края желобка требует использования средств панели Info (Информация) для ввода точных позиций и длины линии. Поскольку полный угол составляет 360 градусов, необходимо провести линию длиной 360 пикселов, чтобы упростить вычисления. Вначале следует выполнить команду Modify > Movie (Модифицировать > Фильм) и создать рабочую зону размером 450 на 300 пикселов, установив светло-зеленый цвет фона в диалоговом окне Movie Properties (Свойства фильма).

Слой Background

Нарисуйте два прямоугольника. В первом из них необходимо произвести сплошную заливку черным цветом; этот прямоугольник покрывает всю рабочую зону. Во втором прямоугольнике следует использовать светлую желтовато-коричневую заливку; рамку выполните красновато-коричневым цветом, сделав ее толщиной 6 пунктов. Выделите данный слой и выполните команду Modify > Group (Модифицировать > Группировать), чтобы объединить все три элемента слоя. После этого слой необходимо блокировать, то есть закрыть для изменений.

Слой Slide Handle MC

Поскольку в нашем фильме рукоятка ползунка перемещается, моделируя движение рукоятки в системном ползунке, для ее представления следует использовать клип (только клипы допускают перетаскивание мышью). Выполните перечисленные ниже шаги.

  1. Выполните команду Insert > New Symbol (Вставка > Новый символ) для главной киноленты. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Movie Clip (Клип) и введите имя Slide Handle (Рукоятка ползунка). Щелкните на кнопке ОК. При этом происходит переход в режим редактирования символов.
  2. С помощью инструмента Rectangle (Прямоугольник) нарисуйте рукоятку ползунка с углами размером 6 пунктов, зеленую внутри и красновато-коричневую снаружи. С помощью панели Info (Информация) задайте для вновь созданного прямоугольника высоту, равную 49 пикселам, и ширину 12 пикселов (рис. 7.13).

Рис. 7.13. Ползунок и «компас» в рабочей зоне

  1. Выделите изображение ползунка и нажмите клавишу F8, чтобы открыть диалоговое окно Symbol Properties (Свойства символа). Установите переключатель Button (Кнопка) и введите имя handle (рукоятка). Щелкните на кнопке ОК.
  2. Выделите вновь созданную кнопку и щелкните на кнопке с изображением стрелки, находящейся в нижней части окна рабочей зоны, чтобы открыть панель операций. Не выходя из режима редактирования символов, определиге для кнопки следующий сценарий, в котором обеспечивается возможность перетаскивания ползунка в пределах прямоугольника, ограниченного в полях Тор (Верх) и Bottom (Низ) значениями 200%. Задав параметр ограничения левой границы, равный 50, и значение этого параметра для правой границы, равное 410, вы получите область перетаскивания размером 360 пикселов.

    on (press) {

_root.lever.startDrag(false. 50. 200, 410, 200);

}

on (release) {

stopDrag (); }

  1. He выходя из режима редактирования символов, щелкните на кадре 2; затем нажмите клавишу F5, чтобы вставить новый кадр. Задайте для первого слоя имя Activate Slider (Активизация ползунка). Поместите в кадр 1 приведенный ниже сценарий. Обратите внимание на то, что в данном сценарии присутствуют ссылки на два различных клипа: WhirlyGig (Вертушка) и lever (рукоятка). Информация, поступающая от клипа с изображением рукоятки, используется для изменения значения свойства клипа WhirlyGig. Необходимость вычесть константу 50 обусловлена тем, что начальная позиция рукоятки ползунка при перетаскивании располагается в 50 пунктах слева от центра, а координата по оси X должна быть установлена равной 0. Смещение -50 позволяет значению угла поворота оставаться в интервале от 0 до 360. _root.Whirlygig._rotation = (_root.lever._x)-50:
  2. Щелкните на значке Scene 1 (Сцена 1) в верхнем левом углу главного окна, чтобы выйти из режима редактирования символов и вернуться к рабочей зоне главной киноленты. Перетащите экземпляр клипа Slide Handle (Рукоятка ползунка) в главную рабочую зону фильма. Обратите внимание на то обстоятельство, что перетаскивать следует клип, а не кнопку. Средствами панели Info (Информация) поместите клип в точку с координатами х=50, у=175.
  3. Выделите клип Slide Handle (Рукоятка ползунка) и нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр). В поле Name (Имя) введите имя lever (рукоятка).

ВНИМАНИЕ

Это чрезвычайно важный шаг — именно здесь объект получает имя.

Слой Whirly MC

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

  1. Выполните команду Insert > New Symbol (Вставка > Новый символ) для главной киноленты. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Movie Clip (Клип) и введите имя WhirLClip (Вращающийся клип). При этом вы вновь переходите в режим редактирования символов.
  2. Нарисуйте или импортируйте изображение, которое вы хотите использовать в качестве стрелки. Автор взял стандартное изображение черной кошки из библиотеки Flash, но вы можете использовать любой другой рисунок. Если кошка вас устраивает, выберите команду File > Open as Library (Файл > Открыть как библиотеку), открыв файл SlideRotation.fla на компакт-диске, — черная кошка поджидает вас там.
  3. Щелкните на кнопке Scene 1 (Сцена 1) в верхнем левом углу окна программы, чтобы выйти из режима редактирования символов и перейти к работе с главной кинолентой. Перетащите экземпляр клипа WhirlClip в рабочую зону (по рис. 7.13 вы можете познакомиться с приблизительным расположением рисунка в фильме).
  4. Дважды щелкните на клипе WhirlClip (Вращающийся клип), чтобы открыть панель Instance (Экземпляр), и введите имя экземпляра WhirlyGig (Вертушка).

ВНИМАНИЕ

Это чрезвычайно важный шаг — именно здесь объект получает имя.

Рис. 7.14. При перемещении ползунка угол наклона клипа с изображением кошки изменяется

Слой Labels and Groove

Проведите черную прямую черту, задав значение 3 в качестве толщины линии в панели Stroke (Обводка). Для ввода любых точных значений можно использовать панель Info (Информация). Установите длину отрезка равной 360 пикселам, задав значение Н (Высота), равное 0; в качестве начальных координат используйте значения х=50 и у=200 (можно просто провести прямую горизонтальную линию, не обращая внимание на ее длину, а затем ввести все нужные значения в панели Info).

В данном слое располагаются буквы, указывающие направление сторон света в нашем компасе: N (Север), Е (Восток), S (Юг) и W (Запад). Разместите эти надписи вокруг клипа с изображением кошки. Буква N должна находиться непосредственно над кошкой, буква S — снизу рисунка, а буквы Е и W следует расположить соответственно справа и слева от клипа. На рис. 7.14 показано, как будет располагаться изображение кошки при перемещении ползунка в процессе работы фильма.

Проект. Динамическая гистограмма

Гистограммы часто используются для наглядного представления данных. Средствами системы Flash и языка ActionScript можно создавать диаграммы, которые динамически отражают те или иные значения. В файле barChart.fla на компакт-диске находится фильм, в котором вы найдете образец сценария построения такой диаграммы. В данном проекте рассматривается лишь 10 различных ситуаций. Такое небольшое их число позволяет избежать излишнего усложнения проекта в части вывода изображений, в то же время демонстрируя принцип работы сценария построения гистограммы. В фильме используются четыре слоя:

При разработке гистограммы необходимо создать столбики, высота которых будет пропорциональна данным, введенным пользователем; сценарий должен работать прежде всего не с самими столбиками, но со значениями, которые представлены Ими. Чтобы обеспечить пропорциональность диаграммы, необходимо ввести в сценарий множитель для всех отображаемых данных. В нашем проекте этот множитель определяется путем нахождения максимального значения в исходном наборе данных с учетом максимального количества пикселов, соответствующего этому максимальному значению. Поскольку максимальная высота столбика в фильме составляет 300 пикселов, все отображаемые значения следует преобразовать в числа, находящиеся в диапазоне от 1 до 300. Поэтому значения, превышающие 300, должны быть уменьшены таким образом, чтобы они попадали в указанный интервал; все прочие значения также должны уменьшаться пропорционально максимальному. К примеру, если наибольшее значение в наборе данных равно 500, в качестве множителя будет использоваться частное от деления 300 на 500, то есть 0,6. Если все отображаемые значения в сценарии будут умножены на 0,6, высота всех столбиков будет соответствовать пропорциям исходных данных.

В каждом слое содержится три ключевых элемента фильма. Столбики, расположенные в слое Bars (Столбики), являются составной частью гистограммы. Текстовые поля используются для ввода исходных данных, а кнопка содержит сценарий генерации гистограммы на основе данных текстовых полей; именно в этом сценарии изменяются свойства столбиков. На рис. 7.15 можно видеть начальный экран фильма, в котором располагается 10 клипов (столбиков), 10 текстовых полей и кнопка, содержащая сценарий.

Рис. 7.15. Линии, расположенные над текстовыми полями, представляют собой клипы, доступные для модификации из сценария кнопки

Слой Background

Создайте желтовато-коричневый фон, в котором широкие светлые полосы будут перемежаться более темными, как на рис. 7.15.

Слой Bars

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

  1. Выполните команду Insert > New Symbol (Вставка > Новый символ) для главной киноленты. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Movie Clip (Клип) и введите имя bar (столбик). Щелкните на кнопке ОК. При этом вы переходите в режим редактирования символов.
  2. Нарисуйте прямоугольник шириной 40 пикселов и высотой 1 пиксел. Для корректного задания этих параметров вам потребуется панель Info (Информация).
  3. Щелкните на кнопке Scene 1 (Сцена 1) в верхнем левом углу программы, чтобы выйти из режима редактирования символов и вернуться к работе с главной кинолентой. Перетащите с помощью мыши 10 экземпляров вновь созданного клипа в рабочую зону.
  4. Открыв панель Info (Информация), удостоверьтесь, что для всех клипов значение свойства Y установлено равным 300. Выровняйте все экземпляры клипа с помощью панели Align (Выравнивание) или воспользуйтесь комбинацией клавиш Ctrl+K (Windows) либо Cmd+K (Macintosh). Правильное расположение экземпляров показано на рис. 7.15.
  5. Введите имена экземпляров клипов, просто пронумеровав их от 1 до 10. Для этого нужно, поочередно выделяя все клипы, ввести числа от 1 до 10 в поле Name (Имя) панели Instance (Экземпляр).

ВНИМАНИЕ

Это чрезвычайно важный шаг — именно здесь объекты получают имена.

Слой Text Fields

В этом слое непосредственно под экземплярами клипа, представляющего столбик, нужно разместить 10 текстовых полей, как показано на рис. 7.15. При этом следует использовать параметры Y=310, W=40 и Н=21. Значение в поле X должно совпадать с соответствующим значением, заданным для клипа, под которым находится данное текстовое поле. Свойства текстовых полей представлены в табл. 7.7.

Таблица 7.7. Имена переменных и свойства текстовых полей

Имя переменной

Флажок Border /Вд

Способ выравнивания

Т1 Установлен По правому краю
Т2 Установлен По правому краю
ТЗ Установлен По правому краю
Тб Установлен По правому краю
Т7 Установлен По правому краю
Т8 Установлен По правому краю
Т9 Установлен По правому краю
T10 Установлен По правому краю
Т5 Установлен По правому краю

Т4

Установлен

По правому краю

Выровняйте все текстовые поля средствами панели Align (Выравнивание) или воспользуйтесь комбинацией клавиш Ctrl+K (Windows) либо Cmd+K (Macintosh). Важно, чтобы номера в именах столбиков соответствовали цифрам в именах переменных. Например, текстовое поле Т7 должно быть расположено под экземпляром клипа столбика с именем 7.

Слой Button

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

on (release) {

// Инициализация переменных

х = 0:

n = 0;

d = 0:

Val = 0:

factor = 0;

highest = 1;

// Установка начальной высоты

while (x<=9) {

Х+=1;

_root[x]._yscale = 100;

_root[x]._y = 300;

}

// Определение максимального значения

while (n<=9) {

n+=1;

if (_root["T"+n]>highest) { highest = _root["T"+n]:

// Определение высоты столбиков на основе найденного

//максимального значения

factor = 300/highest;

while (d<=9) {

d+=l;

Val = _root["T"+d]*factor;

_root[d]._ysca1e = Val*100;

_root[d]._y = 300-Val; } }

Рис. 7.16. На основе данных, введенных в текстовых полях, генерируется пропорциональная гистограмма

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

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

Что нового мы узнали?

В этом уроке мы научились...

← Назад
Hosted by uCoz