АНИМАЦИЯ ВО FLASH (Часть 2)
В предыдущих разделах обсуждалась собственно анимация. Теперь перейдем
к рассмотрению инструмента, используемого при создании большинства высококачественных
Flash-приложений (Flash movies). Речь пойдет об ActionScript — языке программирования,
встроенном в Flash. Заметим, что версия языка ActionScript для Flash 5.0
существенно отличается от ActionScript, который был в Flash 4.
В Flash MX язык ActionScript был несколько расширен:
- добавлены функции динамического управления параметрами мультфильма во время его воспроизведения;
- для любого объекта мультфильма появилась возможность задавать перечень обрабатываемых событий (щелчок кнопкой мыши, нажатие клавиши и т. п.);
- добавлена возможность создания собственных типов объектов и событий;
- добавлены специальные команды управления временными параметрами мультфильма, Setlnterval и clearInterval. В ряде случаев их использование более эффективно, чем управление воспроизведением с помощью временной шкалы. Заметим, что аналогичные методы используются при создании анимационных эффектов в динамическом HTML (см. главу 10);
- расширены возможности управления текстовыми объектами. Например, можно при воспроизведении мультфильма преобразовывать статический текст в ссылку и наоборот;
- включен оператор Switch, который обеспечивает более наглядное представление последовательности логических условий по сравнению с оператором If;
- улучшена реализация ряда базовых функций языка (string, number, array и др.), в результате чего они теперь выполняются существенно быстрее.
В этой книге мы не будем выходить за рамки ActionScript, поддерживаемого
в Flash 5.O.
ActionScript позволяет создавать интерактивные Web-страницы. Вы можете
сделать так, чтобы выполнялись какие-либо действия при проигрывании определенного
кадра, при щелчке или при нажатии клавиши. Этот язык очень похож на JavaScript.
Лучший способ овладеть языком — начать писать на нем простые программки.
В программе Flash имеются возможности управления мультфильмом, отдаляющие
пользователя от написания программ на языке ActionScript вручную. Это
сделано, в основном, для начинающих и оправдано при создании очень простых
мультфильмов. Вся сила Flash — в развитом языке программирования. Что-либо
серьезное невозможно сделать без его применения. .
Действия можно применить к трем вещам: к кадру на временной шкале, к символу
типа Button (Кнопка) и символу типа Movie
clip (Анимация). К символам типа Graphic
(Графический) действия не применимы.
Покажем, что ActionScript может служить как
для создания весьма внушительных программ, так и для выполнения элементарных
действий, которые сделают Web-страницу гораздо привлекательней.
Прежде всего, разъясним несколько терминов, используемых при обсуждении ActionScript:
- Действие (Action) — инструкция, которая указывает Flash-мультфильму, что делать. От них произошло название языка — ActionScript (Сценарий действий).
- Событие (Event) — может возникать, когда закончилась загрузка какого-то кадра, когда достигнут определенный кадр, когда пользователь нажал клавишу на клавиатуре или когда курсор мыши оказался над объектом и т. п.
- Выражение (Expression) — любая часть
инструкции, порождающая значение,
Например:
2 + 2
2 * 5
a + b
(s5 + k) * random (10)
- Функция (Function) — блок кода, который можно многократно использовать. Функции можно передавать значения и получать от нее возвращаемый результат. Например, number=get_color(15,24), где 15 и 24 являются аргументами (параметрами) функции get_color, возвращаемое значение которой записывается в переменную number.
- Класс (class) — тип объектов. Например, класс «дерево» — экземпляр класса «растение». В Flash есть несколько предопределенных классов (очень похожих на классы JavaScript). Вы можете создавать свои классы или модифицировать существующие.
- Экземпляр (Instance) — это экземпляр (в буквальном смысле) определенного класса. Например, экземпляром класса «растения» могут являться «дерево», «куст» или «цветок». Экземпляр— уже конкретный реальный объект. Если класс — это определение объекта, то экземпляр — его конкретное воплощение. Каждому экземпляру можно присвоить имя, чтобы через него обращаться к функциям или переменным объекта. Когда мы создаем символ, то тем самым создаем класс, а когда перетаскиваем этот символ из окна библиотеки в рабочую область, то вставляем в сцену экземпляр символа.
- Обработчик (Handler) — специальная инструкция, обрабатывающая событие. Например, onclipEvent является обработчиком действий, связанных с конкретным символом.
- Оператор (Operator) — элемент языка, который вычисляет значение, исходя из одного или более аргументов. Например, оператор сложения (+) возвращает сумму двух значений, расположенных слева и справа от него.
- Переменная (Variable) — это идентификатор, которому можно присвоить значение. Например: а = 5, name = "Иван".
Палитра действий (Actions) служит для отображения и ввода ActionScript-npoграмм.
Существует два режима работы с палитрой действий:
нормальный (для «чайников») и экспертный.
В экспертном режиме вы можете задать команду (инструкцию) прямо в поле
ввода с помощью клавиатуры, а в нормальном режиме так делать нельзя, но
для уточнения действий используется панель параметров внизу. Выбрать нормальный
или экспертный режим можно в меню палитры действий (кнопка со стрелкой
в правом верхнем углу).
Добавить инструкцию можно, нажав кнопку «+» или выбрав соответствующую
инструкцию в списке элементов языка. Кроме того, для всех действий в Flash
имеются комбинации клавиш, с помощью которых это можно сделать гораздо
быстрее. Они приведены справа от каждого действия в меню кнопки «+». Удалить
инструкцию можно, выбрав ее и нажав клавишу <Delete>.
Ели у вас нет опыта программирования на языках типа c++, Java или JavaScript,
то начните работу в нормальном режиме. Нормальный режим обладает достоинством,
делающим его незаменимым для новичков: при его использовании гораздо меньше
шансов ошибиться в синтаксисе языка. Новичкам это поможет быстрее понять
тонкости ActionScript. Почаще смотрите на выражения в правой части палитры.
Рис. 598. Палитра действий (Actions), вкладка действий объекта (Object Actions) в Flash 5.0. В меню можно выбрать нормальный или экспертный режим работы. Если выделенное действие имеет параметры, то внизу палитры располагаются поля ввода их значений
На палитре действий указываются либо действия объекта
(Object Actions), либо кадра (Frame Actions),
выбранного в данный момент. Это отражается в заголовке палитры. Действия
объекта это действия кнопки или клипа. Заметим, что действия клипа задаются
на его собственной временной шкале, а не на основной временной шкале.
Впрочем, если ваш мультфильм состоит из единственного клипа, то их нет
надобности различать.
На вкладке Movie Explorer (Проводник мультфильма)
палитры действий можно увидеть структуру мультфильма.
В Flash MX палитра действий несколько усовершенствована и, кроме того,
сам язык ActionScript получил развитие. Рассмотрим лишь основные особенности
палитры Actions.
Вызвать палитру Actions можно различными способами.
Самым эффективным, пожалуй, является следующий. Если требуется создать
или редактировать сценарий кадра, то щелкните правой кнопкой мыши на нужном
кадре на временной шкале и в контекстном меню выберите команду
Actions. В случае кнопки или мультфильма выделите объект на рабочем
поле и на палитре Properties (Свойства) щелкните
кнопке Edit the action script (Редактировать
сценарий действий), расположенной у правой границы палитры. Убедитесь,
что сценарий связан именно с интересующим вас объектом. Для этого посмотрите
на заголовок палитры действий и расположенный ниже раскрывающийся список.
Рис. 599. На вкладке Movie Explorer отображается иерархическая структура мультфильма
В правом конце заголовка палитры Actions имеется
значок, щелчок на котором вызывает меню. В этом меню, в частности, можно
выбрать режим работы с палитрой (нормальный или экспертный).
Кнопка Script Pin (Закрепить сценарий) позволяет
оставить содержимое палитры Actions без изменений,
даже если вы выберете другой объект.
Среди элементов иерархического списка действий отметим группы Flash
UI components (Компоненты пользовательского интерфейса) и Deprecated
(He рекомендуемые).
Рис. 600. Палитра Actions в Flash MX
Основные действия с мультфильмами
Большая часть работы в Flash приходится на манипулирование символами. На нем основаны практически все базовые приемы, трюки и эффекты. С помощью сценариев на языке ActionScript символы могут выполнять практически любые действия. Надо только помнить, что делать это нужно только либо в ответ на действие пользователя, либо при появлении кадра на временной шкале. Ниже перечислены некоторые основные инструменты. Описание остальных вы найдете, например, в электронной справке Macromedia Flamnshi и приложении 5 этой книги. Перечислим события, используемые при определении действий в мультфильмах, с указанием, когда они происходят:
- Load (Загрузка) — при загрузке мультфильма в память;
- EnterFrame (Ввод кадра) — при вводе каждого кадра мультфильма;
- Unload (Выгрузка) — в первом кадре после выгрузки мультфильма из памяти;
- Mouse Down (Нажата кнопка мыши) — при нажатии (щелчке) левой кнопки мыши;
- Mouse Up (Отпущена кнопка мыши) — когда отпускается левая кнопка мыши;
- Mouse Move (Перемещение мыши) — при перемещении указателя мыши;
- Key down (Нажатие клавиши) — при нажатии любой клавиши;
- Key Up (Отпускание клавиши) — при отпускании любой клавиши;
- Data (Данные) — при получении данных из действий loadVariables и load Movie.
Далее мы опишем основные действия, т. е. действия из списка Basic Actions.
Действие Go To
Действие Go To (Перейти к) предписывает мультфильму перейти к указанному кадру, который можно задать несколькими способами. На палитре действий способ задания кадра перехода выбирается в раскрывающемся списке Туре. Возможны следующие значения:
- Frame Number (Номер кадра). Число, указывающее позицию кадра на временной шкале;
- Frame Label (Метка кадра). Кадру можно присвоить метку и затем обращаться к нему через нее. Это очень полезно, если вы перемещаете кадры по временной шкале, изменяя тем самым их номера;
- Expression (Выражение). Номер кадра можно вычислять с помощью выражения на языке ActionScript;
- Next Frame (Следующий кадр);
- Previous Frame (Предыдущий кадр).
После того как мультфильм перейдет к указанному вами кадру, могут быть выполнены следующие два действия:
- Go to and Play (Перейти и воспроизвести). Используется для перехода к другому фрагменту мультфильма, а также для организации циклического воcпроизведения. Во втором случае к последнему кадру добавляется действие, предписывающее переход к первому кадру;
- Go to and Stop (Перейти и остановить воспроизведение). Используется, например, для ожидания реакции пользователя (щелчка на кнопке и т. п.).
Рис.601. Палитра действий при выборе параметров действия Go To
Действие Play
Действие Play (Воспроизвести) воспроизводит мультфильм. Обычно оно добавляется к специальной кнопке, щелчок на которой начинает воспроизведение. Для корректного выполнения действия Play необходимо, чтобы указанный мультфильм присутствовал на временной шкале и имел имя. Чтобы указать, что именно следует воспроизвести, используется действие Tell Target (Указать цель), которое мы опишем ниже.
Действие Stop
Действие Stop (Остановить) прекращает воспроизведение мультфильма. Обычно его добавляют в последний кадр, чтобы предотвратить циклическое воспроизведение. Иногда действие Stop используют в специальной кнопке, щелкнув на которой, пользователь может прекратить демонстрацию фрагмента или всего мультфильма.
Действие Toggle High Quality
Действие Toggle High Quality (Установить высокое качество) служит для управления качеством графического изображения мультфильма. Обычно его добавляют к кнопке для переключений между высоким и низким качеством отображения.
Действие Stop All Sounds
Действие Stop All Sounds (Остановить все звуки) прекращает воспроизведение всех звуковых файлов.
Действие Get URL
Действие Get URL (Связать с URL) является эквивалентом гиперссылки в языке HTML. Обычно используется при создании Web-страниц. Добавив это действие к кнопке, можно сделать так, чтобы при щелчке на ней открывалось приложение (например, Web-страница) неуказанному URL-адресу.
Рис. 602. Палитра действий при выборе параметров действия Get URL
На палитре действий можно задать параметры действия Get URL. В поле URL следует ввести URL-адрес. В раскрывающемся списке Window (Окно) можно выбрать следующие значения:
- _self (в том же). Открывает Web-страницу в текущем (том же) окне;
- _blank (в новом). Открывает Web-страницу в новом окне;
- _parent (в родительском). Если мультфильм находится внутри кадра на Web-странице, то новая Web-страница будет расположена в родительском окне, содержащем этот кадр;
- _top (поверх). Если мультфильм находится в кадре внутри окна, то все кадры будут удалены и замещены новой Web-страницей.
Вы можете использовать разработанные ранее сценарии на языках ActionScript, JavaScript и других, которые сохраняют данные в переменных. При этом вы можете определить, что делать с значениями этих переменных. Для этого нужно выбрать значение в раскрывающемся списке Variables (Переменные):
- Don't send (He отправлять) (значение по умолчанию). Если у вас нет программных заготовок, вычисляющих значения переменных, то оставьте этот параметр;
- Get. Отправляет значения переменных как
часть строки, содержащей URL.
Можно использовать не более 1024 символов для значений переменных. - Post. Отправляет значения переменных как отдельный набор данных. В этом случае данных может быть больше и они лучше защищены.
Действие FS command
Действие FS command (Команда FS) предназначено
для управления приложениями, такими как Flash Player,
Web-браузер и другие. Например, это действие позволяет выполнить сценарий
на языке JavaScript, написанный для конкретной Web-страницы. На палитре
действий предусмотрены два поля для ввода названия команды JavaScript
и ее аргументов.
Выполнение сценариев на языке JavaScript из ActionScript более подробно
будет рассмотрено ниже в соответствующем разделе данной главы.
Действие Load Movie
Действие Load Movie (Загрузить мультфильм)
предназначено для загрузки SWF-файла с мультфильмом. Оно предпочтительнее,
чем действие Get URL, используемое обычно
для загрузки Web-страниц.
Рис. 603. Палитра действий при выборе параметров действия Load Movie
Действие Load Movie имеет следующие параметры:
- URL. Если мультфильм находится в Web, то необходимо ввести полный URL-адрес. Если загружаемый SWF-файл находится в той же папке, что и текущий мультфильм, то можете просто указать его имя. Если он находится во вложенной папке, введите путь кфайлу и его имя, например, mov/my_movie.swf.
- Location (Положение). Возможны два варианта:
- Level (Уровень). Введите номер уровня, если хотите использовать несколько открытых мультфильмов. Чтобы заменить исходны и и все другие загруженные мультфильмы новым, установите значение 0. Для загрузки нового мультфильма без замены уже загруженных выберите номер уровня, который еще не использовался. При этом частота кадров, цвет фона и размер нового мультфильма будет определяться соответствующими параметрами мультфильма уровня 0;
- Target (Цель). Введите имя клипа, который хотите заменить SWF-файлом. Это позволяет встраивать один клип вместо другого при сохранении места, масштаба и параметров вращения заменяемого клипа.
- Назначение параметра Variables (Переменные) такое же, как и для действия Get URL (см. выше).
Действие UnLoad Movie
Действие Unload Movie (Выгрузить мультфильм) выгружает из памяти мультфильмы, которые были загружены с помощью действия Load Movie. Среди параметров нужно указать Level (Уровень), либо Target (Цель). Следует своевременно выгружать уже ненужные клипы для освобождения памяти. Это будет способствовать, в частности, высококачественному воспроизведению оставшейся части мультфильма.
Действие Tell Target
Мультфильм может содержать клипы (другие мультфильмы). Каждый такой
мультфильм имеет собственную временную шкалу. Действие Tell
Target (Указать цель) служит для управления одним мультфильмом
из другого. Таким образом, одна временная шкала может управлять другой.
Действие Tell Target лишь сообщает Flash,
с каким объектом вы собираетесь работать, а другие действия должны указывать,
что предстоит совершить.
Для действия Tell Target требуется указать
лишь один параметр — целевой объект. Если вы не можете его указать непосредственно,
то воспользуйтесь кнопкой с изображением прицела внизу палитры действий.
В результате откроется диалоговое окно Insert Target
Path (Вставить путь к цели). Кроме иерархического списка объектов,
в этом окне можно указать дополнительные параметры:
- Notation (Система обозначения). В Flash 5.0 принято разделять элементы пути точками (Dots), а в Flash 4.0 — косыми линиями (Slashes);
- Mode (Режим). Определяет отображение иерархии клипов. В режие Relative (Относительный) отображаются только экземпляры клипов в текущем кадре текущей временной шкалы и экземпляры вложенных в них клипов. Для ссылки на текущую временную шкалу используется приставка this (этот). В режиме Absolute (Абсолютный) отображается каждый экземпляр клипа во всем мультфильме.
Рис. 604. Диалоговое окно Insert Target Path
Действие If Frame Is Loaded
Действие If Frame Is Loaded (Если кадр загружен)
проверяет, загружается ли в память указанный кадр. Оно обычно используется
при создании заставки — небольшого клипа, предваряющего воспроизведение
основного мультфильма. При этом его комбинируют с действием Go
To and Play (Перейти и воспроизвести).
Для действия If Frame Is Loaded можно задать
параметры:
- Scene (Сцена). Укажите сцену, содержащую нужный кадр;
- Туре (Тип). Укажите, каким способом задается нужный кадр: Frame Number (Номер кадра), Frame Label (Метка кадра) или Expression (Выражение ActionScript, вычисляющее номер кадра);
- Frame (Кадр). Введите номер кадра, метку или выражение.
Рис. 605. Палитра действий при выборе параметров действия If Frame Is Loaded
Действие On Mouse Event
Действие On Mouse Event (По событию мыши) используется только для кнопок. При добавлении какого либо действия к кнопке Flash автоматически добавляет и действие On Mouse Event. Это действие имеет параметр — событие.
Рис. 606. Палитра действий
при выборе параметров действия On Mouse Event
Свойства мультфильма
Ниже перечислены некоторые наиболее часто используемые свойства (параметры) мультфильмов, которые можно считывать и/или изменять с помощью выражений ActionScript:
- _ х, _у — координаты мультфильма (в пикселах);
- _xscale, _yscale — масштаб мультфильма (в процентах), соответственно по горизонтали и вертикали;
- _width, _height — ширина и высота мультфильма (в пикселах);
- _rotation — угол поворота мультфильма (в градусах);
- _alpha — прозрачность мультфильма (в процентах);
- _visible — видимость.
Рассмотрим в качестве примера мультфильм, в котором имеются анимация (клип) и кнопка. При щелчке на кнопке клип становится невидимым.
- Сначала сделаем мультфильм. Чтобы не тратить на это время, выберем его в библиотеке: возьмем какую-нибудь кнопку (Window> common Libraries>Buttons), а затем — клип (Window>common Libraries>Movie clips). Поместим кнопку и клип в рабочую область. Тем самым мы создадим экземпляры символов кнопки и клипа.
- Выделим экземпляр клипа на рабочей области и раскроем палитру его свойств (Window>Panels>Instance Properties).
- В поле Name (Имя) введем значение testMc.
- Выделим экземпляр кнопки в рабочей области on и раскроем палитру действий (Window>Actions). На палитре действий раскроем вкладку Actions.
- Дважды щелкнем на названии действия setProperty (Установка свойств), чтобы добавить его в правый список.
- В контекстном меню выберем _visible (Видимость).
- Для параметра Target (Цель) введем значение
testMc, а для параметра Value (Значение)
— 0. Код должен выглядеть так:
on (release) {
setProperty ("testMc", _visible, false)};
- Для проверки клипа выберем команду control>Test Movie и щелкнем на кнопке. Клип должен исчезнуть с экрана.
Для того чтобы обращаться к мультфильмам, требуется задать имя
объекта (instance name) и путь до объекта
(target path). Договоримся, что мультфильм
(Movie clip) и объект — для нас одинаковые вещи.
Имя объекта — это имя конкретного экземпляра символа. Например, у нас
может быть символ «Автомобиль», а экземпляры этого символа называются
«Жигули», «Волга», «Audi», «Ока» и т. д.
Чтобы дать имя объекту, нужно выделить объект и в палитре
Instance (открываемой командой Window>Panels>Instance
или нажатием клавиш <ctrl>+<I>) ввести имя объекта
в поле Name. Имена могут состоять только из
букв, цифр и знака подчеркивания, причем имя не должно начинаться с цифры.
В поле Behavior этой панели задается тип объекта,
в нашем случае — это Movie clip.
Рис. 607. Панель задания свойств экземпляра символа (объекта)
Путь к объекту — это запись имени объекта с учетом его положения в иерархии.
Дело в том, что в Flash объекты можно вкладывать друг в друга, составляя
таким образом иерархию. Вложенность обеспечивает не только удобство при
работе с объектами, но и ограничивает видимость имен объектов только одним
уровнем. Объект может напрямую (по имени) обращаться только к объектам,
входящим в него, т. е. расположенным в иерархии на один уровень ниже.
Для того чтобы обратиться к объекту другого уровня, нужно указать путь
к нему. Причем путь может указываться как абсолютно (начиная с самого
верхнего уровня иерархии), так и относительно (начиная с текущего уровня).
Путь включает в себя объекты, через которые нужно пройти по дереву иерархии,
чтобы добраться до нужного объекта. Объекты в пути разделяются точками.
Кроме того, есть несколько полезных указателей (их можно назвать
виртуальными объектами).
- this — указатель на самого себя (т. е. на текущий объект). Используется в случаях, когда, например, нужно передать в функцию указатель на объект, из которого эта функция вызывается;
- _parent — указатель на родительский объект, т. е. объект, расположенный уровнем выше;
- _root — «корень» или начало иерархии. Без него не обойтись при указании абсолютного пути.
- лист.play () — вызывается функция play() подобъекта лист;
- _parent .дерево .лист . stop ()— подразумевается, что на некотором уровне имеется объект дерево, у которого есть вложенный объект лист, вызывающий функцию stop();
- _root .banner ._visible = false — сделать невидимым мультфильм banner, находящийся на первом уровне.
Рассмотрим в качестве примера иерархию из пяти объектов (см. рисунок). Объекты 1—4 находятся в первом слое, объект 5 — во втором слое. Объект 2 вложен в объект 1, а объект 3 вложен в объект 2. Назовем объекты obj 1, obj2, obj3, obj4, obj5.
Рис. 608. Пример иерархии из 5 объектов
Теперь займемся путями. Для начала посмотрим, какие объекты могут обращаться
друг к другу по имени: obj 1 может обращаться к obj2, a obj2 — к obj3,
но при этом obj 1 не может обратиться к obj3 напрямую, т. к. он содержится
не в obj 1, а в obj2.
Пусть, например, объекту 1 нужно, чтобы объект 3 начал заново воспроизводиться
с первого кадра. Вот как это делается:
obj 2.obj 3.gotoAndPlay(1)
Чтобы из объекта 4 сделать полупрозрачным объект 1 (со всеми его подобъек-тами), нужно в действиях объекта 4 написать:
_parent.objI._alpha = 50
или
_root.obj1._alpha = 50
Поскольку obj4 находится на первом уровне иерархии, то для него _root
и _parent — одно и то же.
Теперь для объекта 3 напишем сценарий, который сделает объект 5 невидимым
при нажатии кнопки мыши. В сценарии для объекта 3 напишем:
onclipEvent (mouseDown)
{
_root.obj5._visible = false;
}
В этом фрагменте использован абсолютный путь. При использовании относительного пути текст выглядел бы так:
_parent._parent._parent.objS._visible = false
В приведенных выше примерах показано не только то, как выглядят пути,
но и как вызываются функции и присваиваются значения свойствам. Попробуйте
использовать обработчик onclipEvent, задавая различные условия и выполняя
различные действия с объектами.
Одними из самых важных являются функции управления воспроизведением мультфильма
(play(), stop(), gotoAndPlay(), gotoAndStop()). Функции play() и stop()
вызываются без параметров, в то время как в функции goto() нужно указывать
номер кадра и, возможно, сцену.
При создании мультфильмов, особенно интерактивных, часто требуется знать
положение указателя мыши. Координаты указателя мыши хранятся в свойствах
_xmouse и _ymouse. Они могут быть вычислены относительно различных систем
координат. Так, в главной системе координат горизонтальная координата
курсора мыши определяется следующим образом:
x_pos = _root._xmouse;
Чтобы определить эту же координату внутри клипа, следует использовать имя экземпляра этого клипа:
x_pos = root.myMovieclip. xmouse
Здесь myMovieclip — имя экземпляра клипа.
Вы можете также определить положение указателя мыши внутри клипа, используя
свойства _xmouse и _ymouse в действии клипа (clip action), как показано
в следующем примере:
nclipEvent (enterFrame)
{
xmousePosition = _xmouse;
ymousePosition = _ymouse;
}
Переменные x_pos и y_pos используются для хранения значений координат указателя мыши. Вы можете применить их далее в любом сценарии вашего мультфильма. В следующем примере значения x_pos и y_pos обновляются каждый раз, когда пользователь перемещает мышь:
onclipEvent(mouseMove)
{
x_pos = root, xmouse; y_pos = _root._ymouse;
}
Отладка сценариев ActionScript
Рассмотрим инструменты, служащие для отладки сценариев ActionScript,
окна Output (Вывод) и Debugger
(Отладчик).
Есть функция trace(), которая выводит сообщения в окно Output.
Туда же выводятся сообщения об ошибках. Использовать функцию trace() очень
просто:
trace ("280-й кадр");
ли, например,
trace (xpos + k);
Flash 4 окно Output было единственным средством отладки. В Flash 5 появился специальный инструмент — окно Debugger. Чтобы им пользоваться, нужно проверять мультфильмы не как обычно (команда Test Movie или клавиши <ctrl> + <Enter>), а с помощью команды Debug Movie (или клавиш <ctrl>+<Shift>+<Enter>). Окно Debugger можно скрыть/показать с помощью команды Window> Debugger.
Рис. 609. Окно Debugger отладчика сценариев
В одной части окна Debugger находится иерархический
список объектов, используемых в мультфильме. Выбрав объект, можно просматривать
его свойства (вкладка Properties).
На вкладке Variables находятся все переменные.
Преимущество вкладки Variables состоит в том,
что вы можете модифицировать значения любых переменных «на лету» и тут
же получать отражение этого изменения в мультфильме.
Наконец, можно добавить любые переменные в список просмотра
(Watch list) и наблюдать за их значениями (вкладка
Watch).
При изучении свойств интерактивности проще всего начать с создания кнопки.
Как вы уже знаете, в Flash существует специальный тип символа для создания
кнопок — Button. Будем считать, что вы уже
умеете создавать кнопки как визуальный объект (выше в этой главе рассказано,
как это сделать). Теперь попробуем наделить кнопку функциями (или, как
еще говорят, добавим к ней функциональность).
Кнопки в Macromedia Flash могут реагировать на много событий. Эти события
можно обработать по своему усмотрению. Вот список событий:
- press —кнопка мыши нажата, когда курсор находится в пределах кнопки;
- release — кнопка мыши отжата, когда курсор находится в пределах кнопки;
- releaseOutside — кнопка мыши отжата, когда курсор находится вне пределов кнопки;
- rollover — указатель мыши входит в пределы кнопки;
- rollout — указатель мыши выходит за пределы кнопки;
- dragOver — указатель мыши входит в пределы
кнопки, при этом она была
нажата, и нажата кнопка мыши; - dragOut — указатель выходит за пределы кнопки, при этом она была нажата, и нажата кнопка мыши;
- keyPress ("клавиша") — была нажата <клавиша>. Список клавиш можно посмотреть в справке по Flash (объект Key) или воспользоваться панелью параметров для ввода нужной клавиши.
К сожалению, Flash воспринимает только левую кнопку мыши. Правая кнопка
используется для вызова контекстного меню (щелкните правой кнопкой на
названии какого-нибудь Flash-мультфильма).
Перехватываются события с помощью функции оп(). Синтаксис ее таков:
on (событие)
{
...II код, обрабатывающий событие
}
Очень часто используемый пример — переход по ссылке при нажатии кнопки:
on(release)
{
getURL("http://zonaS.al.ru") ;
}
Чтобы проверить этот сценарий, выделите кнопку, нажмите <ctrl>+<Alt>+<A>
и введите этот текст сценария.
Аналогичным образом можно перехватить все события, связанные с кнопкой.
Как их использовать — дело исключительно вашего воображения.
Без меню не обходится практически ни одна Web-страница. Есть несколько способов создания меню в Flash. Рассмотрим один из них. У нас будет главная кнопка. Наведение на нее указателя мыши раскроет ряд других кнопок, составляющих подменю. Если щелкнуть на кнопке подменю, то выполнится некоторое действие, например, переход на Web-страницу по указанному URL-адресу. Если указатель мыши окажется за пределами кнопок подменю, то они исчезнут, а главная кнопка останется.
Рис. 610. Пример раскрывающегося меню
Сначала рассмотрим план реализации нашего меню:
- Создать главную кнопку и разместить ее в кадре1. Добавить к этому кадру действие Stop.
- Добавить к главной кнопке (не кадру !) действие перехода к другому кадру, например, кадру 5.
- В кадре 5 разместить главную кнопку и кнопки подменю. Таким образом, щелкнув на главной кнопке в кадре 1, мы перейдем в кадр 5, содержащий раскрытое меню.
- Добавить к каждой кнопке подменю их собственные действия — переходы по некоторму URL-адресу.
- В кадре 5 создать еще одну кнопку без всяких украшений. Сделать ее невидимой. Ее активная область (Hit) должна охватывать все рабочее поле за исключением области, занятой главной кнопкой и кнопками подменю. Добавить к этой кнопке действие перехода к кадру 1, если указатель мыши находится над ней (т. е. если указатель мыши вышел за область кнопок меню).
Теперь перейдем к алгоритму реализации нашего плана. Начнем с создания четырех слоев (Insert>Layer):
- Для хранения действий кадров. Назовем его Actions (Действия).
- Для главной кнопки меню. Назовем его Main (Главная).
- Для кнопок подменю. Назовем его Submenu (Подменю).
- Для остальной части рабочей области. Назовем его Other (Остальная).
Далее поступайте следующим образом:
- В слое Actions создайте ключевые кадры 1 и 5. Добавьте к этим кадрам действие Stop.
- В слое Main создайте ключевой кадр 5.
- В слое Main выделите кадр 1. Создайте новый символ типа Button (Кнопка). Нарисуйте кнопку. Экземпляры этого символа мы используем и для кнопок подменю.
- Щелкните на кадре Over и нажмите клавишу <F6>, чтобы вставить ключевой кадр. Нарисуйте кнопку для состояния Over. Обычно это просто модификация изображения для состояния Up.
- Щелкните на кадре Down и нажмите клавишу <F6>. Нарисуйте изображение кнопки для этого состояния.
- Выполните команду Edit>Edit Movie (Редактировать>Редактировать Мультфильм), чтобы покинуть временную шкалу кнопки и вернуться к главной временной шкале (шкале сцены).
- Откройте окно библиотеки (Window>Library). Перетащите из него экземпляр символа кнопки на рабочее поле, например, в левый верхний угол.
- Откройте окно Object Actions (Window>Actions) и выберите действие Go To (Перейти к). В поле Туре (Тип) установите значение Frame Number (Номер кадра), а в поле Frame (Кадр) введите значение 5. Выделите первую строку программного кода и установите флажок Roll Over (Переместить над) и снимите флажок Release (Отпустить). В результате при пересечении указателем мыши главной кнопки произойдет переход к кадру 5, в котором будут находиться кнопки подменю.
- Создайте на кнопке какой-нибудь текст.
- Сохраните полученный результат (File>Save).
- В слое Submenu выделите кадр 5 и нажмите клавишу <F6>, чтобы он стал ключевым. Перетащите экземпляр своей кнопки из окна библиотеки непосредственно под первую кнопку. Перетащите еще один экземпляр кнопки под вторую. Сделайте это столько раз, сколько вам нужно. Если хотите, можете воспользоваться панелью Align (Выравнивание). Добавьте к кнопкам текстовые надписи.
- Добавьте к кнопкам подменю какие-нибудь действия, например, Get URL или Go To and Play.
- В слое Other выделите кадр 5 и нажмите клавишу <F6>, чтобы он стал ключевым.
- Нарисуйте прямоугольник, немного перекрывающий рабочее поле. Цвет заливки выберите заметно отличающимся от цвета кнопок.
- Выберите другой цвет заливки, отличающийся от цвета большого прямоугольника и цвета кнопок. Нарисуйте прямоугольник, охватывающий все кнопки. Выделите только этот прямоугольник и нажмите клавишу <Delete>. В предыдущей главе мы уже описывали, что происходит в этом случае. В результате у вас получится большой прямоугольник, который закрывает все, кроме кнопок.
- Преобразуйте большой прямоугольник в символ типа Button.
- Выполните команду Edit>Edit Symbols(Редактировать>Редактировать символы).
- Выделите кадр Hit и нажмите клавишу <F6>, чтобы сделать его ключевым.
- Выделите кадр Up и нажмите клавишу <Delete>.
- Выполните команду Edit>Edit Movie (Редактировать>Редактировать мультфильм). Теперь большой прямоугольник будет отображаться прозрачным голубым цветом. Выделите его и выполните команду Window>Actions (Окно>Действия), чтобы открыть окно Object Actions (Действия объекта). Выберите действие On Mouse Event (По событию мыши). Установите флажок Roll Over и снимите флажок Release. Добавьте действие Go To, оставив значение параметра по умолчанию, т. е. 1.
Перетаскивание элементов мышью
В системе Flash имеются средства для создания мультфильмов, которые
пользователь может перемещать по экрану. Эти средства находят широкое
применение как в играх, так и в деловых приложениях. Например, можно организовать
отбор пользователем значков товаров в корзину, перемещение перекрывающихся
текстовых полей, движение ползунка в элементе управления звуком и т. п.
Рассмотрим применение технологии перетаскивания элементов на примере простого
мультфильма, в котором имеются кнопка и текст. Пользователь может нажать
кнопку мыши в пределах кнопки, расположенной на экране, и перетащить ее.
Перемещение прекращается, когда пользователь отпускает кнопку мыши.
- Создадим новый мультфильм. Выполним команду Insert>New Symbol (Вставить>Новый символ). На экране появится диалоговое окно Symbol Properties (Свойства символа).
- Введем имя перетащи_меня, установим переключатель Movie clip. Щелкнем на кнопке ОК. При этом произойдет переход в режим редактирования символов.
- Нарисуем произвольную фигуру («Тряпку»). Для этого можно использовать инструмент «Овал». Для достижения эффекта прозрачности, если хотите, можно установить значение параметра alpha равным 50. Выделим эту фигуру и нажмем клавишу <F8> для преобразования рисунка в символ.
- В диалоговом окне Symbol Properties установим переключатель Button и назовем символ Кнопка. Щелкнем на кнопке ОК.
- Выделим только что созданную кнопку и перейдем в экспертный режим
ввода сценариев. Чтобы раскрыть окно ввода сценариев (Object
Actions), щелкнем правой клавишей на символе кнопки и в контекстном
меню выберем команду Actions. Введем следующий
сценарий:
on (press) {
startDrag(_root.cloth);
}
on (release) {
stopDrag () ;
}
Вместо startDrag(_root.cloth) можно написать startDrag(this). Идентификатор cloth — имя экземпляра клипа (символа типа Movie clip), который будет перемешаться. Мы рассмотрим его позднее. - Щелкнем на кнопке Scene 1 (Сцена 1). При этом мы выходим из режима редактирования символов и возвращаемся к работе с главным мультфильмом. Введем текст «Сотрите пыль с экрана» (где угодно, только не на кнопке).
- Выделим только что введенный текст и нажмем на клавишу <F8> (преобразовать в символ). Установим тип символа Graphic и введем имя сотри_меня. Вообще говоря, преобразовывать текстовые символы в графические не обязательно. Обычно это делается для того, чтобы зритель гарантированно увидел текст таким, как его задумал автор, независимо от наличия у него на компьютере нужного шрифта.
- Объекты и сценарии мультфильма созданы. Теперь раскроем окно библиотеки
(команда меню Window>Library), в нем
должны быть три созданных нами символа, как показано на рисунке.
Рис. 611. Окно Library с тремя символами типов Button, Movie clip и Graphic
- Перетащим символ типа Movie clip с именем перетащи_меня из окна библиотеки в рабочую область. Выделим его и раскроем палитру Instance (Экземпляр). Для этого выполним команду Modify>Instance (или нажмем клавиши <ctrl>+<I>). Введем в поле Name имя экземпляра клипа cloth. Ввод имени экземпляра клипа обязателен, поскольку к нему есть обращение из сценария.
- Сохраним наше творчество в файле с расширением fla. Протестируем мультфильм, для чего выполним команду меню control>Test movie. На следующем рисунке показано то, что должно было получиться.
Рис. 612. Фигуру в виде пятна можно перетаскивать по экрану мышью. Прозрачность этой фигуры установлена равной 50, чтобы было виден текст, который они перекрывает.
Рассмотрим создание текстового поля, в которое пользователь может ввести символы с помощью клавиатуры. Для этой цели создадим простой мультфильм, содержащий текстовое поле в рамке и кнопку, щелчок на которой очищает его.
- В новом мультфильме создадим два слоя с названиями Текст и Кнопка.
- В слое Кнопка разместим символ типа Button
(Кнопка) и прямоугольную рамку, которую нарисуем с помощью инструмента
Rectangle (Прямоугольник). Кнопку можно взять из встроенной библиотеки.
Для этого раскроем окно библиотеки (Window>common
Library) и выберем подходящую кнопку. Затем перетащим ее экземпляр
в рабочую область и выделим его. Щелкнув правой кнопкой мыши на экземпляре
кнопки, в раскрывшемся меню выберем команду Actions.
Перейдем в экспертный режим и введем следующий сценарий:
on (release) {
_root.mytext = "";
}
Здесь mytext — имя текстового поля, которое будет рассмотрено далее. Сценарий просто заменяет содержимое текстового поля пустой строкой. - Перейдем к слою Текст и с помощью инструмента
«Текст» нарисуем внутри рамки прямоугольник текстового поля. Выделим
это текстовое поле и на палитре Text Options
(если ее нет на экране, то выполните команду Window>Panels>Text
Options) на одноименной вкладке введем параметры:
- в раскрывающемся списке выберем тип поля Input Text (вводимый текст);
- в раскрывающемся списке ниже выберем значение Miltiline (Многострочный режим);
- установим флажок Word wrap (Перенос слов);
- введем значение в поле Max. chars (Максимальное количество символов); ноль означает, что редактирование и ввод текста запрещены;
- в поле Variable введем значение mytext (имя переменной, к которой обращается сценарий).
На следующем рисунке показаны рабочая область с текстовым полем и круглой кнопкой, а также окна библиотеки и Text Options.
Рис. 613. Текстовая область и кнопка на этапе разработки
На других вкладках палитры Text Options
можно задать шрифт, выравнивание и другие параметры.
4. Протестируем результаты нашей работы (команда
control>Test Movie). Установим в текстовом поле курсор и введем
какой-нибудь текст. Если щелкнуть на кнопке, то текст должен исчезнуть.
Наследующем рисунке показано то, что у нас должно было получиться.
Рис. 614. Мультфильм с текстовым
полем ввода и кнопкой для его очистки
Прокрутка текста
Если текст имеет большой объем, а текстовое поле не вмешает его полностью,
то применяется широко известный механизм прокрутки.
В данном примере мы возьмем за основу мультфильм, разработанный в предыдущем
разделе. Нам потребуется добавить две кнопки в виде стрелок и написать
сценарии для них. Щелчок на стрелке должен инициировать прокрутку текста
на заданное количество строк. Кроме того, здесь будет продемонстрирован
один интересный технологический прием. А именно: мы создадим еще одно
текстовое поле, расположенное вне рабочей области. Все элементы вне рабочей
области при просмотре мультфильма не видны, хотя в функциональном плане
они полноценны. В этом невидимом поле будет храниться некоторый текст.
Внешний вид сцены на этапе разработки выглядит так, как показано на рисунке.
Рабочая область имеет белый цвет фона.
Замысел мультфильма состоит в том, что при щелчке на круглой кнопке в
видимом текстовом поле появляется текст, хранящийся в невидимом поле.
Как создать текстовое поле и кнопку, мы рассмотрели в предыдущем разделе.
Поэтому останавливаться на этом здесь не будем, а сосредоточим внимание
на сценариях.
Рис. 615. Рабочая область с текстовым полем и кнопками имеет белый фон. Текстовое поле вне рабочей области не будет видно при воспроизведении мультфильма
Пусть видимое текстовое поле имеет имя mytext,
а имя невидимого текстового поля — storetext.
Круглая кнопка предназначена для переноса текста из
text2 в mytext. Сценарий для нее и
мест следующий вид.
on (release) _root.mytext{
root.storetext;
}
Кнопки в виде стрелок предназначены для прокрутки. Механизм прокрутки
основан на использовании свойства scroll, которое имеют все текстовые
поля. Для кнопки с изображением стрелки вверх сценарий такой:
оп (release) {
root.mytext.scroll = _root.mytext.scroll - 2;
}
Для кнопки с изображением стрелки вниз сценарий аналогичен:
on (release) {
root.mytext.scroll = _root.mytext.scroll + 2;
}
Мы установили шаг прокрутки равным 2.
Вид нашего мультфильма в окне браузера Internet Explorer показан на следующем
рисунке.
Рис. 616. Мультфильм с прокручиваемым текстовым полем
в окне браузера
Кроме свойства scroll текстовые поля обладают свойством maxscroll, значением
которого является общее количество строк. Это свойство только для чтения
можно использовать для установки пределов выполнения цикла при автоматической
прокрутке текста.
В качестве упражнения усовершенствуйте разработанный выше мультфильм так,
чтобы в одном текстовом поле можно было показывать тексты из различных
невидимых полей.
Загрузка переменных из текстового
файла
В системе Flash есть возможность загрузки переменных из текстовых файлов
и из приложений, таких как ASP, PHP, cGI, Gold Fussion и других систем
обработки сценариев на сервере. Если у вас есть тексты большого объема,
особенно если они написаны на кириллице, то данный технологический прием
оказывается очень полезным.
В следующем примере мы рассмотрим загрузку в мультфильм двух переменных,
определенных в текстовом файле. Прежде всего создадим текстовый файл.
Это можно сделать с помощью Блокнота Windows. При этом необходимо соблюдать
следующие требования:
- Каждая переменная записывается в формате:
имя_переменной = значение_переменной
- Если требуется определить несколько переменных, то между значением предыдущей переменной и именем последующей ставится символ амперсанд &. При этом между значением переменной и амперсандом не должно быть ни пробелов, ни символов перевода каретки.
Текстовый файл с определениями переменных сохраним в той же папке, что и SWF-файл, который будет к нему обращаться. В общем случае это необязательно: можно использовать полный URL-адрес. На рисунке показан текстовый файл textfile.txt в окне редактора Блокнот. Здесь был использован режим переноса слов, нигде символ перевода каретки (клавиша <Enter>) не применялся. В этом файле определены две переменные: mytextl и mytext2.
Рис. 617. Текстовый файл с определениями переменных
Мультфильм состоит из двух слоев. В первом слое расположены два текстовых
поля в рамках. Второй слой содержит кнопку. Текстовые поля имеют идентификаторы
(имена переменных) mytext l и mytext2. Именно эти переменные были определены
в текстовом файле textfile.txt. Текстовые поля определены в палитре
Text Options как Dynamic Text (Динамический
текст). Загрузка текстов в эти поля происходит при щелчке на кнопке. Это
событие обрабатывается следующим сценарием кнопки:
on (release) {
loadVariblesNum ("textile. txt ", 0)
}
Здесь второй параметр указывает номер уровня мультфильма, в который следует
загрузить переменные из текстового файла, указанного в первом параметре.
Значение 0 означает, что загрузка будет происходить в главный мультфильм
(в нашем примере он является единственным).
На следующих рисунках показан мультфильм соответственно на этапе разработки
и на этапе тестирования после щелчка на кнопке, т. е. после загрузки переменных
из текстового файла в текстовые поля.
Рис. 618. Мультфильм с текстовыми полями и кнопкой на стадии разработки
Рис. 619. Мультфильм после загрузки переменных в текстовые поля
В рассмотренном примере загрузка переменных производилась посредством сценария кнопки. Однако это можно делать и другими способами. Например, можно сценарии загрузки привязывать к кадрам. Следует заметить, что для корректной работы мультфильма желательно включать в мультфильм кадры, в которых проверяется успешность загрузки переменных. Например, если вы хотите загрузить переменную с именем mytext, то следует создать кадр, в котором будет выполняться такой сценарий:
mytext = String (mytext );
if (mytext . length == 0) {
( gotoAndPlay (1)
}
Этот сценарий циклически воспроизводит кадры мультфильма, пока значение указанной переменной (точнее, длина значения) не станет отличным от нуля.
В следующем примере мы сделаем мультфильм с тремя кнопками. При щелчке
кнопкой мыши на любой кнопке плавно появляется некоторый текст. Если щелкнуть
на другой кнопке, то этот текст постепенно исчезает и на его месте появляется
другой текст.
Особенность состоит в том, что у нас три кнопки, и поведение каждой из
них зависит от того, с какой именно кнопкой мы работали ранее. Эта задача
решается с использованием переменных для хранения предшествующих состояний.
В мультфильме будут фигурировать кнопки и тексты. Тексты обладают собственным
поведением, хотя и зависящим от действий с кнопками. Создадим три слоя.
Первый слой назовем action (действие), второй
— buttons (кнопки) и третий — texts
(тексты). В слой buttons поместим три кнопки с именами bul1,
but2 и but3 (выбор имен может быть
произвольным). Точнее говоря, создадим три символа типа Button. Это можно
сделать вручную или воспользоваться встроенной библиотекой (Window>
common Libraries > Buttons). Затем создадим три символа типа
Movie clip с именами text1,
text2 и texts и поместим в них наши тексты, например «Один», «Два»
и «Три». К каждому тексту применим анимацию motion tweening так, чтобы
он плавно появлялся и так же плавно исчезал (выберите подходящие значения
параметра alpha). При этом ключевые кадры
расположим так, как показано на рисунке.
Рис. 620. Временная шкала
На рисунке видно, что к ключевым кадрам привязаны какие-то действия (пометки
над точками). Мы рассмотрим их позднее.
В первом кадре каждого мультфильма-текста собственно текст должен быть
невидим (значение параметра прозрачности alpha
равно 0). Когда все тексты будут готовы, поместим их на сцену.
Теперь, когда вся графическая часть готова, займёмся составлением сценариев.
На сцене в слое actions поместим следующее
действие:
i = 0;
j = 0;
Здесь мы объявляем переменные и присваиваем им начальные значения. Переменная
j будет хранить номер последней нажатой кнопки, а переменная i — текущий
номер кнопки. Теперь переходим к действиям, происходящим при нажатии кнопок.
Сценарий для первой кнопки:
on (release) {
if (3 == 2) {
}
text2.gotoAndPlay (16) ; }
}
else if (j == 3) {
text3.gotoAndPlay(16);
}
else if (j == 0) {
textl.gotoAndPlay(1) ;
}
i = 0;
j = 0;
}
Здесь, в зависимости от значения переменной j, назначается «исчезновение»
соответствующего текста. Чтобы с самого начала проявить текст данной кнопки,
делаем проверку, равно ли значение переменной j нулю. Затем передаём переменным
i и j новые значения. На остальных кнопках действия будут аналогичными.
Сценарий для второй кнопки:
on (release) {
if (j •=- 3) {
text3.gotoAndPlay (16); } else if (j == 1) {
textl.gotoAndPlay(16);
} else if (j == 0) {
text2.gotoAndPlay (1);
}
i = 2;
j = 2; }
Сценарий для третьей кнопки:
on (release) {
if (j == 0) {
text3.gotoAndPlay(1);
I else if (j == 1) (
text 1.gotoAndPlay(16) ;
iпава 9
else it" (j == 2) {
text 2.gotoAndPlay(16)
}
else if (j == 2) {
text2.gotoAndPlay (16);
}
i = 3;
j = 3; }
Но эти действия лишь делают тексты невидимыми, а нам нужно ещё и последующее
их появление. Переходим к редактированию символов текста. Сценарий для
первого кадра символа textl:
stop ();
_root.i = 1;
Это предотвратит произвольное проигрывание мультфильма и присвоит значение
переменной i.
В 15-м кадре также поставим функцию останова (т. е. stop()) для того,
чтобы текст останавливался, когда полностью исчезнет. Теперь нужно дать
программе знать, какой текст делать видимым после исчезновения текущего
текста. Для этого в последнем кадре символа text1 поставим такой сценарий:
if (_root.i == 2) (
_root.text2.gotoAndPlay (1);
} else if (_root.i == 3) (
_root.text3.gotoAndPlay(1);
}
Здесь проверяется текущее значение переменной i и в зависимости от результатов
проигрывается соответствующий символ. Для остальных символов действия
будут аналогичными, изменятся только имена символов. Общим будет только
action stop() для 15-го кадра каждого символа. Вот остальные действия.
Для первого кадра символа text2:
stop ();
_root.i = 2;
Для последнего кадра символа text2:
if (_root.i == 1) {
( _root.textl.gotoAndPlay(1);
}
else if (__root.i == 3) {
_root.text3.gotoAndPlay(1);
}
Для первого кадра символа text3:
stop ();
_root.i = 2;
Для последнего кадра символа text3:
if (_root.i == 1)
( _root.textl.gotoAndPlay(1); Т
}
else if (_root.i == 2) {
root.text2.gotoAndPlay(1);
}
Вот, собственно, и все. Попробуйте проиграть мультфильм, а затем внести
в него какие-нибудь изменения.
Генератор случайных чисел
Функция random (n) создает случайное число
в интервале от 0 до n—1. Например, random(lOl) возвращает случайное число
в диапазоне от 0 до 100.
Генератор случайных чисел обычно применяется тогда, когда необходимо внести
в мультфильм непредсказуемое разнообразие. Например, вам требуется заполнить
рабочую область случайно выбранными элементами, или чтобы какой-нибудь
элемент произвольно перемещался в заданных пределах рабочей области. Наиболее
часто генератор случайных чисел используется в играх. Например, вам может
понадобиться, чтобы «сторож» патрулировал в заданной области около склада,
или чтобы «ракеты» бомбили случайно выбранные точки театра военных действий.
Следующий простой сценарий перемещает экземпляр мультфильма с именем My_clip
в пределах
квадрата со стороной 300 пикселов:
My_clip._x = random(300);
My_clip._y = random(300);
Броуновское движение объекта My_clip можно задать, если циклически выполнять
следующий сценарий:
dx = random(5);
dy = random(5);
My_clip._x = My_clip._x + dx;
My_clip._y = My_clip._y +dy;
Гистограмма
Для наглядного представления числовых данных часто используют гистограммы
— диаграммы в виде ряда столбиков, высота которых пропорциональна соответствующим
числам. Здесь мы рассмотрим пример построения небольшой гистограммы из
пяти столбиков. Данные будут вводиться в текстовые поля, а перерисовка
гистограммы будет происходить при щелчке на кнопке.
Создадим новый мультфильм, в котором разместим четыре слоя с именами:
Столбики, Тексты, Кнопка и Фон.
В слое Фон нарисуем прямоугольник, занимающий
нею рабочую область, и зальем его серым цветом. Затем в слое Тексты создадим
пять текстовых полей, задав для них имена Т1, Т2.....Т5
(палитра Text Options,
поле Variables). Эти поля следует расположить
в один ряд на линии с значением координаты у равным 310 (пикселов).
Выделим на временной шкале слой Столбики и
создадим новый символ типа Movie clip с именем
bar (столбик). Для этого надо выполнить команду
Insert>Ne\v Symbol.
Нарисуем прямоугольник шириной 40 и высотой 1 пиксел. Внешне такой прямоугольник
похож на горизонтальный отрезок прямой. Для точного задания этих параметров
следует воспользоваться палитрой Info. Щелкнув
на кнопке Scene 1 в верхнем левом углу главного
окна Flash, переходим к работе с главным мультфильмом.
Теперь перетащим мышью 5 экземпляров только что созданного символа из
окна библиотеки в рабочую область. Расположим их в один ряд немного выше
текстовых полей, как показано на следующем рисунке.
Рис. 621. Разработка гистограммы. Линии представляют столбики, ниже расположены текстовые поля, правее — кнопка
Говоря точнее, необходимо установить для всех экземпляров символа
bar значение вертикальной координаты у равным 300 пикселов. Это
можно сделать с по-мошью палитры Info: выделите
экземпляр и введите требуемое значение.
Для каждого экземпляра столбика необходимо ввести имя. Именем будет просто
порядковый номер. Поочередно выделяя столбики, введем числа от 1 до 5
в поле Name на палитре
Instance (Экземпляр).
В слое Кнопка размещается кнопка, для которой
следует задать сценарий. Сценарий должен получить значения, введенные
пользователем в текстовые поля, и соответственно изменить высоту столбиков.
Высота столбика есть введенное пользователем число, умноженное на масштабирующий
коэффициент. Дело в том, что она не может быть больше 300 пикселов (столбики
высотой 1 пиксел для нулевых данных располагаются на линии
у = 300 (пикселов).
Итак, сценарий для кнопки имеет следующий вид:
on (release) {
// Начальные значения переменных
х = 0;
п = 0;
1 = 0;
value = 0;
К = 0; // масштабирующий коэффициент
maximum = 0;
// Установка начальной высоты и позиции всех столбиков
while (х <= 4) {
х+= 1;
_root[x]._yscale = 100;
_root[х]._у = 300;
}
// Определение максимального значения,
// введенного пользователем
while (n <= 4) {
п+= 1;
if (_root["T" + n] > maximum) (
maximum = _root["T" + n];
}
// Определение высоты столбика
К = 300/maximum; // масштабирующий коэффициент
while (i <= 4) {
i+ = 1;
value = _root["T" + i] * K;
_root[d]._yscale = value * 100;
_root[d]._y = 300 - value;
}
}
Поясним определение высоты столбика. Мы использовали свойство _yscale,
возвращающее относительную высоту (масштаб) мультфильма (т. к. столбик
у нас имеет тип Movie clip) в процентах. Одному
пикселу соответствует 100%, поэтому величине value (в пикселах) соответствует
_yscale, ранное value* 100. Изменив высоту столбика, следует изменить
и его вертикальную координату _у, задаваемую и пикселах. Чем выше столбик,
тем меньше _у и, наоборот, чем меньше высота столбика, тем ниже он должен
позиционироваться. Поскольку максимальная высота столбика равна 300 пикселов,
_у = 300 - value. Текстовые поля с именами Т1,..., Т5 обрабатываются циклически
с помощью так называемого псевдомассива _root ["T" + i]. Параметр,
означающий имя текстового поля, получается путем конкатенации (склейки)
буквы "Т" с параметром цикла \.
Заметим, что конструкция псевдомассива _root ["T" + i] применяется
вместо использовавшейся в Flash 4 функции eval. В данном случае можно
было бы использовать выражение вида eval( "/:T"&i).
Рассмотренный выше сценарий можно немного модифицировать, сделав его более
понятным, а функционально эквивалентным. А именно: заменим часть, связанную
с определением высоты столбика, на следующую:
// Определение высоты столбика
К = ЗОО/maximum; // масштабирующий коэффициент while (i <= 4) { d+
= 1;
value = _root["T" -f i ] * K;
_root[d]._height = value;
root[d]. у = 300 - value;
Здесь мы вместо свойства _yscale использовали свойство _height, значением которого является абсолютная высота столбика, выраженная в пикселах. Ниже показан внешний вид мультфильма.
Рис. 622. Гистограмма, построенная на основе
введенных пользователем данных
При разработке гистограмм в слое Фон вы можете
нарисовать оси координат и/или масштабную сетку, раскрасить столбики в
различные цвета и т. п. Данные для построения гистограммы можно брать
не только из текстовых полей в этом же
мультфильме, но и из полей, расположенных в каком-нибудь другом мультфильме
или даже из другого приложения. Например, данные могут вводиться в форму
HTML-документа и передаваться в мультфильм, отображающий гистограмму (см.
раздел «Передача данных из Jscript в ActionScript» данной главы).
Кроме гистограмм, можно рисовать графики в виде кривых. Такая кривая линия
состоит из прямых отрезков и строится на основе двух массивов данных.
Первый массив — числа, откладываемые по горизонтальной оси координат,
а второй — числа, откладываемые по вертикальной оси координат.
Рассмотрим создание мультфильма, в котором содержится клип, представляющий
собой вращающееся колесо. Сначала мы сделаем колесо, затем автомобиль
с экземплярами этого колеса, а затем построим сцену, содержащую несколько
автомобилей.
Создадим новый символ типа Movie clip и назовем
его Колесо. В режиме редактирования символа
нарисуем две концентрических окружности. Внешнюю окружность зальем радиальным
градиентом, а внутреннюю — линейным. С помощью инструмента «Кисть» нарисуем
несколько пятнышек на внутренней окружности. Должно получиться примерно
так, как показано на рисунке. Более подробно рисование колеса было рассмотрено
в предыдущей главе. Далее, вставим еще один кадр (команда Insert>Frame
или клавиша <F5>). В первом, ключевом кадре определим следующий
сценарий:
_rotation = _rotation - 10;
Это означает, что значение свойства _rotation (вращение) следует изменять
на 10 градусов, причем вращение должно происходить против часовой стрелки
(т. к. приращение значения отрицательно). Выбор направления вращения обусловлен
тем простым обстоятельством, что в заготовленной картинке автомобиль «смотрит»
налево. Следует заметить, однако, что задание вращения колеса против часовой
стрелки еще не означает, что именно такое вращение мы будем видеть при
воспроизведении мультфильма. Соотношение частоты пятен на диске колеса
и частоты следования кадров может создать эффект противоположного вращения
и/или вращения не с той скоростью, на которую мы расчитывали, задавая
угол поворота. В этом случае придется подобрать величину угла поворота
экспериментально.
Обратите внимание, что колесо у нас сделано как картинка, вращаемая сценарием.
Можно было бы поступить и более расточительно: создать 36 кадров, каждый
из которых содержал бы колесо, повернутое относительно предыдущего кадра
на 10 градусов. В таком случае все приходится делать вручную. Другой способ
заключается в том, чтобы использовать анимационный GIF-файл (см. главу
3), содержащий вращающееся изображение колеса.
Далее, перейдем к сцене (щелчок на кнопке Scene 1).
Импортируем графический файл с изображением автомобиля. Желательно, чтобы
это была картинка с прозрачным фоном.
Рис. 623. Создание символа Колесо из двух концентрических
кругов, залитых градиентами различных типов. Два кадра в клипе Колесо
нам потребовались, чтобы обеспечить цикличность выполнения сценария
Теперь перетащим из окна библиотеки два экземпляра колеса для создаваемого мультфильма. Их следует установить в нужные места нд изображении автомобиля и выбрать подходящий масштаб. Чтобы выбрать масштаб, щелкните правой кнопкой мыши на выделенном экземпляре колеса и в контекстном меню выберите команду Scale.
Рис. 624. Масштабирование колеса для его встраивания в изображение автомобиля
Выделим изображение автомобиля вместе с двумя экземплярами колеса и конвертируем в символ типа Movie clip. Назовем этот новый символ Автомобиль.
Рис. 625. Изображение автомобиля с вращающимися колесами
конвертируем в символ типа Movie clip
Очистим сцену и перетащим на нее экземпляр символа Автомобиль. Поскольку наш автомобиль ориентирован капотом влево, то расположить его нужно где-нибудь в правой части сцены. Далее делаем анимацию. Выделим какой-нибудь кадр, например, 40-й и сделаем его ключевым. Переместим автомобиль в левую часть сцены. Затем вернемся в 1-й кадр и выполним команду Insert>create Motion Tween. На следующем рисунке показано, что должно получиться. Чтобы передать эффект движения, мы включили режим отбражения тени (Onion Scin).
Рис. 626. Движение автомобиля с вращающимися
колесами
Чтобы автомобиль остановился у левого края сцены, в последнем кадре
мультфильма определите сценарий из одной инструкции: stop().
Итак, мы создали мультфильм с движущимся автомобилем, у которого вращаются
колеса. Однако должны предупредить вас о возможной неприятности. Дело
в том, что скорость вращения колес и скорость поступательного движения
автомобиля могут оказаться не согласованными. При согласованности скоростей
за время полного оборота колеса автомобиль должен переместиться на расстояние,
равное длине внешней окружности колеса. Напомним, что длина окружности
диаметра D равна приблизительно 3,14D. Если вы не хотите заниматься расчетами
и измерениями, то придется поэкспериментировать. С учетом необходимости
согласования частоты пятен (или спиц, если колесо велосипедное) на колесе
с частотой кадров, о чем мы писали выше, получается, что анимация простого
колеса является не совсем тривиальной задачей.
Теперь несколько усложним наш мультфильм, используя простые средства.
А именно: добавим еще один экземпляр автомобиля. Мы хотим, чтобы второй
автомобиль «ехал» слева направо. Для этого сначала создадим еше один слой
в главном мультфильме (на сцене) и перетащим Автомобиль из библиотеки.
Разместим его где-нибудь в левой части сцены и немного ниже первого автомобиля,
который «ездит» в первом слое. Второй автомобиль должен ехать слева направо,
а его экземпляр на сцене сейчас ориентирован, как первый (наоборот). Положение
можно исправить с помощью инструментов масштабирования и вращения. Чтобы
получить доступ к этим инструментам, выделите автомобиль и щелкните правой
кнопкой мыши для раскрытия контекстного меню. Поэкспериментируйте, чтобы
получить нужный эффект. Стремитесь к тому, чтобы перевернуть изображение.
Мы не будем далее об этом рассказывать, поскольку слова в данном случае
малоэффективны по сравнению с опытом, который вы можете получить самостоятельно
за пару минут. Как только ваш второй автомобиль приобретет нужные размеры
и ориентацию, можете создать анимацию для него (Motion
Tweening) так же, как это делалось для первого автомобиля. Обратим
внимание, что если мы специально занимались переориентацией экземпляра
символа Автомобиль, то изменять направление
вращения колес нам не потребовалось: все совершилось, как надо, само собой.
Рис. 627. Два автомобиля,
движущиеся в противоположных направлениях. Каждый автомобиль «существует»
в своем слое
Что можно сделать еще? Конечно, можно создать еще один слой, выполняющий
роль ландшафта (фона). В этот слой можно поместить природный или городской
вид. В общем, это — дело вкуса и вашей фантазии.
Чему учит данный пример? Прежде всего, созданию сложного мультфильма из
более простых клипов. Как только при работе над сложным проектом вы создали
нечто, задумайтесь, а не конвертировать ли его в символ. Символ попадет
в библиотеку и вы сможете в дальнейшем его использовать как в этом проекте,
так и в других. Редактируя символ, вы тем самым редактируете и его экземпляры.
Вызов JScript из ActionScript
Здесь мы рассмотрим пример взаимодействия фрагментов сценария на JScript
с Flash-мультфильмом. Мы хотим использовать средства JScript во Flash-мультфильме.
Фрагменты сценария (функции) на JScript и мультфильм встроены водим и
тот же HTML-документ. В нашем примере мультфильм содержит три кнопки,
щелчки на которых обрабатываются функциями, написанными на JScript. Заметьте,
речь идет об обработке событий не с помощью ActionScript, а посредством
JScript! Сценарий на ActionScript должен только вызвать нужную функцию
JScript. Идея организации такого взаимодействия состоит в том, чтобы в
действиях Flash-мультфильма использовать следующую конструкцию:
getURL ("javascript :имя_функции (параметры)
" ) ,
где имя_функции(параметры) — функция, описанная в скрипте в HTML-документе
на языке JScript.
Всю работу разобьем на два этапа: сначала создадим HTML-код, а затем мультфильм.
Этап 1. Создание HTML-файла
Порядок действий:
- Создадим новый HTML-файл с именем myhtml.htm.
- В этом файле между тэгами <HEAD> и </HEAD> напишем три функции, которые потом будем вызывать из Flash-мультфильма и передавать им некоторые параметры. Эти функции обрамим тэгами <ScRIPT> и </ScRIPT>.
Итак, сценарий на JScript в HTML- документе выглядит следующим образом:
<ScRIPT LANGUAGE=" JScript">
// Первая функция принимает 3 параметра
function openNewWindow (my URL, my_width, my_height)
{
// Это — функция открытия окна.
// my_width - переменная, которая будет передавать /принимать
// значение ширины,
// my_height - переменная, которая будет передавать/принимать
// значение высоты. Ниже расположен код самой функции.
myNewWindow=window . open (myURL, ' sample ' , ' toolbar=no, bar=no, location=no,
status=no,menubar=no, scrollbars=no, resizable=no,width=' +my_width+ '
,
height=' -fmy_height+ ' , top=0, lef t=0 ' ) ;
// Параметры в методе ореп() :
// myNewWindow - имя нового окна в иерархии,
// myURL - URL-адрес открываемого нового документа,
// остальные параметры отвечают за отсутствие/присутствие
// элементов интерфейса в новом окне (панели инструментов, меню
/ / и т.д.),
// width= ' +my_width+ ' - параметр, отвечающий за ширину, // height=
' -mny height-*-' - параметр, отвечающий за высоту.
// Вторая функция - это просто окно с предупреждением,
// которое мы передадим из Flash-мультфильма.
function message (message) {
alert (message) ;
}
// Здесь message - передаваемое сообщение.
// Третья функция закрывает окно, открытое первой функцией. // Обращение
к окну - по имени myNewWindow. function closeMain(){ myNewWindow . close
( ) ;
</ScRIPT>
Между тэгами <BODY> и </BODY> вставим тэг <OBJEcT>,
задающий встраивание Flash-проигрывателя с нашим мультфильмом. Мультфильм
мы будем хранить в файле myflash.swf. В результате должен получиться следующий
HTML-код:
<HTML>
<HEADXTITLE> Взаимодействие Flash и JScript</TITLE>
<ScRIPT LANGUAGE="JScript">
<!== Функция открытия окна ==>
function openNewWindow(myURL,my_width,my_height)
myNewWindow=window.open (myURL, ' sample' , ' toolbar=no,bar=no, location=no,
status=no, menubar=no, scrollbars=no, resizable=no, width= ' +my_width+
' , height= ' +my_height+ ' , top=0, left=0 ' ) ;
< ! == Функция вывода сообщения ==> function Message (message) (
alert (message) ;
/ }
<!== Функция закрытия окна ==>
function closeMain()(
myNewWindow . close () ;
}
</ScRIPT>
</HEAD>
<BODY bgcolor="#000033">
<!- Вставляем Flash-мультфильм—>
<A HREF=javascript:openNewWindow('temp.html',600,200)></A>
<OBJEcT classid="clsid:D27cDB6E-AE6D-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shoekwave/cabs/flash/
swmyflash.cabttversion=5, 0,0,0" WIDTH=400 HEIGHT=300>
<PARAM NAME=movie VALUE="myflash.swf">
<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000033>
<EMBED src="myflash.swf" quality=high bgcolor=#000033 WIDTH=400
HEIGHT=300 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http:/
/www.macromedia.com/shockwave/download/ index.cgi?Pl_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJEcT>
</BODY>
</HTML>
Этап 2. Создание Flash-мультфильма
Порядок действий:
- В редакторе Flash создадим новый файл myflash.fla.
- Создадим три произвольные кнопки. Для этого нарисуем произвольную фигуру, нажав клавишу <F8> (конвертировать в символ), выберем тип символа Button и затем просто скопируем его в рабочую область три раза. Можно также воспользоваться библиотекой символов (Window>common Libraries > Buttons).
- Последовательно вставляем в каждую из кнопок следующие действия:
- Кнопка1 (открытие файла temp.htm в новом окне):
on (release) {
getURL("javascript:openNewWindow('temp.html1,600,200)")
} - Кнопка2 (вывод сообщения):
on (release) {
getURL("javascript:message('Мое сообщение')");
}
- КнопкаЗ (закрытие окна):
on (release) {
getURL("javascript:closeMain()");
}
- Кнопка1 (открытие файла temp.htm в новом окне):
- Делаем публикацию (клавиши <F12> или <Shift>+<F12>), чтобы получить файл myflash.swf. Что такое публикация, более подробно рассказано в разделе 9.8. На этом работа завершена.
Передача данных из JScript в ActionScript
Рассмотрим передачу данных из HTML-документа во встроенный в него Flash-мультфильм
(SWF-файл). Это позволит, например, управлять мультфильмом средствами
HTML и JScript. Данная задача противоположна той, которую мы рассмотрели
в предыдущем разделе. Там мы из сценариев на ActionScript вызывали фуниии.
написанные на JSscript. Здесь же, наоборот, вся основная работа выполняется
сценариями на ActionScript, а сценарий на JScript лишь передает в мультфильм
какие-то данные. Эти данные могут просто отображаться каким-то образом
в мультфильме, а могут и управлять им.
Напомним, что внедрение Flash-мультфильма в HTML-документ производится
с помощью тэгов <OBJEcT> и <EMBED>. В языке JScript имеется
метод 5е1\/апаЫе("имя_переменной", значение_переменной), принимающий
два параметра: имя переменной в Flash-мультфильме и значение этой переменной.
Данный метод используется в следующем формате:
window.document.имя_мультфильма.SetVariable("имя_переменной",
значение_переменной)
Здесь имя_мультф ильма — имя мультфильма, заданное в тэгах <OBJEcT>
и <EMBED> в атрибуте NAME. Ниже мы еще рассмотрим это более подробно.
В следующем примере мы создадим простой Flash-мультфильм с текстовым полем
и кнопкой. Текстовое поле будет отображать сообщение, переданное мультфильму
из сценария на JScript, а кнопка — очищать это поле. Создадим сначала
два слоя с именами Border_Button (т. е. Рамка_Кнопка)
и Text_Field (т. е. Текстовое_Поле).
В слое Border_Button нарисуем обычную круглую
кнопку, выделим ее и нажмем клавишу <F8> (конвертировать в символ).
Назначим символу тип Button и имя — clear (Очистить). С помощью кнопки
будет удаляться содержимое текстового поля. Для этой цели нужен следующий
сценарий на ActionScript:
on(release) {
_root.inFlash = ""; )
}
Здесь inFlash — имя переменной (идентификатор),
соответствующий текстовому полю. Понятно, что мы выбрали ее по своему
усмотрению.
В слое Text_Field находится текстовое поле
в рамке. Установим в окне его свойств (Text Options)
тип Input Text, режим автоматического
переноса слов (Word wrap) многострочного текста
(Multiline) и запрет на редактирование (Max chars
= 0 ). В поле Variable должно быть значение inFlash.
Это — имя переменной, соответствующей текстовому полю. Именно эта переменная
фигурирует в сценарии, привязанном к кнопке clear
(Очистить). Можно также задать параметры шрифта (вкладка character
палитры Text Options).
Итак, мультфильм готов. Сохраним его под именем flashvar.fla. Сделаем
публикацию, в результате которой получим два файла: flashvar.swf и flashvar.htm.
Откроем HTML-файл, созданный системой Flash при публикации. Внесем в него
изменения, так чтобы HTML-код имел следующий вид:
Рис. 628. Создание мультфильма с текстовым
полем и кнопкой
<HTML>
<HEAD>
<ТIТLЕ>Передача данных из JScript во Flash</TITLE>
<ScRIPT LANGUAGE="JScript">
function getlt()
{
var message=document.main.input_text.value
window.document.passFlash.SetVariable("inFlash", message)
// здесь main - имя формы,
// input_text - имя поля ввода текста в форме,
// inFlash - имя текстового поля в ActionScript
}
</ScRIPT>
</HEAD>
I
<!== Flash-мультфильм ==>
<BODY bgcolor="#FFFFFF">
<!== URL's used in the movie ==>
<OBJEcT classid="clsid:D27cDB6E-AE6D-llcf-96B8-444553540000"
соdebase=http://download.macromedia.com/pub/Shockwave/cabs/flash/
swflash.cab#version=5,О,О,О ID=flashvar WIDTH=500 HEIGHT=150
NAME='passFlash'>
<PARAM NAME=movie VALUE="flashvar . swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="flashvar.swf" quality=high bgcolor=#FFFFFF WIDTH=500
HEIGHT=150 NAME="passFlash"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://
www.macromedia.com/Shockwave/download/ index.cgi?Pl_Prod_Version=ShockwaveFlash">
153ак, 757
450
</EMBED> </OBJEcT>
<FORM NAME="main">
<! Текстовое поле >
<INPUT TYPE="text" NAME="input_text" LENGTH=14>
<! Кнопка >
<INPUT TYPE="button" value = "Ha;KMM здесь" ONcLIcK="getIt()">
</FORM>
</BODY>
</HTML>
Обратите внимание, что в тэгах<ОВJЕСТ> и <EMBED> задаются
имя файла с мультфильмом flashvar.swf и имя passFlash объекта, представляющего
мультфильм в HTML-документе. Имя passFlash используется в сценарии на
JScript.
Текст, вводимый в поле формы HTML-документа, появляется в текстовом поле
Flash-мультфильма, если щелкнуть на кнопке с надписью «Нажми здесь». При
этом шрифт текста будет таким, каким он был определен в мультфильме. Это
показано на следующем рисунке.
Рис. 629. Внешний вид страницы в браузере.
Поле ввода и кнопка внизу являются элементами формы HTML-документа, а
все остальное — Flash-мультфильм
Управление звуком
На некоторых сайтах, созданных на основе Flash-технологии, имеется возможность
управления звуком. Например, звук можно выключить в процессе проигрывания
мультфильма, изменить громкость, а на некоторых сайтах можно даже регулировать
звуковой баланс. Сначала рассмотрим общие сведения, а затем перейдем к
примеру.
Объект Sound
Для работы со звуком достаточно воспользоваться объектом класса Sound
(Звук) и его методами. Сначала определяется объект с помощью следующей
конструкции:
Mysound =new Sound О;
Здесь Mysound — имя, назначаемое объекту
класса Sound. Теперь можно управлять звуком, присоединяя через точку к
имени объекта имена методов и указывая
необходимые параметры. Ниже перечислены основные методы объекта Sound:
- attachSound ("имя_звука") —присоединяет к мультфильму звуковой файл из библиотеки;
- getPan () — возвращает последнее значение баланса в интервале от -100 до 100. Левому динамику соответствует отрицательное значение, правому — положительное. Значение 0 представляет равномерное распределение силы звука междудинамиками;
- getVolume ()— возвращает уровень громкости в интервале от 0 до 100;
- setPan () — устанавливает баланс между левым и правым динамиком. Значения от -100 до -1 соответствуют большей громкости левого динамика, а от 1 до 100 — правого;
- setVolume () — устанавливает громкость в интервале от 0 до 100. Значением по умолчанию является 100;
- start (задержка, количество_повторений) — начинает воспроизведение звукового файла.Необязательные параметры позволяют задать время задержки в секундах и количество повторений воспроизведения;
- stop () — приостанавливает воспроизведение звукового файла. Параметров нет;
Кроме перечисленных выше, имеется еще один метод объекта Sound — setTransform. Синтаксис его использования другой. Для вызова метода setTransform необходимо указать объект класса Object, связанный с параметрами управления динамиками. После этого создается объект класса Sound, который будет обрабатывать значения этих параметров с помощью метода setTransform. Параметры, о которых идет речь, определяют уровень входного сигнала в процентах (в интервале от-100 до 100):
- l l—уровень воспроизведения в левом динамике сигнала, поступающего с левого входа;
- 1 r— уровень воспроизведения в левом
динамике сигнала, поступающего с
правого входа; - r r — уровень воспроизведения в правом
динамике сигнала, поступающего
с правого входа; - r l— уровень воспроизведения в правом динамике сигнала, поступающего c левого входа.
По умолчанию параметры ll и rr имеют значение 100, а параметры 1r и
rl — значение 0. процедура настройки параметров звука с помощью метода
setTransform выглядит следующим образом:
Mytransform = ne Object () ;
Mytransform.il = 100;
Mytransform.Ir = 0;
Mytransform.rr = 100;
Mytransform.rl = 0;
MySound = new Sound ();
MySound.setTransform (Mytransform};
Задавая другие комбинации параметров звука, можно получать интересные
эффекты.
Пример элемента управления звуком
Теперь рассмотрим пример создания элемента управления звуком. В новом
мультфильме определим три слоя. Первый, самый верхний, назовем action,
второй — volume и третий — pan.
У нас должно получиться, как показано на рисунке:
Рис. 630. Создание слоев
action, volume и pan в мультфильме
В слой action поместим такое действие:
zvuk = new Sound();
zvuk.attachSound("zvuk" ) ;
zvuk.start(0, 999999);
Этим создаётся новый звуковой объект. Присоединяем его из библиотеки с именем zvuk и запускаем с позиции 0, устанавливая количество повторений 99 999 раз (т. е. практически бесконечно). Если сейчас запустить мультфильм, то мы ничего не увидим и не услышим. Чтобы что-нибудь услышать, надо дать звуку имя. Для этого откроем библиотеку и найдем в ней наш звуковой символ. Неважно, как он там сейчас называется. Чтобы назвать звук, следует щелкнуть на его имени правой кнопкой мыши и в контекстном меню выбрать команду Linkage (). В раскрывшемся окне выберем переключатель Export this symbol и зададим имя zvuk. Иначе говоря, сделаем так, как показано на рисунке:
Рис. 631. Окно Symbol Linkage Properties. Ввод
имени 'вука (Identifier) и установки типа связи (Linkage)
Теперь при просмотре мультфильма можно услышать звук.
На данном этапе осталось только организовать управление нашим звуком.
Для решения этой задачи существует множество способов. Мы реализуем самый
распространенный: метод ползунка.
Создадим новый символ-кнопку и назовем её polzunok_volume.
Она будет выполнять роль регулятора громкости. Далее, создадим ещё один
символ типа Movie clip с названием Polzunok_Mc_volume.
Поместим в него из библиотеки символ polzunok_volume
и зададим ему такое действие:
on (press) {
startDrag (this, false, 0, 7, 100, 7);}
on (release) {
stopDrag ();
Затем создадим символ типа Movie ciip и назовем
его shkala_volume. В этом символе нарисуем
прямоугольник, по которому будет передвигаться ползунок. Для правильной
работы зададим для него координаты в палитре Info,
как показано на рисунке:
Рис. 632. Задание координат и размеров шкалы
громкости звука
Теперь создадим в этом символе новый слой и поместим туда polzunok_Mc_volume.
Слой с ползунком должен быть выше слоя со шкалой. Поставим ползунок в
центре шкалы и назначим ему такое действие:
onclipEvent (enterFrame) {
root.zvuk.setVolume(this. x) ;
Этим мы добьёмся того, что звук будет иметь значение, соответствующее
координате х ползунка. Теперь переходим на
главную сцену и вставляем туда символ shkala_volume.
Вот мы и создали элемент управления громкостью звука.
Теперь организуем балансировку звука между левым и правым динамиками.
Для этого создадим символ-кнопку с названием polzunok_pan
и нарисуем там ползунок, затем создадим символ типа Movie
clip с именем polzunok_Mc_pan поместим
туда наш polzunok_pan. Зададим ему действие:
on (press) {
startDrag (this, false, on (release) { stopDrag ();
-100, 0, 100, 0) ;
}
Теперь создадим ещё один символ типа Movie clip
с именем shkala_pan. Нарисуем там нашу шкалу
в виде прямоугольника с параметрами, как показано на рисунке:
Рис. 633. Задание координат и размеров шкалы балансировки звука
В этом же символе создадим ещё один слой и поместим его выше текущего. В этом слое расположим ползунок polzunok_Mc_pan и зададим для него следующее действие:
onclipEvent (enterFrame)
( root.zvuk.setPan(this. x) ;
Теперь переходим на главную сцену и вставляем в неё шкалу балансировки
звука shkala_pan. Посмотрите мультфильм и
попробуйте изменить положение ползунков. Если ошибок нет, то всё будет
работать.
Однако у нас нет цифрового отображения громкости и баланса звука. Давайте
разработаем и такой сервис. На главную сцену вставим два динамических
текстовых поля. Одно для отображения громкости, другое —для баланса. Назовем
их vol и pan соответственно.
Сначала займёмся полем vol.
Выделим символ shkala_volume и откроем палитру
Action для нашего ползунка. Добавим к уже
имеющемуся следующий код:
s = new Sound(zvuk);
_root.vol = s.getVolume();
Таким образом, у нас должно получиться следующее:
onclipEvent (enterFrame) {
в Flash
root . zvuk . set Volume (this. _x) ; ^ = new Sound (zvuk) ; root.vol
= s . getVolume ( ) ;
}
Теперь пользователь может видеть цифровое значение громкости звука. Займемся
организацией цифрового отображения баланса. Для этого перейдем к символу
shkala_pan и добавим к его действиям следующий
код:
s = new Sound (zvuk) ;
root. pan = s. getPan (); В результате должно получиться: onclipEvent
(enterFrame) {
root. zvuk. set Pan (this -_x) ; s = new Sound(zvuk);
root. pan = s.getPan(); }
Теперь пользователь получает сведения относительно баланса звука. Однако
когда ползунок переходит на левую часть шкалы, мы видим отрицательные
числа. Обычно в подобных программах отображаются положительные числа и
буква «L» или «R». Давайте попробуем сделать так же. Для этого в символе
shkala_pan в палитре Actions
для ползунка немного изменим существующий код. После замены должно
получиться:
onclipEvent (enterFrame) ( _root . zvuk . setPan (this ._x) ; s = new
Sound (zvuk) ;
if (this._x<0) (
_root.pan = - (s .getPan () ) +"Left" ; } else if (this._x>0)
{ _root.pan = s . getPan () +"Right" ; } else if (this._x =
= 0) ( _root.pan = s. getPan ();
Здесь мы поставили условие, что если значение координаты х ползунка меньше
нуля (т. е. баланс смещается влево), то в поле pan
возвращается значение с минусом (отрицательное число с минусом есть положительное
число). Кроме того, к Цифровому значению приписывается строка Left.
А если баланс смещается вправо, то всё остаётся как есть и ещё приписывается
Right. Если же значение координаты х равно
нулю, то вообще ничего не приписывается. Теперь мы имеем более привычную
форму отображения баланса. Таким же способом можно сделать, чтобы при
минимальной громкости выводилось бы, например «OFF» или «Выкл.», а при
максимальном значении — «МАХ». Для этого нужно лишь заменить код для ползунка
в символе shkala_volume на следующий:
_root . zvuk. set Volume (this. _x) ;
s = new Sound (zvuk) ;
if (this._x == 0) {
root.vol = "Выкл."; Т
else if (this._x == 100) { _root.vol = "MAX"; Т
else { _root.vol = s.getVolume ();
Загрузка мультфильмов
Если мультфильм имеет большой объем, обусловленный большими количеством
объемной графики и длительностью воспроизведения, то следует позаботиться
об организации его загрузки. Игнорирование этой задачи может иметь неприятные
последствия: пользователь придет в недоумение, долго ожидая появления
чего-нибудь на экране, либо, что еще хуже, нарушится цельность и логика
вашего произведения. Мы рассмотрим здесь два типовых способа решения этой
задачи:
- декомпозиция одного большого мультфильма на несколько мультфильмом меньшего объема;
- создание специального сценария загрузки — так называемого загрузчика (preloader).
Декомпозиция мультфильма
Время загрузки мультфильмов можно уменьшить, разбив большой SWF-файл на
несколько файлов меньшего размера. При этом загрузка дополнительных фрагментов
(серий) мультфильма может происходить по мере необходимости. Например,
можно загружать следующую серию мультфильма из последнего кадра предыдущей
серии. Это делается, разумеется, с помощью сценариев ActionScript.
Инструкция ActionScript по загрузке мультфильма выглядит так:
loadMovie("URL_SWF-файла", уровень)
Здесь первый параметр — адрес SWF-файла с мультфильмом; если этот файл
находится в одной папке с вызывающим его файлом, то можно использовать
просто имя SWF-файла. Каждому загружаемому мультфильму ставится в соответствие
уровень в интервале от 0 до 115 999. Основной (первый) мультфильм располагается
на уровне 0. Остальные мультфильмы имеют другие уровни. Уровни мультфильмов
подобны слоям: один мультфильм можно загружать поверх другого. На переднем
плане находится мультфильм с меньшим уровнем. Однако нулевой уровень имеет
особенности. А именно: при загрузке первого мультфильма (нулевой уровень)
устанавливаются цвет фона и частота кадров. Эти параметры остаются неизменными,
даже если вы загрузите другой мультфильм с иными цветом фона и частотой
кадров, или выгрузите первый мультфильм. В тоже время возможна загрузка
нового мультфильма на нулевом уровне. При этом новый мультфильм заменит
старый, но цвет фона сохранится. При загрузке нового мультфильма на нулевой
уровень можно изменить только частоту кадров.
Загруженный мультфильм можно выгрузить, чтобы освободить память. При ,грузке
на передний план выходит мультфильм, находящийся на следующем уровне (т.
е. под выгружаемым мультфильмом). Формат инструкции ActionScript для выгрузки
мультфильма имеет следующий вид:
unloadMovie(уровень)
При этом будет выгружен любой мультфильм, который в данный момент оказался
на указанном в параметре уровне.
При использовании технологии загрузки/выгрузки мультфильмов можно все
части составного мультфильма загружать на один и тот же уровень, отличный
от нулевого. При этом выгрузка предыдущего мультфильма будет происходить
автоматически за счет загрузки последующего.
При организации взаимодействия между различными частями составного мультфильма
используются переменные, хранящие адреса уровней мультфильмов. Например,
мультфильм, загружаемый первым, всегда располагается по адресу JevelO;
мультфильму на втором уровне соответствует адрес _leve!2 и т. д. Если,
скажем, требуется обратиться к переменной message, соответствующей текстовому
полю, расположенному в мультфильме на уровне 52, то полное имя этой переменно^
будет иметь вид:
_level52.message
Рис. 634. Окно с параметрами загрузки SWF-файла
Параметры загрузки мультфильма можно протестировать. Для этого выполни-те
команду control>Test Movie, а затем — View>Bandwidth
Profiler (Профилировщик полосы пропускания). Далее выполните команду
Debug> 14.4 (1.2 Kbs),
чтобы моделировать низкую скорость передачи данных по модемному соединению.
На следующем рисунке показано окно с параметрами загрузки файла свеча.swf.
Среди параметров в левой части окна можно видеть, в частности, размеры
кадра в пикселах (Dim), скорость прокрутки
кадров (Fr Rate), размер мультфильма в килобайтах
(Size), длительность в секундах и количестве кадров (Duration).
Загрузчик мультфильма
Если мультфильм содержит большие, долго загружаемые компоненты (например,
графику большого объема), то следует предусмотреть организацию его загрузки.
Прежде чем начать воспроизведение, необходимо произвести загрузку всего
мультфильма или хотя бы некоторой его части. Вы должны решить, какая часть
мультфильма должна быть загружена прежде, чем можно начать воспроизведение
следующей части. Дело в том, что время загрузки по модемному подключению
к Интернету может оказаться в 10—100 раз большим, чем при использовании
выделенных каналов или кабельного модема. Мы не хотим,-чтобы пользователь
томился в ожидании появления на экране хотя бы какой-нибудь реакции на
его действия, а также нарушения логики воспроизведения мультфильма. Эта
задача решается с помощью сценариев, которые называются
загрузчиками (preloader). Сценарий, который проверяет факт завершения
загрузки, в простейшем виде должен ориентироваться на факт передачи последнего
кадра мультфильма или того кадра, получение которого вы сочтете достаточным
для начала воспроизведения. Такой сценарий основан на использовании функции
ifFrameLoaded().
Загрузчик выполняет две основные функции. Во-первых, он используется для
загрузки так называемых «тяжелых материалов», таких как как графическая
и звуковая информация. Во-вторых, он сообщает пользователю о том, что
загрузка еше не завершена.
На следующем рисунке изображен начальный экран некоторого мультфильма.
В этом мультфильме два слоя: Scripts, в котором
расположены сценарии, и Основной, в котором
размещены три кадра с «тяжелым материалом», например, графикой и звуком.
Начальный экран у нас прост: он содержит только текст «Загружаюсь...».
Некоторые дизайнеры вместо надписи вставляют индикатор прогресса, т. е.
элемент, наглядно показывающий процесс загрузки в виде процентов или линейки.
Рассмотрим содержимое слоя Scripts, в котором
реализуется собственно загрузчик. В первом кадре этого слоя расположен
следующий сценарий:
ifFrameLoaded (10)
{ gotoAndStop("RollEm");
Рис. 635. Загрузчик обеспечивает
пересылку компонентов мультфильма и сообщает пользователю о том, что загрузка
еще не завершена
Это означает: если 10-й кадр загружен, то перейти к кадру с меткой
RollEm (Прокрутить их). Такую метку имеет 7-й кадр. Мы проверяем
загрузку 10-го кадра, потому что это — последний кадр мультфильма. Обычно
подобный переход происходит с последующим воспроизведением. Однако в нашем
мультфильме воспроизведение останавливается.
В 3-м кадре слоя Scripts расположен такой сценарий:
gotoAndPlay("Loaded?");
Это означает, что следует перейти к кадру с меткой Loaded? (Загружен?).
Такую метку имеет 1-й кадр. А в 1-м кадре, как уже известно, проверяется,
загружен ли 10-й кадр.
Кадр 7 с меткой RollEm является началом мультфильма. Именно в этом кадре
можно разместить его содержательную часть. Заметим, что используемая в
мультфильме «тяжелая часть», расположенная в слое Основной
в кадрах 3-5, к моменту начала воспроизведения уже загружена.
Схема рассмотренных выше переходов между кадрами показана на следующем
рисунке.
Рис. 636. Схема переходов между кадрами слоя Scripts, обеспечивающего загрузку мультфильма
После создания мультфильма очень полезно протестировать его загрузку
при различных параметрах модемного соединения. В режиме тестирования
(control>Test Movie) сказываются доступными команды меню View>Bandwidth
Profiler, View>Streaming (Вид>Показать пересылку) и
View>Streaming Graph
(Вид>Показать граф пересылки), а также меню Debug
(Отладка), в котором можно выбрать скорость модемного соединения.
Сценарии ActionScript во внешних файлах
Если у вас имеются сценарии общего назначения (часто используемые, домашние
заготовки), то их можно хранить в отдельных текстовых файлах. Вместо того
чтобы копировать код в нужное место разрабатываемой программы, лучше просто
вызвать его из текстового файла. Текстовый файл с кодом на языке ActionScript
обычно имеет расширение as, хотя это и не обязательно. Для импорта в сценарий
кода из текстового файла служит команда #include с указанием URL-адреса
файла. Если этот файл находится в той же папке, что и вызывающий его SWF-файл,
то достаточно написать только имя файла. Например, для импорта кода из
файла my_prog.as в сценарий обработки нажатия кнопки мыши служит такой
код:
on (press) {
#include "my_prog.as";
}
Оптимизация
Недостаточно научиться только создавать мультфильмы, нужно уметь делать
это хорошо. В настоящее время существуют как страстные поклонники применения
Flash-технологии в Web-дизайне, так и яростные противники. Мы уже отмечали,
что не стоит злоупотреблять обилием видео- и звуковых эффектов на Web-странице,
поскольку замедляется загрузка страницы, внимание пользователя отвлекается
от главного, не говоря уже о том, что все это может вызвать раздражение.
Общая рекомендация такова: используйте Flash только тогда, когда без этого
не достичь вашей цели. Если вы все же решили применить эту технологию,
то следует уделить внимание вопросам экономии ресурсов, о чем и пойдет
речь в данном разделе.
Общеизвестно, что плавность анимации достигается большим количеством
кадров, появляющихся в одну секунду (fps, frames per second —кадров/с).
Следовательно, мы стремимся указывать большую скорость (частоту кадров)
в свойствах Flash-мультфильма. По умолчанию Flash использует значение
12 fps, а для высококачественной анимации обычно требуется 25-30 fps.
Однако увеличение частоты кадров требует большей производительности компьютера,
на котором выполняется анимация. Если ее недостаточно, Flash уменьшает
частоту кадров. Поэтому даже если мы установим частоту кадров равной 100
fps, Flash все равно будет исходить из имеющихся технических возможностей.
Размеры видимой области и объем анимации
Имеются способы повышения качества воспроизведения мультфильма. Пер-вь,й
_ уменьшить размеры видимой области мультфильма: на слабом компьютере
мультфильм с видимой областью 300x200 пикселов будет воспроизводиться
гораздо лучше, чем, скажем, мультфильм с размерами видимой области 600x400.
Второй способ сводится к учету следующего:
- Чем больше подвижных объектов в сцене, тем сложнее Flash обрабатывать их, и тем медленней будет воспроизведение.
- Выгодней использовать один символ, содержащий несколько мелких объектов, чем много символов для каждого объекта. В качестве примера можно привести имитацию снега в мультфильме. Много символов, каждый из которых будет отвечать за отдельную снежинку, будут двигаться гораздо медленней, чем один символ, отвечающий за весь снегопад.
- Не держите символы на сцене, если вы их не используете. Даже если вы сделали символ невидимым, он все равно присутствует на сцене и тормозит всю анимацию.
При публикации анимации в Flash имеется возможность указать значение
параметра Quality (Качество). Кроме того,
в скриптах (сценариях) можно использовать параметы _quality, highquality
и функцию toggleHighQuality(). Качество, задаваемое таким образом, тоже
оказывает сильное влияние на скорость воспроизведения.
Уровень качества можно установить вручную при экспорте вашего произведения.
Если при этом не отключить контекстное меню, то вы можете предоставить
пользователю самому регулировать качество воспроизведения.
Качество можно изменять динамически во время исполнения анимации (параметр
_quality). Во время воспроизведения особенно сложных и «быстрых» фрагментов
неплохо понизить качество, тем самым выигрывая в скорости, а когда «количество»
анимации уменьшится, можно вновь вернуться к высокому уровню качества.
Потоковое воспроизведение и предварительная загрузка
Формат файлов Flash специально приспособлен для сети и является так
называемым потоковым форматом. Это означает,
что мультфильмы Flash могут начать воспроизводиться, еще не загрузившись
до конца. С одной стороны, это преимущество, т. к. мультфильм начинает
воспроизводиться достаточно рано, и пользователю не нужно дожидаться конца
загрузки. С другой стороны, если канал, по которому передаются данные,
окажется уже, чем необходимо для передачи Flash-потока, анимация будет
приостановлена. Если для вас допустимы такие задержки или у вас есть уверенность
в том, что каналы связи не подведут, тогда все в порядке. Но если вам
хочется, чтобы мультфильм воспроизводился без задержек, то его следует
снабдить предварительным загрузчиком (preloader) — прием, позволяющий
задержать воспроизведение мультфильма до его полной загрузки.
Полезно протестировать демонстрацию вашего мультфильма при нескольких
значениях частоты кадров с помощью функции Test Movie
(команда control>Test Movie или клавиши
<ctrl>+<Enter>). Скорость можно выбирать в меню Debug
которое появляется после запуска мультфильма.
Синхронизация потокового звука
В Flash есть несколько способов синхронизации звука. Если вы используете
достаточно продолжительный фрагмент звукового сопровождения, а события
анимации должны совпадать с событиями звука, то следует использовать синхронизацию
Stream (Поток). В этом случае вся анимация
будет синхронизирована со звуком, и два этих потока будут идти параллельно,
не отставая друг от друга.
Одним из основных достоинств Flash является малый размер выходного SWF-файла: чем меньше файл, тем быстрее он перекачивается по сети. К сожалению, Flash не может самостоятельно оптимизировать размер файлов. Это должны делать мы. Рассмотрим некоторые обстоятельства, влияющие на размер Flash-файлов.
Использование символов
Применение символов в Flash — мощный способ экономии занимаемого
места. Они предоставляют возможность повторно использовать любые фрагменты
вашего произведения. Если вы используете что-то хотя бы дважды, сделайте
это что-то символом.
Например, нужно нарисовать множество разноцветных шариков разного размера.
Используйте один символ для всех шариков. Вы можете изменить размер и
цвет каждого экземпляра данного символа и получить нужную сцену, что займет
гораздо меньше места, чем если бы для каждого шарика создавался отдельный
символ.
Проанализируйте, какие общие свойства имеются у объектов в вашем мультфильме,
и вынесите их в отдельный символ.
Графика
Когда вы создаете графику в Flash, проверьте перед сохранением окончательного
варианта, что не осталось лишних линий, пустых или прозрачных фигур, которые
не несут функциональной нагрузки, но занимают место.
Ограничьте себя в использовании таких линий, как пунктир, нечеткие линии,
точки и т. д. Сплошные линии занимают меньше места. Толстые линии, нарисованные
карандашом, занимают гораздо меньше места, чем линии, нарисованные кистью.
Импортируя векторную графику, убедитесь, что в ней нет скрытых линий или
объектов.
Flash позволяет сглаживать, выпрямлять и оптимизировать линии (команды
Smooth, Straighten и Optimize
меню Modify). Чем прямее линия, тем меньше
места для нее требуется. И, наоборот, чем причудливей линия, тем больше
места занимает ее описание. Оптимизируя линии, можно задать уровень сглаживания,
а также выполнить многопроходную оптимизацию.
Flash является редактором векторной графики, поэтому, по возможности,
следует использовать векторные изображения. К тому же растровая графика
при мас-цгтабировании может выглядеть не очень хорошо.
Если изображение не является фотографическим (например, схема или чертеж),
имеет смысл попробовать преобразовать его в векторный формат. После импортирования
изображения в его параметрах можно выбрать тип компрессии и посмотреть,
как оно будет выглядеть. Довольно накладно создание анимации в Flash на
основе растровых изображений. Для этого можно использовать, например,
формат GIF.
Текст и шрифты
По умолчанию Flash преобразует все используемые буквы, цифры и другие
печатные символы в так называемые многоугольники
(Poligons). Это означает, что для фразы «как дела?» Flash сохранит
начертания знаков «к», «а», «д», «е», «л» и «?». Каждая буква сохраняется
в виде многоугольника, который потом размножается нужное количество раз.
Причем, если мы напишем ту же фразу другим шрифтом, Flash вынужденно сохранит
начертания букв этого шрифта тоже. Представьте, сколько места займет описание
целого шрифта в случае, когда мы задействуем весь алфавит (плюс ко всему
Flash различает прописные и строчные буквы).
Есть способ избежать сохранения шрифта, но тогда придется пожертвовать
возможностью сглаживания краев букв. Для этого нужно выбрать параметр
Use Device Fonts в опциях текста. Тогда Flash сохраняет не начертания
букв, а только характеристики и название шрифта (это всего несколько байт).
При воспроизведении используется указанный шрифт либо, если такого шрифта
не окажется в системе, Flash применяет шрифт, ближайший по характеристикам.
Итак, тексты больших объемов лучше не хранить в документах Flash, а использовать,
например, HTML. Старайтесь применять как можно меньше различных шрифтов.
Если уж очень нужно поместить большое количество текста в документ Flash,
используйте опцию Use Device Fonts. Все это
позволит сократить размер создаваемого файла.
Звук
Очевидно, что использование звука сильно увеличивает размер Flash-файлов.
Звук в Flash тоже поддается оптимизации. В параметрах публикации (Publish
Settings) можно установить тип компрессии (сжатия) и качество звука.
В большинстве случаев имеет смысл использовать компрессию МРЗ, выбирая
качество «по потребности». Чем шире поток (bit rate), тем больше места
занимает звук.
В общем случае, на размер звуковых данных влияют частота дискретизации
(sample rate) и количество каналов (стерео, моно). Понятно, что стереозвук
будет занимать в два раза больше места, чем моно, и что звук с частотой
дискретизации 44 кГц будет занимать в два раза больше места, чем тот же
фрагмент, но с частотой 22 кГц. Частоту дискретизации относительно исходной
можно понизить, а повышать ее не имеет смысла (лучше от этого звук не
станет).
Еще один способ сократить затраты на звук — проигрывать один и тот же
фрагмент несколько раз.
Результаты вашего творчества хранятся в файлах с расширением Па. Это
исходные или, иначе говоря, авторские файлы. Их можно загружать в Flash,
просматривать и редактировать. Под термином публикация
(publish) понимается создание выходных файлов, которые можно просматривать
в браузере, проигрывателе Flash Player и др.
Публикацию можно настроить (FiIe>Publish Setting),
сделать предварительный просмотр (FiIe>Pubiish
Preview) и, наконец, осуществить (File>Publish).
В окне Publish Settings (Настройка публикации)
на вкладке Formats (Форматы) вы можете указать,
какого типа файлы следует создать, а также ввести их имена, отличные от
устанавливаемых по умолчанию. Можно указать сразу несколько типов файлов.
В зависимости от того, какие типы выходных файлов вы указали на вкладке
Formats, в окне настройки публикации будут присутствовать и другие
вкладки, на которых можно установить значения дополнительных параметров
для каждого типа файлов.
Рис. 637. Вкладка Formats окна настройки публикации,
на которой можно задать типы и имена создаваемых выходных файлов
Заметим, что в Flash MX, в отличие от Flash 5.0, отсутствуют флажки Generator
Template (Генератор Шаблона) и RealPlayer.
Типичный вариант публикации для Web-страниц состоит в выборе двух типов
файлов: Flash (.swf) и HTML
(.html). В этом случае создаются два выходных файла:
- Файл формата Flash с расширением swf, содержащий мультфильм;
- Текстовый файл с расширением html, содержащий тэги (команды языка HTML) для встраивания вашего мультфильма в HTML-документ.
Вы можете задать создание файла Windows Projector
(.exe). Это — исполнимый файл с расширением
ехе, который содержит в себе паше произведение (все, что можно сохранить
в обычном для Flash SWF-формате) вместе с проигрывателем. Таким образом,
вы можете создать самовоспроизводящийся мультфильм. Его можно продемонстрировать
на компьютере, на котором не установлен проигрыватель Flash Player.
Обратите внимание, что в окне настройки публикации можно задать параметры
экспорта в файлы обычных графических форматов GIF, JPEG и PNG. Напомним,
что экспорт статических графических изображений в эти и другие форматы
можно выполнить и с помощью команды File>Export
Image (Файл>Экспорт изображения), которая рассматривалась в
главе 8. Однако только в окне настройки публикации вы можете задать создание
анимационного GIF-файл. Напомним, что небольшие по размерам графики и
количеству кадров анимации обычно сохраняют в формате Animated GIF, который
особенно широко используется в Web-дизайне.
Если вы хотите сохранить изменения параметров и продолжить работу с мультфильмом,
закрыв окно настройки публикации, то щелкните на кнопке ОК.
Для выполнения публикации щелкните на кнопке Publish.
Заметим, что кроме команды File>Publish
(Файл>Публикация) можно использовать команду File>Export
Movie (Файл>Экспорт мультфильма).
Рассмотрим основные варианты публикации более подробно.
Формат SWF является наиболее компактным. Сохраняйте окончательные варианты
вашей работы, особенно анимации, именно в этом формате, если у вас нет
веских причин поступать иначе. Если вы хотите разместить мультфильм на
Web-странице, то создание SWF-файла обязательно.
На вкладке Formats окна настройки публикации
установите флажок Flash (.swf) и перейдите
на вкладку Flash.
Параметры SWF-файла:
- Список Load Order (Порядок загрузки). Порядок загрузки слоев первого кадра мультфильма: Bottom Up (Снизу вверх), Top Down (Сверху вниз);
- Флажок Generate size report (Генерировать отчет о размере). Задает создание текстового файла, содержащего сведения о размерах в байтах различных фрагментов мультфильма;
- Флажок Omit Trace actions (Опустить действия трассировки). Трассировка (Trace) выполняется при отладке сценариев ActionScript и выводит отладочную информацию в отдельном окне. Установите этот флажок, чтобы не использовать инструкции Trace в SWF-файле;
- Флажок Protect fron import (Защитить от импорта). Предотвращает импорт SWF-файла в программу Flash для защиты от несанкционированного использования вашего произведения;
- Флажок Debugging Permitted (Допустимая
отладка). Позволяет использовать Debugger (Отладчик) для отладки мультфильмов,
созданных, например, на другом компьютере. Если установить этот флажок,
то можно задать пароль для защиты мультфильма. Обычно используется программистами
на ActionScript;
Рис. 638. Вкладка Flash окна настройки публикации в Flash 5.0, на которой можно задать параметры создаваемого SWF-файла
- Ползунок JPEG Quality (Качество JPEG). Определяет качество растровых изображений в мультфильме. Точнее говоря, этот параметр задает степень сжатия алгоритмом JPEG. Чем выше качество, тем меньше сжатие и наоборот;
- Поле Audio Stream (Аудиопоток). Отображает и устанавливает параметры потоковых звуков. Потоковые звуки — звуки, для которых на палитре Sound (Звук) параметр Sync имеет значение Stream. Этот параметр применяется, если не задана компрессия для отдельных звуковых файлов в окне Sound Properties Чтобы изменить текущие настройки, щелкните на кнопке Set (Установить);
- Поле Audio Event (Аудиособытие). Отображает и устанавливает параметры компрессии звуков, для которых в палитре Sound параметр Sync имеет значение Event. В противном случае используются параметры, заданные для звука типа Audio Stream;
- Флажок Override sound settings (Отменить
звуковые параметры). Если установить этот флажок, то все параметры,
заданные в окне Sound Properties, будут
отменены. При этом ко всем звукам будут применены параметры, установленные
в окне Publish Settings;
Рис. 639. Вкладка Flash окна настройки публикации в Flash MX, на которой можно задать параметры создаваемого SWF-файла
- Раскрывающийся список Version (Версия). Задает версию Flash-проигрывателя, для которой следует создать выходные файлы. Следует иметь в виду, что если вы использовали средства, отсутствовавшие в более ранних версиях, то отображение в них мультфильма может быть некорректным. Так, например, ActionScript в Flash 5.0 отличается от языка сценариев Flash 4.O. Файлы с дополнительным сжатием (см. следующий параметр), созданные в Flash MX, могут проигрываться только Flash-проигрывателем версии 6;
- Флажок compress Movie (Сжатие мультфильма). Присутствует в Flash MX и доступен, если в списке Version (Версия) установлено значение Flash Player 6. При установке этого флажка используется алгоритм дополнительного сжатия мультфильма.
Чтобы разместить мультфильм Flash (т. е. SWF-файл) на Web-странице,
необходимо сделать в HTML-коде этой страницы специальную вставку. Вставляемый
HTML-код содержит указания Web-браузеру, как отобразить проигрыватель
(Flash Player) и где его найти. Написать такой код совсем просто. Однако
Flash может его создать самостоятельно.
На вкладке Formats окна настройки публикации
установите флажок HTML (.html). Обратите внимание,
что при этом автоматически установится флажок Flash
(.swf). Это означает, что кроме HTML-файла будет создан и SWF-файл
с мультфильмом. Перейдите на вкладку HTML.
Рис. 640. Вкладка HTML окна настройки публикации, ни которой можно задать параметры создаваемого HTML-файла
Параметры HTML-файла:
- Раскрывающийся список Template (Шаблон).
Определяет формат и содержание HTML-файла. Возможны следующие значения:
- Flash Only (Только Flash) — простейший шаблон, устанавливаемый по умолчанию. При этом создается HTML-файл, содержащий только команды загрузки проигрывателя и SWF-файла;
- Flash with Named Anchor (Flash с именованными якорями) — обеспечивает включение в HTML-файл дополнительных гиперссылок, с помощью которых могут выполняться переходы между кадрами мультфильма;
- Image Map (Графическая карта) — обеспечивает включение в HTML-файл тэга <1MG> с атрибутами, позволяющими создать графическую карту ссыло к(картинку с областями, чувствительными к щелчку); при этом на вкладке Formats следует указать необходимость генерации файла одного из графических форматов;
- QuickTime — обеспечивает включение в HTML-файл Flash-мультфильма в виде проигрывателя QuickTime.
- Раскрывающийся список Dimensions (Размеры).
Устанавливает размеры области Web-страницы, выделяемой мультфильму.
Возможны следующие три значения:
- Match Movie (Соответствовать мультфильму) — устанавливает размеры соответственно параметрам, заданным в окне Movie Properties (Свойства мультфильма), которое открывается командой Modify>Movie (Moдифицировать> Мультфильм);
- Pixels (В пикселах) — введите числовые значения значения в поля Width (Ширина) и Height (Высота);
- Percent (В процентах) — введите значения ширины и высоты в процентах от соответствующих размеров окна браузера.
- Флажки группы Playback (Воспроизведение):
- Paused At Start (Задержка при воспроизведении) — создается параметр PLAY с значением FALSE (ложь). Предполагается, что пользователь должен запустить воспроизведение щелчком на кнопке в мультфильме (к экземпляру кнопки должно быть добавлено действие Play). Кроме того, можно выбрать команду Play (Воспроизвести) контекстного меню, вызываемого щелчком на мультфильме правой кнопкой мыши;
- Loop (Цикл) — создается параметр LOOP с значением TRUE (истина). При этом мультфильм воспроизводится циклически неопределенно долго. Этот параметр установлен по умолчанию. Снимите флажок, если хотите остановить воспроизведение по окончании мультфильма;
- Display Menu (Отобразить меню) — создается параметр MENU с значением TRUE (истина). Это позволяет открывать контекстное меню щелчком на мультфильме правой кнопкой мыши. В меню можно выбрать команды увеличения качества, перемотки, воспроизведения и т. п. Этот флажок установлен по умолчанию. Если флажок не установлен, то в контекстном меню будет только пункт About Flash Player (О программе Flash Player);
- Device Font (Встроенный шрифт) — если этот флажок установлен, то все шрифты заменятся установленными на компьютере пользователя системными шрифтами со сглаженными краями. По умолчанию этот флажок не установлен.
- Раскрывающийся список Quality (Качество).
Определяет степень сглаживания рисунков, т. е. неровностей краев. Чем
ниже качество, тем быстрее воспроизводится мультфильм, и наоборот. Возможны
следующие шесть значений:
- Low (Низкое) — нет сглаживания;
- Autolow (Авто-низкое) — воспроизведение начинается с низким качеством и переключается на высокое, если проигрыватель определит, что компьютер его поддерживает;
- Autohigh (Авто-высокое) — воспроизведение начинается с высоким качеством и переключается на низкое, если проигрыватель определит, что компьютер не поддерживает высокое качество;
- Medium (Среднее) — используются некоторые средства сглаживания, но только не растровых изображений;
- Heigh (Высокое) — сглаживание векторной графики и статических растровых изображений, но только не таких, которые были созданы при автоматическом заполнении кадров;
- Best (Самое лучшее) — сглаживание всех изображений, в том числе анимационных растровых.
- Раскрывающийся список Window Mode (Режим
окна). Определяет, как окно мультфильма взаимодействует с оставшейся
частью Web-страницы. Этот параметр понимают только браузеры Microsoft
Internet Explorer версии 4.0 и выше. Возможны следующие три значения:
- Window (Окно) — мультфильм воспроизводится в собственном окне Flash-проигрывателя, при этом обеспечивается наибольшая скорость проигрывания;
- Opaque (Непрозрачный) — мультфильм воспроизводится непосредственно на странице, при этом он имеет непрозрачный фон, закрывающий все остальные элементы Web-страницы;
- Transparent (Прозрачный) — мультфильм воспроизводится непосредственно на странице, при этом фон мультфильма прозрачный, чтобы были видны другие элементы Web-cTpaHHUbi;'Bbi6op этого значения может замедлить воспроизведение мультфильма.
- Раскрывающийся список HTML Alignment (Выравнивание HTML). Определяет, как будет выравниваться мультфильм по отношению к окну браузера. По умолчанию (Default) мультфильм располагается по центру окна браузера. Если окно браузера по размерам меньше, чем фильм, то края последнего обрезаются. Другие значения параметра позволяют выровнять мультфильм по краям окна браузера;
- Раскрывающийся список Scale (Масштаб). Определяет положение мультфильма внутри границ, заданных параметрами WIDTH и HEIGHT. Возможны следующие три значения:
- Default (Show All) (По умолчанию (Показать все)) — отображает весь фильм без искажения, но может создавать границы по обеим сторонам мультфильма;
- No Border (Без границ) — масштабирует мультфильм так, чтобы он занял всю указанную область без искажений, но, возможно, с обрезкой краев;
- Exact Fit (Точное соответствие) — приводит мультфильм в точное соответствие с указанными размерами, при необходимости искажая его.
- Раскрывающиеся списки Flash Alignment (Выравнивание Flash). Определяют, как мультфильм будет располагаться в собственном окне. Эти параметры связаны с параметрами Scale (Масштаб) и Dimensions (Размеры);
- Флажок Show Warning Messages (Показывать
предупреждающие сообщения). Если флажок установлен, то во время публикации
будут выводиться предупреждающие сообщения о допущенных ошибках.
в Flash
Ниже приведен пример содержания HTML-файла, созданного редактором Flash:
<HTML>
<HEAD>
<ТITLE>Пример</ТITLE> </HEAD> <BODY bgcolor="#cccccc">
<!== URL's used in the movie==>
<A HREF=http: //www .admiral. ru/hp/dunaevx/A> <!== text used
in the movie==>
<OBJEcT classid="clsid:D27cDB6E-AE6D-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=5,0,0,0" WIDTH=298 HEIGHT=346>
<PARAM NAME=movie VALUE="nPMMEP.SWF"> <PARAM NAME=quality
VALUE=high> <PARAM NAME=bgcolor VALUE=Icccccc>
<EMBED src="nPMMEP.SWF" quality=highbgcolor=#cccccc WIDTH=298
HEIGHT=346
TYPE="application/x-Shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/ index.cgi?Pl_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJEcT>
</BODY>
</HTML>
Все, что заключено в угловые скобки <и>, является тэгами
(командами, дескрипторами) HTML. Вообще говоря, конкретное содержание
HTML-кода зависит от того, какие параметры вы задали на вкладке HTML
в окне настройки публикации. Подробнее об HTML мы расскажем в следующей
главе, а здесь отметим лишь основные моменты, относящиеся к проигрывателю
SWF-файлов на Web-странице.
В HTML-коде используются тэги <ОВJEcT>
и <EMBED> для вставки в Web-страницу
элемента управления ActiveX, обеспечивающего воспроизведение SWF-файла
(в нашем случае — npHMep.swf). Это и есть проигрыватель мультфильма в
окне Web-браузера. Для браузера Microsoft Internet Explorer достаточно
тэга <OBJEcT>. Тэг <EMBED>
вставлен только для Netscape Navigator. Значения параметров codebase и
pluginspage содержат URL-адреса проигрывателя SWF-файлов на тот случай,
если он не установлен на компьютере пользователя. Заметим, что в Internet
Explorer 5.x и более поздних версий пpoигpывaтeльSWF-фaйлoвyжe встроен,следовательно,
этому браузеру не нужен параметр codebase и, тем более, pluginspage. Однако
не забывайте, что встречаются браузеры и более ранних версий.
HTML-код, созданный в Flash, вы можете отредактировать (например, вставить
другие элементы страницы). А можно, наоборот, вставить необходимые фрагменты
этого кода в свой HTML-код. Например, чтобы вставить Flash-мультфильм
в уже готоиый HTML-документ, нужно вставить в него нее, что заключено
между <ОВJЕСТ> и </OBJEcT>
из приведенного выше примера. При этом следует лишь подставить нужные
значения для имени SWF-файла, размеров (WIDTH и HEIGHT), цвета фона (bgcolor)
и качества (quality). HTML-файл — это обычный текстовый файл с расширением
html или htm, который можно открыть, например, в Блокноте (Notepad) Windows.
Публикация самовоспроизводящихся мультфильмов
Итак, HTML-файл нужен для просмотра SWF-файлов в Web-браузере. Однако
SWF-файлы можно просматривать и в специальном окне Flash-проигрывателя.
Чтобы иметь возможность просмотра мультфильмов на компьютерах, на которых
Flash-проигрыватель не установлен, нужно создать исполняемый ЕХЕ-файл
для Windows (или сжатый HQX-файл для Macintosh). Исполняемый файл кроме
мультфильма содержит и Flash-проигрыватель. Однако его размер будет примерно
на 370 Кбайт больше, чем размер SWF-файла.
Чтобы создать самовоспроизводящийся мультфильм, на вкладке
Formats окна Publish Settings установите
флажок Windows Projector (.exe) или Macintosh
Projector (.hqx).
Рис. 821. Окно Flash-проигрывателя (Flash Player)
Публикация в формате Animated GIF
Вы можете экспортировать мультфильм в анимационный GIF-файл. Это имеет
смысл сделать в случае небольшого мультфильма, содержащего несколько кадров,
в которых находятся небольшие по размеру изображения. Такие анимации обычно
используются на Web-страницах.
На вкладке Formats окна настройки публикации
установите флажок GIF Image (.gif) и перейдите
на вкладку GIF. На этой вкладке можно задать
множество параметров, большинство из которых мы уже рассматривали в главе
3. Поэтому здесь мы остановимся лишь на некоторых из них.
Рис. 642. Вкладка GIF окна настройки публикации, на которой можно задать параметры создаваемого GIF-файла
Чтобы экспортировать мультфильм в анимационный GIF-файл, установите
переключатель Animated (Анимационный). Если
хотите, чтобы анимация воспроизводилась циклически неопределенно долго,
установите переключатель Loop continuously,
в противном случае установите переключатель Repeat
(Повторить) и задайте число повторений в соседнем поле ввода. Если требуется
экспортировать не все кадры мультфильма, то создайте метки
#First и #Last соответственно для первого
и последнего кадра. Для создания метки щелкните на нужном кадре и выполните
команду Window>Panels>Frame (Окно>Палитры>Кадр).
В поле Label (Метка) введите название метки.
Отметим еще один важный параметр — Transparent
(Прозрачность). С помощью этого параметра можно задать, каким образом
прозрачность, определенная в мультфильме посредством параметра alpha,
будет экспортирована в GIF-файл.
В списке Transparent можно выбрать следующие
значения:
- Opaque (Непрозрачный). Делает фон мультфильма непрозрачным;
- Тransparent (Прозрачный). Делает фон мультфильма прозрачным;
- Alpha. Позволяет установить пороговое значение (Threshold) в диапазоне от 0 до 255. Любые цвета, значения прозрачности (Alpha) которых меньше порога, становятся полностью прозрачными (невидимыми).
Мультфильмы могут быть экспортированы в форматы QuickTime (mov) и RealPlayer
(smil). Последний формат недоступен в Flash MX, но возможен в Flash 5.0.
Файлы этих форматов воспроизводятся с помощью одноименных проигрывателей.
Вы также можете экспортировать мультфильмы в форматы для статических изображений
— GIF, JPEG и PNG. При этом по умолчанию экспортируется содержимое первого
кадра мультфильма. Чтобы экспортировать другой кадр, его следует пометить
меткой #Static. Для создания метки щелкните
на нужном кадре и выполните в Flash 5.0 кoмaндy Window>Panels>Frame(Oкнo>Пaлитpы>Kaдp).
В Flash MX эта же цель достигается с помощью палитры Properties
(Свойства), вызываемой командой Window>Properties.
В поле Label (Метка) введите название метки.