Åëåíà Êèðüÿíîâà
Ñàíêò-Ïåòåðáóðã
«ÁÕÂ-Ïåòåðáóðã»
2008
УДК 681.3.06
ББК 32.973.26-018.2
К43
Кирьянов, Д. В.
К43 Adobe Flash CS3 – это просто! Создаем Web-анимацию /
Д. В. Кирьянов, Е. Н. Кирьянова. — СПб.: БХВ-Петербург, 2008. —
240 с.: ил. + Видеокурс (на CD-ROM)
ISBN 978-5-9775-0044-9
Приводятся общие сведения о работе в программе Adobe Flash CS3.
Подробно описан интерфейс программы, даны основные приемы работы.
Отдельно рассмотрены вопросы рисования во Flash-фильме, настройки
анимации, программирования интерактивных элементов и экспорта Flash-
фильма. Книга актуальна для пользователей обоих изданий Flash Standard и
Flash Professional, причем большая часть материала будет полезной и тем,
кто еще работает с предыдущей версией Flash 8. Видеокурс, прилагаемый к
книге на компакт-диске, отлично дополняет материал и дает читателю воз-
можность посмотреть, как осуществляется работа во Flash на практике.
Для широкого круга пользователей
УДК 681.3.06
ББК 32.973.26-018.2
Введение .................................................................................................................. 7
Введение .................................................................................................................. 7
Çíàêîìñòâî ñ Flash
редактор анимации;
язык программирования (предназначенный для настройки интерактив-
ности);
встроенный графический редактор.
Рис. 1.1. Flash-фильм (открыт в окне браузера) сочетает анимацию и интерактивные элементы
1.1.2. Ãðàôèêà
Обратимся к базовым понятиям хранения графической информации (попро-
сту говоря, рисунков) на компьютерах.
Çíàêîìñòâî ñ Flash 11
Рис. 1.6. Два типа векторной графики — объекты (обрамление+заливка, слева) и рисованная
графика ("закрашенные области", справа)
1.1.3. Àíèìàöèÿ
Вероятно, всем читателям известно, что принцип создания кино и видео ос-
нован на быстром чередовании отдельных статических изображений, назы-
ваемых кадрами (frames). Количество кадров, демонстрируемых в течение
одной секунды, называется частотой кадров (frame rate). Психология чело-
веческого восприятия такова, что при чередовании с частотой более 20 кад-
ров в секунду статические кадры не воспринимаются как отдельные изобра-
жения, а полностью создают иллюзию просмотра динамической картины
(рис. 1.7).
1.1.4. Èíòåðàêòèâíîñòü
Интерактивные элементы фильмов в последнее время стали полноценным
дополнением мультимедийных файлов. Благодаря сочетанию средств по соз-
данию анимации и средств настройки интерактивности (взаимодействия с
пользователем), Flash стал программой № 1 в соответствующем сегменте ин-
тернет-приложений. Во Flash встроены все основные стандартные элементы
управления, обеспечивающие взаимодействие с пользователем (такие как ги-
перссылки, кнопки, меню, переключатели, флажки проверки и т. п.).
Рис. 1.15. Осуществите запуск нужной программы при помощи главного меню Пуск
Для того чтобы соединить две панели в пределах одного сегмента, надо схва-
титься за закладку одной из них и перетащить ее на другую панель, ближе
к той ее границе, вдоль которой вы собираетесь расположить первую панель.
Панель (или группу панелей) можно развернуть (и, наоборот, свернуть) в том
или ином направлении при помощи щелчка на характерной кнопке, которая
примыкает к верхней границе панели (рис. 1.19). Кроме того, во Flash не до-
пускается скрытия кадра фильма, а убрать или, наоборот, вызвать на экран
панель Timeline (Монтаж) легко нажатием одноименной кнопки.
Во Flash основными являются следующие панели (см. рис. 1.17).
Library (Библиотека) — предназначена для управления исходным мате-
риалом Flash-фильма;
Рис. 1.23. Номер текущего кадра фильма отображается в нижней части панели Timeline
Çíàêîìñòâî ñ Flash 29
Отметим также, что убрать или, наоборот, вызвать на экран панель Timeline
(Монтаж) можно нажатием кнопки Show > Hide Timeline (Показать > Скрыть
панель Монтажа) (рис. 1.24), а выбрать масштаб изображения кадра фильма
на панели Stage (Сцена) легко при помощи раскрывающегося списка Scale
(Масштаб) (рис. 1.25).
Для того чтобы добавить сцену в фильм, достаточно ввести команду Insert >
Scene (Вставка > Сцена). В результате новая сцена будет создана, и содержи-
мое панели Timeline (Монтаж) будет относиться именно к этой сцене. Назва-
ние текущей сцены, которая редактируется в данный момент, отображается в
нижней части панели Timeline (Монтаж), а переключаться между сценами
следует при помощи меню, вызываемого кнопкой Edit Scene (Редактировать
сцену) (рис. 1.26).
Дополнительные средства управления сценами, например, их переименова-
ние или изменение порядка следования во Flash-фильме предоставляет па-
Çíàêîìñòâî ñ Flash 31
нель Scene (Сцена), вызываемая командой Window > Other Panels > Scene
(Окно > Другие панели > Сцена).
Рис. 1.26. Для переключения между сценами фильма служит кнопка Edit Scene
Рис. 1.28. Создайте новый документ Flash на основе языка программирования ActionScript 2.0
3. Для того чтобы разместить в начале слоя fly несколько пустых кадров,
выделите сначала щелчком некоторый его кадр, например 25, а затем вве-
дите команду Insert > Timeline > Frame (Вставка > Монтажный стол >
Кадр), либо команду Insert Frame (Вставить кадр) контекстного меню
(рис. 1.33).
4. Аналогичным образом добавьте кадры на нижнем слое sky (результат соз-
дания фрагмента пустых кадров на слоях показан на рис. 1.34).
5. Щелчком выделите первый кадр слоя sky на панели Timeline (Монтаж).
6. Схватитесь за рисунок с небом на панели Library (Библиотека) (в нашем
случае, sky.bmp) и перетащите его на кадр фильма, т. е. на панель Stage
(Сцена) (рис. 1.34).
Çíàêîìñòâî ñ Flash 37
Рис. 1.37. Вставьте рисунок с шаром на второй ключевой кадр верхнего слоя
40 Ãëàâà 1
9. Для того чтобы создать еще один ключевой кадр в середине анимации на
верхнем слое fly, выделите щелчком этот кадр на панели Timeline (Мон-
таж), вызовите контекстное меню и выберите в нем пункт Insert Key-
frame (Вставить пустой ключевой кадр).
10. Перейдите к первому ключевому кадру анимации на слое fly на панели
Timeline (Монтаж).
11. Выберите на панели Tools (Инструментарий) инструмент Free Transform
(Преобразование).
12. Схватитесь инструментом Free Transform (Преобразование) за маркер
обрамления рисунка с шаром и измените его масштаб, перетаскивая мар-
кер в ту или иную сторону (рис. 1.39).
Çíàêîìñòâî ñ Flash 41
Рис. 1.39. Создайте в середине анимации верхнего рисунка еще один ключевой кадр
и добавьте к анимации эффект масштабирования
Две важных опции, включаемые командами Control > Loop Playback (Управле-
ние > Циклическое воспроизведение) и Control > Play All Scenes (Управле-
ние > Проигрывать все сцены), меняют режим воспроизведения, соответствен-
но, циклическим образом или от начала до конца; а также проигрывание всех
сцен фильма или только текущей сцены.
42 Ãëàâà 1
Наконец, отметим, что для более удобного просмотра фильма может приме-
няться не только верхнее меню Control (Управление), но и панель Controller
(Управление) (рис. 1.41), которую можно вызвать командой Window > Con-
troller (Окно > Управление). Перечислим (слева направо) назначение кнопок
панели Controller (Управление), отметив, что те же самые команды присут-
ствуют и в верхнем меню Control (Управление):
Stop (Стоп) — остановка воспроизведения фильма;
Go to First Frame (К первому кадру) — перемещает линию редактирова-
ния на первый кадр сцены фильма;
Step Back One Frame (Кадр назад) — перемещает на один кадр назад;
Play (Проиграть) — включение воспроизведения фильма с текущего кадра;
Step Forward One Frame (Кадр вперед) — перемещает на один кадр впе-
ред;
Go to Last Frame (К последнему кадру) — перемещает линию редактиро-
вания на последний кадр сцены фильма.
Çíàêîìñòâî ñ Flash 43
Ðàáîòà ñ ôàéëàìè
File > Save as Template (Файл > Сохранить как шаблон) — сохраняет до-
кумент в качестве шаблона для создания новых документов;
File > Save all (Файл > Сохранить все) — сохраняет все открытые фильмы
(которые могут быть открыты во Flash для одновременного редактирова-
ния).
Сохраненный ранее документ можно открыть либо командой File > Open
(Файл > Открыть проект) , через стандартное диалоговое окно Open File (От-
крытие файла), либо командой File > Open Recent (Файл > Открыть недавний
проект), которая служит для открытия одного из тех проектов, которые ре-
дактировались в последнее время (рис. 2.1). Если вы хотите открыть доку-
мент, хранящийся в сети Интернет, следует воспользоваться командой File >
Open from Site (Файл > Открыть с сайта).
Рис. 2.2. При создании нового документа следует выбрать его тип
Для того чтобы закрыть тот или иной фильм, достаточно нажать кнопку за-
крытия панели в правом верхнем углу панели Timeline (Монтаж).
2.2. Èìïîðò
Для того чтобы использовать графический, звуковой или видеофайл во Flash-
фильме, его следует сначала импортировать из файла. Разработчики преду-
смотрели не только обычные, но и специфические возможности импорта ме-
диа. Перечислим их:
обычный импорт медиафайлов (графики, видео- или звука). Как правило,
содержимое медиафайла копируется (с применением предусмотренных
для этого алгоритмов сжатия) в файл Flash-документа (тот, что имеет рас-
ширение fla) (см. разд. 2.1.2);
импорт видео — это набор дополнительных опций, позволяющих, к при-
меру, организовать для уже созданного фильма просмотр импортирован-
ной анимации во встроенном проигрывателе (см. разд. 2.2.5);
настройка импорта для обращения к медиафайлу в режиме "онлайн" (при
просмотре самого Flash-фильма). Это важно для просмотра Flash-фильмов
через Интернет, когда рационально организовать отдельную загрузку с
сервера Flash-документа и медиаконтента (например, видеофайла).
50 Ãëàâà 2
Рис. 2.8. Для управления содержимым панели Library применяется меню панели
52 Ãëàâà 2
Рис. 2.9. После импорта в фильм содержимое файла появляется в его кадре
и на панели Timeline
Ðàáîòà ñ ôàéëàìè 53
1
При помощи панели Library (Библиотека) допускается не только импортировать
объекты из медиафайлов, но и создавать пользовательские объекты, называе-
мые символами (например, анимационные клипы, графику или интерактивные
кнопки).
2
Опциями импорта (например, качеством сжатия рисунка) можно управлять при
помощи диалогового окна Bitmap Properties (Свойства рисунка) (см. разд. 2.2.4).
Ðàçáèåíèå ðèñóíêà
Разбиение растрового рисунка позволит впоследствии редактировать его
средствами Flash: поменять те или иные цвета, нарисовать на нем графиче-
ские примитивы и т. д. Разбиение уменьшает объем памяти, который требу-
ется для хранения графики. Соответственно, разбиение растровых рисунков
позволяет значительно уменьшить физический размер окончательного SWF-
файла, чаще всего загружаемого через Интернет.
Для разбиения рисунка на части следует выбрать в верхнем меню команду
Modify > Break Apart (Преобразовать > Разбить). В результате (рис. 2.10)
рисунок перестает вести себя как единое целое, его фрагменты можно выде-
лить инструментом Selection (Выбор) и отредактировать. На рис. 2.11 приве-
ден пример стирания фрагментов изображения рисунка после разбиения по-
средством инструмента Eraser (Ластик).
Òðàññèðîâêà ðèñóíêà
Гораздо большие возможности по изменению рисунков, импортированных из
внешних файлов, дает их трассировка, означающая преобразование растро-
вой графики в векторный формат. Трассировка предпочтительнее простого
разбиения, поскольку открывает новые возможности для ее редактирования,
54 Ãëàâà 2
Рис. 2.12. Трассировка рисунка (слева) позволяет разбить его на области по цвету
3. Выберите в верхнем меню Modify > Bitmap > Trace Bitmap (Преобразо-
вать > Рисунок > Трассировка рисунка).
4. В открывшемся диалоговом окне Trace Bitmap (Трассировка рисунка)
(рис. 2.13) выберите опции трассировки (о них написано ниже).
1. Введите команду File > Import > Import Video (Файл > Импорт > Импорт
видео).
2. На открывшейся стартовой странице мастера Import Video (Импорт
видео) определите местоположение видеофайла (рис. 2.19). Если вы пла-
нируете один раз импортировать его и использовать затем в неизменном
виде, определите путь к файлу в верхнем поле File path (Путь к файлу).
Если видеофайл находится не на компьютере, а в сети Интернет, то опре-
делите его местоположение в поле URL (Адрес).
Нажатие в окне мастера Import Video (Импорт видео) кнопки Browse (Пролис-
тать) позволяет определить путь к файлу при помощи стандартного диалогово-
го окна открытия файла.
Рис. 2.19. Определите местоположение видеофайла в диалоговом окне мастера Import Video
Ðàáîòà ñ ôàéëàìè 61
После этого (рис. 2.23) файл появится в списке панели Library (Библиотека) и
будет вставлен в фильм (если была выбрана соответствующая опция на
4-м шаге).
мощи которых легко задать новые размеры ширины и высоты кадра. Па-
нель Trim (Подгонка) задает положение начала и конца клипа, т. е. позво-
ляет вырезать из него некоторый фрагмент, удалив ненужные кадры в на-
чале и конце клипа. Показания на панели Trim (Подгонка) изменяются
путем перетаскивания влево или вправо маркеров конца и начала, под об-
ластью предварительного просмотра клипа.
Отметим, что выбор для точки разметки типа Navigation (Для навигации) по-
зволит организовать быструю навигацию по фильму при помощи кнопок медиа-
проигрывателя, которые будут присутствовать на его панели инструментов.
Точка разметки Event (Событие) нужна для того, чтобы осуществить обработку
того или иного события при достижении данной точки видео. Эта обработка на-
страивается посредством языка программирования ActionScript, встроенного во
Flash. Также, при перекодировке видео в самой программе Flash, имеется еще
Ðàáîòà ñ ôàéëàìè 71
Çâóê
Завершим разговор об использовании мультимедиа во Flash-фильмах упоми-
нанием о возможности вставки в них аудиофрагментов. Для того чтобы изу-
чить две основные опции синхронизации звука, проделайте следующие опе-
рации.
1. Осуществите импорт во Flash какого-либо звукового файла.
2. Выделите на панели Timeline (Монтаж) слой и кадр фильма, на который
вы собираетесь вставить звуковой клип.
3. Перетащите звуковой клип из списка панели Library (Библиотека) на па-
нель Stage (Сцена).
Ðàáîòà ñ ôàéëàìè 75
Рис. 2.38. Установки публикации Flash-фильма задаются в диалоговом окне Publish Settings
Ðàáîòà ñ ôàéëàìè 79
Рис. 2.41. Документ стандарта Flash Lite, созданный при помощи Adobe Device Central
2.5. Ðåçþìå
Подведем итог, приведя в завершение главы основные сведения о форматах
файлов, которые тем или иным образом используются во Flash (табл. 2.1).
Ðàáîòà ñ ôàéëàìè 85
Êàäðû è ñëîè
Î òèïàõ êàäðîâ
Слои Flash-фильма могут включать кадры различных типов, которые по-
разному отображаются на панели Timeline (Монтаж) (рис. 3.3):
пустые промежутки, не имеющие никакой заливки, — это участки слоев,
на которых еще нет никаких кадров;
90 Ãëàâà 3
ключевые кадры:
• пустые — в виде кружков без заливки;
• заполненные — обозначаемые сплошными кружками;
обычные (промежуточные) кадры:
• пустые — обозначаемые белой заливкой фрагментов слоев;
• заполненные — обозначаемые цветной заливкой;
• последние кадры фрагмента — отмечаемые прямоугольником;
• анимация — в виде стрелки (см. главу 5).
Ôîí
На каждом слое на панели Timeline (Монтаж) можно размещать графику,
текст, анимацию, звук и т. п. Подложкой Flash-фильма является его фон. Фон
находится под самым нижним слоем и непосредственно на панели Timeline
(Монтаж) отсутствует. Для того чтобы изменить цвет фона:
1. Снимите выделение со всех объектов, если они присутствуют в фильме —
для этого достаточно щелкнуть в свободном месте кадра на панели Stage
(Сцена).
2. Раскройте панель Properties (Свойства).
3. На панели Properties (Свойства) нажмите кнопку Background (Фон).
4. Выберите новый фон фильма из появившейся палитры (рис. 3.5).
Подведем итог раздела: подложкой Flash-фильма является его фон, над кото-
рым располагаются слои. При этом, каждый слой может содержать несколько
объектов, в свою очередь, наслаивающихся в определенном порядке в преде-
лах этого слоя.
96 Ãëàâà 3
Ðåäàêòèðîâàíèå ñëîåâ
Уделим теперь некоторое внимание организации списка слоев на панели
Timeline (Монтаж). Со слоями можно осуществлять следующие основные
операции:
включение/выключение отображения содержимого слоя на кадре фильма,
а также запирание слоя (запрещение всякого редактирования) — для этого
щелчком установите на заголовке слоя соответствующий признак (пикто-
грамму с глазом или замком);
переименование — для того чтобы изменить название слоя, щелкните
дважды на его названии и введите новое в позицию появившегося курсора
ввода текста (см. рис. 3.10);
изменение порядка расположения по вертикали — для того чтобы изме-
нить позицию слоя в фильме, достаточно просто схватиться за заголовок
слоя и перетащить его вверх или вниз;
Êàäðû è ñëîè 97
1
При работе с папками принцип наложения слоев на панели Timeline (Монтаж)
сохраняется, т. е. слои, находящиеся в папках, участвуют в формировании
изображения кадра фильма, причем их место определяется расположением
папки среди остальных слоев.
98 Ãëàâà 3
2
Если вы меняете тип существующего слоя с обычного на тип Folder (Папка), то
учтите, что все содержимое слоя при этом будет потеряно.
Рис. 3.12. Атрибуты существующего слоя можно изменить в диалоговом окне Layer Properties
Рис. 3.14. Рисунок вставлен в текущий ключевой кадр фильма на слой Layer 1
102 Ãëàâà 3
Рис. 3.15. Flash-фильм состоит из трех слоев: фоновый рисунок, рисунок с НЛО
и пустой верхний слой (показан момент подгонки длительности фрагмента
с рисунком НЛО на слое UFO)
10. Перетащите ключевой кадр верхнего слоя вправо, чтобы увеличить дли-
тельность фрагмента на верхнем слое.
11. Переместите тот же фрагмент еще дальше влево, увеличив еще больше
его длительность, чтобы он перекрывался (во времени) со средним слоем.
Таким образом, для короткого промежутка времени фильма в его кадре
будет два НЛО (рис. 3.21).
12. Удалите некоторое количество кадров из фрагмента верхнего слоя. Сде-
лать это можно, выделив их и введя команду контекстного меню Remove
Frames (Удалить кадры), что полностью уберет кадры из фильма. Можно
также выделить первый из кадров и использовать команду Insert Blank
Keyframe (Вставить пустой ключевой кадр), что преобразует конец
фрагмента во фрагмент пустых кадров.
Наконец, последним действием по редактированию фильма во Flash является
его предварительный просмотр и тестирование, для которого, в частности,
может использоваться окно встроенного проигрывателя, вызываемое коман-
дой Control > Test Movie (Управление > Тестировать фильм).
3.2.1. Èíñòðóìåíòàðèé
Действия над слоями на панели Stage (Сцена) связаны, в основном, с визу-
альным методом редактирования непосредственно в кадре фильма. Для
осуществления любых операций над слоем следует выбрать подходящий
инструмент на панели Tools (Инструментарий) (рис. 3.22).
Панель Tools (Инструментарий) включает в себя несколько групп кнопок,
верхние из которых применяются для выбора инструментов, а нижние — для
задания рабочих цветов и соответствующих опций работы. Содержимое двух
последних групп является контекстно-зависимым, т. е., исходя из того, какой
именно инструмент выбран, они предлагают пользователю цвета и режимы
работы, которые предусмотрены для этого инструмента.
Перечислим инструменты, имеющиеся на панели Tools (Инструментарий),
учитывая, что некоторые из них совмещены в общих кнопках (и для того,
чтобы выбрать скрытый инструмент, следует нажать и удерживать такую
кнопку до появления подменю).
108 Ãëàâà 3
Еще одна панель, которая служит для настройки цвета, — это панель
Swatches (Образцы цветов). С ее помощью удобно выбирать стандартные
цвета из ограниченного набора недавно использовавшихся цветов (рис. 3.23).
Для того чтобы поменять цвет заливки или обрамления объекта на слое, не-
обходимо его выделить на панелях Timeline (Монтаж) и Stage (Сцена) и за-
тем определить соответствующие цвета на панели Color (Цвет) (рис. 3.24).
Ðèñîâàíèå
Рис. 4.7. Выбор цвета заливки из набора цветов Рис. 4.8. Линия обрамления выключена
4.2. Ðèñîâàíèå
Рассмотрим теперь, как во Flash осуществляется рисование графических
примитивов при помощи различных инструментов, выбираемых на панели
Tools (Инструментарий).
4.2.1. Êàðàíäàø
Применение инструмента Pencil (Карандаш) очень похоже на рисование
сплошных или прерывистых линий "от руки", подобно тому, как принято пи-
сать настоящим карандашом на листе бумаги. При нажатой кнопке мыши ка-
рандаш рисует на выделенном слое линию, перемещаясь за указателем, а при
отпускании кнопки мыши рисование линии прерывается. Цвет и стиль линий
выбирается, как обычно, на панели Properties (Свойства).
Рисование карандашом предусматривает три разных режима, задаваемых на
панели Tools (Инструментарий) в нижней области Options (Опции) (рис. 4.11):
Straighten (Прямые) — для рисования прямыми линиями (спрямление на-
рисованных фрагментов производится автоматически);
Ðèñîâàíèå 131
4.2.2. Êèñòü
Рисование инструментом Brush (Кисть) похоже на рисование карандашом и
применяется, к примеру, для каллиграфического письма на слоях Flash-
фильма (рис. 4.15). В частности, принцип рисования ("от руки") остается тем
же, и на панели Properties (Свойства) можно задать значение параметра
Smoothing (Сглаживание).
4.2.3. Ëàñòèê
Для быстрого стирания существующих объектов (фактически, для рисования
невидимых линий, уничтожающих содержимое кадра) предназначен инстру-
мент Eraser (Ластик). Перед тем как его использовать, следует в нижней
части панели Tools (Инструментарий) выбрать "наконечник ластика" (анало-
гично использованию "наконечника кисти", показанному на рис. 4.16) и же-
лаемый режим стирания (рис. 4.17):
Erase Normal (Обычное стирание) — стирает и заливку, и обрамление;
Erase Fills (Стирание заливки) — стирает только заливку объектов;
Erase Lines (Стирание обрамления) — стирает только линии обрамления;
Erase Selected Fills (Стирание выделенной заливки) — стирает только
предварительно выделенную заливку объектов (не трогая их обрамление,
вне зависимости от того, выделено оно или нет);
134 Ãëàâà 4
4.2.6. Ïåðî
Во Flash 9 опция рисования кривых в форме кривых Безье реализована при
помощи группы инструментов Pen (Перо) (рис. 4.25), служащих для точного
рисования линий по отрезкам, которые могут быть как отрезками прямых, так
и кривых. В основе работы этого инструмента лежит повсеместно распро-
страненный в компьютерной графике алгоритм Безье. Кривые Безье — это
кривые, состоящие из отдельных участков, отделенных друг от друга управ-
ляющими маркерами или, по-другому, точками привязки (anchor point), кото-
рые можно, в свою очередь, редактировать при помощи управляющих линий.
Кривые Безье, подобно другим объектам, могут иметь не только линию об-
рамления, но и заливку.
Рисование сглаженных сегментов заключается в определении вершин кривой
нажатием кнопки мыши и последующем удерживании ее в нажатом состоя-
нии. Через небольшой промежуток времени после нажатия на экране возни-
кают так называемые управляющие линии, перетаскивая вершины которых
мышью можно добиться желаемой формы сегмента (рис. 4.26).
Кривые Безье рассчитываются исходя из перемещения пользователем марке-
ров и управляющих линий по сцене, по весьма сложным математическим ал-
горитмам. При работе с кривыми Безье гораздо важнее представлять, хотя бы
на интуитивном уровне, как действия пользователя будут влиять на форму
Ðèñîâàíèå 139
Рис. 4.34. Выбор оттенков основных цветов Рис. 4.35. Выберите инструмент Gradient
градиентной заливки Transform
4.3. Òåêñò
Принцип работы с текстом во Flash не очень сильно отличается от After
Effects, поэтому рассмотрим коротко основные моменты редактирования тек-
ста, обратив внимание читателя на нестандартные приемы (например, созда-
ние текста с прокруткой и полей ввода текста).
Рис. 4.45. Создание текста при помощи инструмента Text и панели Properties
Рис. 4.50. Просмотр фильма: для текста UFO был установлен признак Selectable
Àíèìàöèÿ
5.3. Ñèìâîëû
Символами (symbol) называются объекты, создаваемые из графики, анимации
и интерактивных элементов, непосредственно в программе Flash. Конечно,
Flash-фильмы можно создавать и не прибегая к промежуточным действиям
по подготовке символов (как, собственно говоря, мы поступали почти всегда
до сих пор, рассказывая о работе во Flash). Однако использование символов
Àíèìàöèÿ 179
Очень важно иметь в виду, что описанный способ предназначен для создания
символа, длительность которого составляет всего один кадр. Соответственно,
в расчет принимаются только объекты, выделенные на текущем кадре филь-
ма, независимо от их динамики относительно линейки времени на панели
Timeline (Монтаж). Если сравнить содержимое панели Timeline (Монтаж)
рис. 5.34 и 5.35, то вы заметите изменения, произошедшие с фильмом в его
временной части.
5.3.7. Ôèëüòðû
Завершим рассказ о кнопках упоминанием о мощном средстве их редактиро-
вания, имеющемся во Flash. Речь идет о фильтрах (filter) — характерных
спецэффектах, которые применяются для форматирования объектов в филь-
ме. Прежде всего, отметим, что фильтры допускается назначать только неко-
торым типам объектов:
символам типа "кнопка";
символам — анимационным клипам;
текстовым объектам.
Для того чтобы применить фильтр кнопке (либо иному из перечисленных
объектов):
1. Выделите объект в кадре фильма.
2. Откройте панель Filters (Фильтры), которая обычно совмещена с панелью
Properties (Свойства), под кадром фильма.
3. Нажмите кнопку Add Filter (Добавить фильтр) с изображением знака "+"
на панели Filters (Фильтры) (рис. 5.45).
4. В раскрывшемся меню выберите желаемый фильтр (рис. 5.45).
190 Ãëàâà 5
Èíòåðàêòèâíîñòü (Flash)
ных для мобильных устройств), что бросается в глаза в самом начале работы,
при создании нового Flash-фильма (рис. 6.2):
ActionScript 2.0 — язык, совместимый с прежней версией Flash 8;
ActionScript 3.0 — новый язык, несовместимый с прошлыми версиями.
6.2. Êíîïêè
Для придания Flash-фильмам интерактивности предусмотрено универсальное
средство, называемое кнопками (button). В первую очередь, необходимо под-
черкнуть, что кнопка, по определению, является символом. Поэтому все ска-
занное о символах (см. разд. 5.4) будет в полной мере относиться и к кноп-
кам. Между тем, символы-кнопки имеют ряд отличий от остальных типов
символов (графических и анимационных), связанные, прежде всего, с самим
их назначением, т. е. средством обеспечения интерактивности. Это связано,
во-первых, с тем, что каждая кнопка может иметь три различных представле-
ния, меняющихся в зависимости от действий зрителя Flash-фильма (а именно
при наведении на нее указателя мыши и в момент нажатия, как это показано
на рис. 6.3). Во-вторых, предусматривается определенная разметка кнопки,
которая позволяет отслеживать действия зрителя (например, момент нажатия
или отпускания кнопки мыши).
Выполним несколько простых действий по добавлению во Flash-фильм новой
кнопки, а затем настроим для нее программу отклика на действия зрителя
(см. разд. 6.3 и 6.4 — для двух версий языка ActionScript). Для создания кноп-
ки надо действовать следующим образом.
1. Выберите в меню панели Library (Библиотека) или в контекстном меню,
вызывая его из пустой области этой панели, пункт New Symbol (Создать
символ).
2. В диалоговом окне Create New Symbol (Создать новый символ) выберите
тип Button (Кнопка), определите название кнопки и нажмите кнопку ОК.
Обратите внимание, что вновь созданная кнопка является пустой, о чем
196 Ãëàâà 6
1
Кнопку, как и любой символ, можно создать путем преобразования объектов,
расположенных на кадре фильма, в символ, как это показано на рис. 6.4.
2
Переименовать кнопку на панели Library (Библиотека) можно уже и после ее
создания.
В заключение добавим код для последнего кадра сцены с НЛО, сделав так,
чтобы действие при его достижении останавливалось. Для этого следует по-
вторить описанные действия, только применительно к соответствующему
ключевому кадру следующей сцены (рис. 6.19). Отметим, что для реализации
останова фильма можно выбрать переход не на кадр сцены с некоторым но-
мером, а на предыдущий кадр сцены, для чего на панели Script Assist (Разра-
ботка сценария) следует выбрать в раскрывающемся списке Type (Тип) пункт
Previous Frame (Предыдущий кадр). Соответственно, функцией языка
ActionScript, которая будет добавлена выделенному кадру на панели кода,
станет функция prevFrame() (рис. 6.19).
Рис. 6.20. Начало разработки сценария для обработки события (нажатия кнопки)
Èíòåðàêòèâíîñòü (Flash) 209
7. Для того чтобы задать действие, которое будет происходить при просмот-
ре Flash-фильма при нажатии кнопки, введите еще одну функцию на пане-
ли Actions (Действия). Для этого нажмите кнопку Add (Добавить) и выбе-
рите в появившемся меню Global Functions > Timeline Control > GoTo
(Глобальные функции > Управление Монтажным столом > Перейти).
8. В верхней половине панели Actions (Действия) настройте параметры пе-
рехода: определите его тип, на этот раз Go To and Play (Перейти и проиг-
рать), а также сцену, на которую должно "перепрыгнуть" действие, и но-
мер кадра в пределах этой сцены (рис. 6.21).
Рис. 6.21. Добавьте еще один сценарий — обработки события нажатия кнопки
6.3.4. Îòëàäêà
Теперь нехитрая программа обработки нажатия кнопки готова, и можно при-
ступить к ее отладке. Для этого выберите в верхнем меню команду Control >
Test Movie (Управление > Тестировать фильм), либо команду File > Publish
Preview > Flash (Файл > Опубликовать предварительно > во Flash). После
короткого времени компиляции фильма он откроется для просмотра в от-
дельном окне (рис. 6.22).
Как и следовало ожидать, фильм состоит из последовательной демонстрации
трех сцен (с кнопкой — с НЛО — с ракетой). Нажатие (в течение первой сце-
ны фильма) кнопки UFO, в соответствии с разработанным сценарием, пере-
водит действие на начало второй сцены.
210 Ãëàâà 6
Помните о том, что при создании нового документа следует выбрать версию
языка программирования — в нашем случае, ActionScript 3.0.
тие "нажатие кнопки UFO — переход на сцену 2" и событие "нажатие кноп-
ки Rocket — переход на сцену 3", будет помещен в блок, относящийся к пер-
вому кадру слоя Layer 1.
3. Настройте код для первого слоя кадра Layer 1, который будет останавли-
вать действие фильма. Для этого введите с клавиатуры в поле кода на па-
нели Actions (Действия) имя функции, завершающееся знаком точки с за-
пятой: stop();.
4. Выберите в верхнем меню Control > Test Movie (Управление > Тестиро-
вать фильм), чтобы убедиться в том, что демонстрироваться будет только
первая сцена фильма (с кнопками).
5. Для того чтобы задать соответствующий идентификатор для кнопки, от-
кройте панель Properties (Свойства).
6. Выделите кнопку UFO на панели Stage (Сцена).
7. В поле Instance name (Поле экземпляра) на панели Properties (Свойства)
введите соответствующее имя кнопки (например, UFO_button для первой
кнопки UFO).
8. Аналогичным образом выделите вторую кнопку Rocket и назовите ее
R_button. Эти имена в дальнейшем будет необходимо использовать для
программирования в языке ActionScript 3.0.
9. Запрограммируйте действие, реализуемое при нажатии кнопки UFO, введя
на панели Actions (Действия) после функции stop(); следующий код
(рис. 6.27):
function startUFO(event:MouseEvent):void
{
this.gotoAndPlay(1,"Scene 2");
}
В заключение обратим ваше внимание на то, что язык ActionScript 3.0 вряд
ли, в полном смысле слова, можно назвать развитием версии ActionScript 2.0.
Фактически это новый язык, который необходим для того, чтобы программы,
разрабатываемые во Flash, стали более объектно-ориентированными. Навер-
но, поэтому разработчики Flash оставили два стандарта файлов в языке
Èíòåðàêòèâíîñòü (Flash) 217
ActionScript 2.0 и в языке ActionScript 3.0. Язык ActionScript 3.0 дает новые
возможности по динамическому (в реальном времени фильма) созданию но-
вых объектов. С помощью этого языка профессиональным программистам
легче реализовывать те сценарии, которые было невозможно (или трудно)
реализовать в языке ActionScript 2.0. Поэтому реалистичен прогноз, что
некоторое, довольно продолжительное, время два языка — ActionScript 2.0 и
ActionScript 3.0 — будут сосуществовать и в следующих версиях программы
Flash.
Рис. 6.30. Объект (кнопка UFO) на панели Library и его экземпляр на панели Stage
7. Выберите в верхнем меню Control > Test Movie (Управление > Тестиро-
вать фильм).
8. Протестируйте фильм, нажимая по очереди ту или иную кнопку и наблю-
дая, как будет изменяться текст в текстовом блоке (рис. 6.33).
Таким образом, вы видите, что доступ к свойствам объектов имеет следую-
щую структуру: <имя экземпляра объекта > .<свойство > . В рассмотрен-
ном примере исходным объектом является текстовый блок (встроенный объ-
ект Flash, его экземпляром — объект status, а свойством — содержимое бло-
ка, т. е. находящийся в нем текст).
В качестве примера программирования метода можно привести несколько
раз использовавшийся в фильме вызов процедуры gotoAndPlay(), которая
Èíòåðàêòèâíîñòü (Flash) 219
Рис. 6.31. Создайте в фильме динамический текст и дайте ему уникальное имя
Чтобы принцип действия шаблона Quiz (Опрос) был более понятным, сохра-
ните документ при помощи команды File > Save (Файл > Сохранить), а затем
осуществите его предварительный просмотр, для чего в верхнем меню
Control (Управление) выберите пункт Test Movie (Тестировать фильм). По-
сле небольшого времени экспорта Flash-фильм откроется в окне проигрыва-
224 Ãëàâà 6
Рис. 6.41. Настройка опций компонента теста при помощи панели Component Inspector
A E
ActionScript 16, 193 Edit in place 184
Adobe Device Central 79 Eraser 109, 133
Adobe Flash Video Encoder 64 Event 17, 219
Align 119, 120 Eyedropper 109, 141
Anchor point 117
F
B Fill 127
Betweening 14 Filter 189
Flash Lite 19, 79
Bitmap 11
Flash Player 18, 85
Break Apart 148
Frame 14, 100
Bring to Front 95 Frame based selection 99
Brush 132
Button 17, 179, 195
G
C Go To and Play 209
Gradient Transform 144
Cap 129 Graphic 179
Color Mixer 110
Convert Lines to Fills 145
Current-time indicator 28 H
Hand 109
D History 26, 120, 121
Hit 197
Data rate 67
Digital Video 65 I
Distribute 120
Down 200 Info 26
DV 65 Ink Bottle 141
Dynamic text 149 Input Text 149, 155
232 Ïðåäìåòíûé óêàçàòåëü
J Resize video 68
Rotate 162
Join 129
S
K Scene 30
Keyframe 90, 100 Script Assist 208
Selection 108, 113, 114, 115, 148
L Send Backward 95
Shape tweening 158
Layer 88 ShockWave Flash 18
Library 24 Shortcuts 26
Listener 215 Smoothing 131
Loop 41 Snap 126
Span based selection 99
M Stage 25
Star 138
Menu 26 Static text 149
Merge drawing 13 Stream 75
Monitor 25 Stroke 127
Motion guide 172 SWF-файл 19
Motion tweening 158 Sync 75
Movie clip 179
MP3 67
Multiline 156
T
Tab 87
O Text 153
Time ruler 27
Object drawing 13 Timecode 88
Oval 135 Timeline 24, 25, 30, 87, 88
Over 200 Tools 25, 123
Tweening 14, 157
P
U
Paint Bucket 141
Pen 138 Undo 120
Pencil 130 Up 200
Play 42
Polygon 138
Polystar 109
V
Properties 137 Vector 11
Q W
Que point 69 Web 9
Quiz 221 Workspace 31
R Z
Registration point 181 Zoom 109
Ïðåäìåòíûé óêàçàòåëü 233
А И
Альфа-канал 93 Импорт 49, 50, 52
Анимационный символ 186 ◊ видео 59
Анимация: Индикатор текущего кадра 28
◊ вращения 162
Инструментарий 25, 123
◊ движения 158
Интерактивность 16
◊ формы 158, 163
Интернет 9
Аудиоклип 76
Б К
Библиотека 24 Кадр 14
Карандаш 130
В Кисть 132
Клип 179
Векторная графика 11 Ключевой кадр 100
Вложенная анимация 186 Ключевые кадры 14, 90
Временная шкала 27 Кнопка 179
Вставка объекта в фильм 111
Кнопки 195
Выбор 108, 113, 148
Выравнивание 119 Кодек 66
Кодировщик Flash-видео 64
Кольцо 137
Г Края линии 129
Горячие клавиши 26 Кривые Безье 138
Градиент 142
◊ цвета 110
Графический символ 179 Л
Лассо 108, 113
Д Ластик 109, 133
Линейка времени 27
Динамический текст 149
Документ: Линия 135
◊ создание 47 ◊ редактирования 29
◊ сохранение 45 Листенер 215, 219
Ж М
Журнал 26, 121 Масштаб 109
Масштабирование 115
З Меню 26
◊ контекстное 26
Закладка фильма 87
Заливка 127, 141 ◊ окна 26
Замена рисунка 59 Методы 221
Звезда 138 Многоугольник 138
Звук 74 Монитор 25
Зритель фильма 86 Монтажный стол 25, 87
234 Ïðåäìåòíûé óêàçàòåëü
Р Т
Рабочая область 31 Таймкод текущего кадра 88
Разбиение: Текст 153
◊ объекта 146 Текстовый блок 149
◊ рисунка 53 Текущий кадр 28
Ïðåäìåòíûé óêàçàòåëü 235
Точка: Ч
◊ разметки 69
◊ привязки 117 Частота кадров 14
Траектория 172
Трассировка рисунка 53 Ш
Шаблон 47, 221
У Шкала времени 27, 29, 88
Шлейф 177
Удаление слоя 97
Э
Ф Экземпляр символа 182
Экспорт 33, 76
Фильтр 189
Фон 92 ◊ фильма 76
Эмулятор устройства 83
Функции 209
Эффекты панели Монтажа 166