Рис. 7.3. Ползунковый регулятор используют для различных настроек
На основе рассмотренного в предыдущем разделе материала давайте приведем пример создания ползункового регулятора - довольно популярного средства ввода пользовательских настроек. В качестве примера создадим ролик, в котором имеется фотография и ползунковый регулятор, с помощью которого пользователь может изменять прозрачность этой фотографии (рис. 7.3).
Откройте новый ролик и импортируйте в него растровое изображение (фотографию). Преобразуйте ее в мувик, назвав его photo. С помощью вспомогательной панели Effects (Эффекты) установите для этого мувика значение Alpha (Альфа-канал), равное 0. Фотография станет невидимой.
Внизу рабочей области поместите два текстовых поля. Левое поле статическое. Напишите в нем "Непрозрачность:". Правое поле сделайте динамическим, назовите его al. В него надо вывести числовое значение прозрачности изображения. Сейчас укажите здесь начальное значение 0.
Теперь приступим к самому главному - созданию ползункового регулятора. Вначале создайте новую кнопку (CTRL+F8) и нарисуйте в ней движок ползункового регулятора любой формы (например, как на рис. 7.4). Вернитесь в основной ролик и создайте новый мувик slider. Поместите в него экземпляр кнопки. Пока можно не создавать сценарий кнопки, все равно к нему придется возвращаться.
Вернитесь в основной ролик и создайте еще один мувик, назовите его ruler. Поместите в него экземпляр мувика slider (и слой тоже переименуйте как slider). Создайте новый слой ruler и нарисуйте в нем прямоугольник, по которому должен перемещаться движок. Поместите этот слой позади самого движка (рис. 7.5).
Вернитесь к редактированию мувика slider. Щелкните правой кнопкой мыши на кнопке и выберите в контекстном меню пункт Actions (Действия), чтобы открыть окно сценария. Движок надо сделать перетаскиваемым, но так, что его невозможно вытащить за пределы ограничивающего прямоугольника. Кроме того, движок нужно разрешить перемещать не в любую сторону, а только по горизонтали.
Для этого установим равные значения верхней и нижней границы ограничивающего прямоугольника в операторе startDrag. Что касается левой и правой границы, то их нужно внимательно подобрать или рассчитать в зависимости от размеров прямоугольника в мувике ruler. Получится примерно такой код:
on (press) {
startDrag (this,false,-250,-8,300,-8);
}
on (release) {
stopDrag ();
}
Отличия могут быть связаны с другими размерами объектов.
Уже можно поместить экземпляр мувика ruler в основной ролик, назвав этот экземпляр тоже ruler, чтобы не путаться. Можно даже запустить просмотр ролика и убедиться, что движок перетаскивается, как надо (правда, при этом больше ничего не меняется).
Дальше начинается самое интересное. Существует множество способов заставить движок влиять на изменение каких-то параметров. Мы рассмотрим лишь один из них.
Вернемся к редактированию мувика ruler и создадим в нем новый слой для шкалы. Назовем его scale. Нарисуем прямоугольник, занимающий по ширине одну двадцатую от всей области перемещения движка, а по высоте равный прямоугольнику из слоя ruler. Преобразуйте его в мувик (можно назвать его scale-0).
Разместите экземпляр этого мувика так, чтобы он располагался внутри прямоугольника ruler в крайнем левом положении (рис. 7.6). Скопируйте его еще девятнадцать раз так, чтобы серия из этих мувиков заполнила весь прямоугольник ruler без просветов. Сейчас в слое scale расположено двадцать экземпляров мувика scale-0. Дайте им всем имена: самый левый назовите а01, следующий а02, потом а03, а04 и так далее до а20. После этого сделайте слой scale самым нижним в мувике ruler.
Теперь можно вернуться к редактированию мувика slider и снова открыть окно сценария кнопки. Необходимо отследить, в каком месте линейки отпущен "движок", и в зависимости от этого присвоить нужное значение прозрачности мувику photo, а также вывести это значение в динамическое текстовое поле al.
Используем для определения места освобождения "движка" свойство _droptarget. Это несложно, поскольку по всей длине шкалы у нас размещены экземпляры мувика (мы не зря "пронумеровали" их, дав имена с цифрами). Если выделить из значения свойства _droptarget последние два символа и преобразовать их в число функцией Number, мы получим числовое значение в диапазоне от 1 до 20. Поскольку возможных значений прозрачности у нас 100, прозрачность должна изменяться с шагом 5.
Но как выделить из значения свойства _droptarget последние два символа? Вспомним, что существует строковая функция substring, выделяющая из указанной строки нужный фрагмент. Но ей нужно указать номер символа. А как нам определить номер предпоследнего символа строки? Можно, конечно, просто посчитать символы в строке типа _level0.ruler.a06, которую вернет функция eval(_droptarget) или в строке типа /ruler/a06. которую содержит само свойство _droptarget. Учитывая, что все подобные названия имеют одинаковую длины, можно получить нужный номер символа. Однако мы пока не знаем, в какой форме нам понадобится созданный ползунковый регулятор. Возможно, его понадобится также включить в состав мувика (или разных мувиков). В этом случае нам придется каждый раз повторять трудоемкую ручную процедуру подсчета номера предпоследнего символа, так как значение свойства _droptarget может изменяться от случая к случаю.
Поэтому для определения номера предпоследнего символа строки лучше воспользоваться строковой функцией length, которая возвращает количество символов в строке. Если строку записать в переменную q, то номер предпоследнего символа строки - length(q)-1. Выделив два последних символа, преобразуем их в число функцией Number.
Остается только умножить полученное значение на 5 и занести его в переменную аl для отображения в динамическом поле. Не забудьте, что код находится в кнопке, а переменная - в основном ролике, так что к ней нужно обращаться: _root.al. В заключение, надо присвоить это же значение свойству _alpha мувика photo.
Посмотрим, какой в результате получился сценарий кнопки:
on (release) {
stopDrag ();
q = eval(_droptarget);
_root.a1 = Number(substring(q,length(q)-1,2))*5;
_root.photo._alpha = _root.al;
}
on (press) {
startDrag (this,false,-250,-8,300,-8);
}
Просмотрите ролик и убедитесь, что перемещение "движка" в различные положения влияет на прозрачность фотографии.
Конечно, этот пример демонстрирует далеко не все возможности технологии drag-and-drop. Его можно улучшить, например, сделать так, чтобы положение движка отслеживалось все время, а не только в момент отпускания, а также, чтобы простой щелчок мыши на линейке регулятора сразу перемещал бы "движок" к месту щелчка. В качестве упражнения внесите в этот пример эти и другие усовершенствования, дав волю фантазии.
Одним из распространенных приемов при создании роликов Flash является программное изменение направления анимации (реверс), а также ее скорости. Давайте на несложном примере посмотрим, как с помощью языка ActionScript можно выполнять подобные действия.
Для примера создадим какую-нибудь несложную анимацию и попробуем ее программно "развернуть" в другую сторону, а затем и поменять ее скорость.
В качестве анимации вполне подойдет вращающаяся стрелка. Откройте новый ролик, нарисуйте инструментом Кисть в рабочей области стрелку, направленную вверх (или что-нибудь еще, сейчас это неважно), выделите ее и преобразуйте в мувик клавишей F8. Вставьте в позицию 43 ключевой кадр клавишей F6, вернитесь в первый кадр и создайте анимацию движения с вращением по часовой стрелке на один оборот. Можно по традиции добавить в кадр 43 оператор
gotoAndPlay (1);
"Готовую" анимацию можно просмотреть. Однако, анимацией надо управлять из сценария, а значит, она не должна происходить "самостоятельно". Поэтому вставим в первый кадр оператор
stop ();
Теперь можно заняться управлением анимацией. Создадим новый мувик (CTRL+F8), назовем его Actions и поместим туда трехкадровый цикл. Пусть номер текущего кадра анимации хранится в переменной n. Тогда в первом кадре трехкадрового цикла нужно присвоить этой переменной значение 1 (чтобы анимация начиналась сначала).
Во втором кадре трехкадрового цикла надо увеличить номер текущего кадра анимации и затем перейти в ней к кадру с этим номером:
n++;
_root.gotoAndStop (n);
Следует отметить, что мы используем метод gotoAndStop, а не gotoAndPlay, тем самым не позволяя анимации воспроизводиться "самостоятельно".
В третий кадр трехкадрового цикла поместим стандартный оператор
gotoandPlay (2);
Вернемся в основной ролик, создадим новый слой под названием Actions и разместим в нем экземпляр мувика Actions (можно назвать его act). При этом неважно, в какой точке мы его расположим, поскольку он не содержит видимых объектов. Главное, чтобы его экземпляр был в основном ролике (где идет анимация).
Если сейчас просмотреть ролик, анимация "прокручивается" один раз. Поскольку основной ролик остановлен в первом кадре оператором stop и для перемещения по кадрам тоже используется метод gotoAndStop, ясно, что все управление осуществляется программно из мувика Actions.
Вернемся в мувик Actions и продолжим сценарий второго кадра нашего трехкадрового цикла. Прежде всего, анимацию надо зациклить, то есть после кадра 42 переводить ее снова на первый кадр. Это можно сделать следующим образом:
if (n>42) n -= 42;
Еще раз запустим просмотр ролика, Теперь анимация происходит непрерывно.
Попробуем развернуть анимацию в другую сторону. Заменим строку
n++;
строкой
n--;
Чтобы после первого кадра переходить на сорок второй, напишем
if (n<1) n += 42;
Если сейчас просмотреть ролик, то мы увидим, что анимация идет в обратном направлении.
Добавим немного интерактивности. Пусть при нажатии пользователем клавиши ВПРАВО анимация идет в прямом направлении, а при нажатии клавиши ВЛЕВО - в обратном.
Для этого изменение номера текущего кадра анимации n должно быть задано не константой, а переменной. Обозначим ее k:
n += k;
Тогда, если присвоить переменной k значение 1, анимация пойдет в прямом направлении (номер текущего кадра увеличивается), а если значение -1 - то в обратном (номер текущего кадра уменьшается). С помощью метода key.isDown проверим, не нажаты ли интересующие нас клавиши ВПРАВО или ВЛЕВО, и в зависимости от этого присвоим переменной k значение 1 или -1.
Вот какой сценарий получится во втором кадре трехкадрового цикла:
n += k;
if (n>42) n -= 42;
if (n<1) n += 42;
_root.gotoAndStop(n);
if (key.isDown(key.RIGHT)) k = 1;
if (key.isDown(key.LEFT)) k = -1;
Кроме того, чтобы анимация сразу не стояла на месте, в первом кадре трехкадрового цикла присвоим переменной k первоначальное значение:
k = 1;
Просмотрите ролик. Анимация идет в прямом направлении, а при нажатии клавиши ВЛЕВО переключается на обратное направление, что и требовалось. Нажатие клавиши ВПРАВО переключает направление анимации на прямое.
Итак, цель достигнута. Теперь попробуем программно изменять скорость нашей анимации. Чтобы ускорить анимацию, нужно всего лишь воспроизводить кадры не последовательно, а с пропусками. Если воспроизводить каждый второй кадр, анимация пойдет вдвое быстрее обычного, если каждый третий - втрое быстрее и так далее.
Внимательно посмотрев на сценарий второго кадра мувика Actions, мы поймем, что эта задача уже тоже практически решена! Ведь переменная k может принимать не только значения 1 и -1, но и 2, 3 и так далее. При этом как раз и воспроизведется каждый второй или каждый третий кадр.
Можно поступить следующим образом. Пусть при нажатии пользователем клавиши ВПРАВО анимация ускоряется, а при нажатии клавиши ВЛЕВО - замедляется до полной остановки и затем начинается в обратном направлении. В этом случае достаточно в ответ на нажатие клавиши ВПРАВО увеличить переменную k на единицу, а при нажатии клавиши ВЛЕВО - уменьшить на единицу.
Единственное, что при этом хочется сделать дополнительно - это ограничить диапазон значений переменной k. Действительно, если значение переменной k станет равным 21, вместо вращения мы увидим какое-то возвратно-поступательное движение (напомним, что у нас в анимации 42 кадра!). При дальнейшем увеличении k вместо ускорения мы увидим замедляющееся движение в обратную сторону, и при значении переменной k равном 42 анимация снова вроде бы остановится.
Приблизительно такой же эффект мы часто наблюдаем на экране кино, глядя на что-нибудь вроде вращающихся колес. Конечно, наличие такого эффекта в данном случае связано с характером анимации, но суть в том, что при пропуске большого количества кадров анимация становится беспорядочной. В данном случае благоразумно позволить переменной k изменяться в диапазоне от -5 до 5. Для этого при проверке нажатия клавиши ВПРАВО можно одновременно проверять, не равна ли уже переменная k максимальному допустимому значению, и наоборот.
Вот какой код получается в результате во втором кадре мувика Actions:
n += k;
if (n>42) n -= 42;
if (n<1) n += 42;
_root.gotoAndStop (n);
if ((key.isDown(key.RIGHT))&&(k<5)) k++;
if ((key.isDown(key.LEFT))&&(k>-5)) k--;
Просмотрите ролик. Скорость и направление анимации регулируются клавишами ВЛЕВО и ВПРАВО. Для большей наглядности рядом с анимацией можно поместить "спидометр" - динамическое поле, в котором отображается значение переменной k. Можно присвоить ему имя speed и во второй кадр мувика Actions дописать еще одну строку:
_root.speed = k;
В данном примере основная анимация размещалась прямо в ролике, что, вообще говоря, нехарактерно. Однако ничто не мешает перенести ее в отдельный мувик, которым также можно управлять из невидимого мувика Actions. Вообще говоря, нередки случаи, когда такой невидимый мувик управляет одновременно десятками других, видимых. Весьма удобно собрать программный код, управляющий всеми объектами ролика, воедино.
В некоторых случаях полезно осуществить загрузку данных из внешнего файла. Как правило, этот прием применяют, если в ролике отображаются какие-либо часто изменяющиеся данные. Например, представьте себе ролик, в котором, помимо всего прочего, отображаются сведения о курсе валют на сегодняшний день (или час).
Согласитесь, что нецелесообразно при каждом изменении курса какой-либо валюты открывать файл .FLA, находить там мувик с соответствующими данными, рискуя что-либо испортить случайным движением мыши (когда часто делаешь одну и ту же работу, внимание ослабевает), исправлять данные и вновь экспортировать ролик. К тому же и работу такую можно поручить не всякому, а только тому, кто хорошо разбирается в программе Flash.
Гораздо удобнее реализовать вывод изменяющихся данных в динамические текстовые поля и затем читать значения из внешнего файла. Такая возможность в программе Flash существует, причем внешним файлом может быть как другой ролик (который можно сделать очень простым), так и обычный текстовый файл (.ТХТ). Внести изменения в текстовый файл гораздо проще, да и поручить это можно гораздо более широкому кругу сотрудников.
В качестве примера рассмотрим ролик, содержащий данные о курсе валюты, которые он читает из внешнего файла. Правда, ролик-пример весьма прост - кроме текстовых полей в нем ничего нет (такой ролик можно и вручную изменить), но сути дела это не меняет.
Откроем новый ролик и создадим в нем четыре текстовых поля: два статических и два динамических. В статических полях напишем неизменяемый текст, например, "КУРС ЦБ на" и "USD 1 =". Динамические поля оставим пустыми - необходимые данные загружаются в них при просмотре ролика (рис. 7.7).
Сопоставим динамические поля с переменными day и sum. Соответственно, для отображения информации в этих полях нужно присвоить переменным day и sum какие-либо значения.
Эти значения можно сохранить во внешнем файле, а затем загрузить в ролик. Например, создадим текстовый файл kur.txt и напишем в нем следующее:
day=03.07.2002&sum=31.55
Как видите, это весьма похоже на передачу данных методом GET в строке запроса HTTP. Между именем переменной и ее значением ставится знак равенства, а роль разделителя между переменными играет амперсанд (&). Таким образом можно присвоить значение любому количеству переменных.
Чтобы загрузить переменные из файла в ролик, нужно использовать оператор loadVariablesNum или loadVariables. Первый из них загружает переменные на указанный уровень ролика, а второй - в указанный мувик. В данном случае наши текстовые поля находятся в основном ролике (уровень 0), значит, туда же нужно и загружать переменные из внешнего файла.
Откроем сценарий первого кадра ролика и напишем в нем:
loadVariablesNum ("kur.txt",0);
Этот код считывает значения переменных из файла kur.txt, что и требовалось. Очень важно, чтобы они были введены а верном формате, иначе программа Flash не сможет их правильно распознать. В нашем примере значения переменных из файла kur.txt тут же выводятся в динамические текстовые поля, однако можно подвергнуть их и дальнейшей обработке - они ведут себя так же, как обычные переменные.
И еще один интересный момент. Обратите внимание, что формат представления переменных в текстовом файле совпадает с их представлением в строке запроса HTTP. А это значит, что для ввода изменяющихся данных можно даже не исправлять текстовый файл! Действительно, предположим, что имеется небольшая форма HTML для ввода изменяющихся данных, причем имена ее полей совпадают с именами переменных (в данном случае sum и day):
<HTML><BODY><FORM
ACTION="http://myserver.ru/myscript.pl">
DAY:<INPUT NAME="day">
SUM:<INPUT NAME="sum">
<INPUT TYPE="submit"></FORM></BODY></HTML>
Поскольку эта форма предназначена не для посетителя Web-страницы, в ней нет ничего лишнего - только поля для ввода нужных значений. И теперь остается написать до смешного простой сценарий CGI, который автоматически сгенерирует текстовый файл для загрузки значений в ролик. Действительно, если ввести в поля day и sum значения "03.07.2002" и "31.55", то при нажатии на кнопку submit на сервер отправится такая строка адреса URL:
http://myserver.ru/myscript.pl?day=03%2E07%2E2002&sum=31%2E55
Как видите, в строке запроса передается то же самое, что нужно поместить в текстовый файл! Поэтому сценарий для обработки этого запроса (файл myscript.pl) весьма прост:
!#usr/bin/perl
$a=$ENV("QUERY_STRING");
$a=-s/%2E/\./g;
open(DATA, "kur.txt") or die "Error while
opening file: $!";
print $a;
close(DATA);
Этот простенький сценарий годится, конечно, только для нашего не менее простенького примера, однако можно видеть, что совпадение форматов представления данных в строке запроса HTTP и при загрузке в ролик Flash сильно облегчает жизнь.
[ предыдущая страница ] [ следующая страница ] [ содержание ]