Вы находитесь на странице: 1из 235

Äìèòðèé Êèðüÿíîâ

Åëåíà Êèðüÿíîâà

Ñàíêò-Ïåòåðáóðã
«ÁÕÂ-Ïåòåðáóðã»
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

Группа подготовки издания:


Главный редактор Екатерина Кондукова
Зам. главного редактора Наталья Таркова
Зав. редакцией Григорий Добин
Редактор Игорь Цырульников
Компьютерная верстка Ольги Сергиенко
Корректор Зинаида Дмитриева
Дизайн обложки Инны Тачиной
Зав. производством Николай Тверских

Ëèöåíçèÿ ÈÄ ¹ 02429 îò 24.07.00. Ïîäïèñàíî â ïå÷àòü 20.09.07.


Ôîðìàò 70×1001/16. Ïå÷àòü îôñåòíàÿ. Óñë. ïå÷. ë. 19,35.
Òèðàæ 3000 ýêç. Çàêàç ¹
"ÁÕÂ-Ïåòåðáóðã", 194354, Ñàíêò-Ïåòåðáóðã, óë. Åñåíèíà, 5Á.
Ñàíèòàðíî-ýïèäåìèîëîãè÷åñêîå çàêëþ÷åíèå íà ïðîäóêöèþ
¹ 77.99.02.953.Ä.006421.11.04 îò 11.11.2004 ã. âûäàíî Ôåäåðàëüíîé ñëóæáîé
ïî íàäçîðó â ñôåðå çàùèòû ïðàâ ïîòðåáèòåëåé è áëàãîïîëó÷èÿ ÷åëîâåêà.
Îòïå÷àòàíî ñ ãîòîâûõ äèàïîçèòèâîâ
â ÃÓÏ "Òèïîãðàôèÿ "Íàóêà"
199034, Ñàíêò-Ïåòåðáóðã, 9 ëèíèÿ, 12

ISBN 978-5-9775-0044-9 © Кирьянов Д. В., Кирьянова Е. Н., 2008


© Оформление, издательство "БХВ-Петербург", 2008
Îãëàâëåíèå

Введение .................................................................................................................. 7

Глава 1. Знакомство с Flash ................................................................................ 9


1.1. Знакомство с Flash ........................................................................................................ 9
1.1.1. Что такое Flash .................................................................................................... 9
1.1.2. Графика .............................................................................................................. 10
1.1.3. Анимация ........................................................................................................... 14
1.1.4. Интерактивность ............................................................................................... 16
1.1.5. Как можно просматривать Flash-фильмы? ..................................................... 18
1.1.6. О версиях Flash ................................................................................................. 20
1.2. Интерфейс Flash .......................................................................................................... 21
1.2.1. Первый запуск Flash ......................................................................................... 21
1.2.2. Основные элементы интерфейса ..................................................................... 23
1.2.3. Сцена (Stage) и панель Монтажа (Timeline).................................................... 27
1.2.4. Компоновка фильма по сценам ....................................................................... 30
1.2.5. О быстрой настройке рабочей области ........................................................... 31
1.2.6. Общий порядок редактирования фильмов ..................................................... 32
1.3. Монтаж простого фильма........................................................................................... 33
1.3.1. Создание нового фильма и импорт графики .................................................. 33
1.3.2. Расположение графики на слоях фильма ........................................................ 36
1.3.3. Настройка анимации ......................................................................................... 38
1.3.4. Предварительный просмотр фильма ............................................................... 41

Глава 2. Работа с файлами ................................................................................ 45


2.1. Управление файлами документов.............................................................................. 45
2.1.1. Открытие и сохранение файлов ....................................................................... 45
2.1.2. Создание новых фильмов ................................................................................. 47
2.1.3. Одновременное редактирование нескольких фильмов ................................. 47
4 Îãëàâëåíèå

2.2. Импорт ......................................................................................................................... 49


2.2.1. Библиотека Flash ............................................................................................... 50
2.2.2. Обычный импорт .............................................................................................. 52
2.2.3. Предварительная обработка растровой графики ........................................... 53
Разбиение рисунка ............................................................................................ 53
Трассировка рисунка ........................................................................................ 53
Преобразование графики в символы ............................................................... 58
2.2.4. Обновление и замена графики ......................................................................... 59
2.2.5. Импорт видео .................................................................................................... 59
2.2.6. Подготовка видео при помощи Adobe Flash Video Encoder.......................... 64
2.2.7. Особенности вставки в фильм видео и звука ................................................. 72
Независимое использование видеоклипа........................................................ 72
Синхронизация видеоклипа со шкалой времени............................................ 73
Звук .................................................................................................................... 74
2.3. Экспорт фильма .......................................................................................................... 76
2.4. Документы Flash Lite (для мобильных устройств) ................................................... 79
2.5. Резюме ......................................................................................................................... 84

Глава 3. Кадры и слои ........................................................................................ 87


3.1. Компоновка фильма на панелях Timeline и Stage..................................................... 87
3.1.1. Строение панели Timeline ................................................................................ 87
3.1.2. Кадры фильма вдоль линейки времени........................................................... 89
О типах кадров .................................................................................................. 89
Расположение кадров друг за другом ............................................................. 91
3.1.3. Принципы компоновки фильма по слоям ....................................................... 92
Фон ..................................................................................................................... 92
Наложение слоев друг на друга ....................................................................... 93
Наложение объектов в пределах слоя ............................................................. 94
3.1.4. Действия со слоями .......................................................................................... 96
Создание нового слоя ....................................................................................... 96
Редактирование слоев ....................................................................................... 96
Добавление объекта на слой ............................................................................ 99
3.1.5. Действия с кадрами слоя .................................................................................. 99
3.1.6. Попробуем сами: слои и кадры на панели Timeline ..................................... 100
3.2. Редактирование объектов на слоях.......................................................................... 107
3.2.1. Инструментарий .............................................................................................. 107
3.2.2. Микшер цветов ............................................................................................... 110
3.2.3. Вставка объектов в фильм.............................................................................. 111
3.2.4. Выделение, перемещение и удаление объектов ........................................... 113
3.2.5. Масштабирование, сдвиги и повороты ......................................................... 115
3.2.6. Выравнивание и расположение ..................................................................... 119
3.2.7. Отмена нежелательных действий .................................................................. 120

Глава 4. Рисование ............................................................................................ 123


4.1. Режимы рисования .................................................................................................... 123
4.1.1. Рисование объектов ........................................................................................ 124
Îãëàâëåíèå 5

4.1.2. Режим притяжения.......................................................................................... 126


4.1.3. Цвет обрамления и заливки............................................................................ 126
4.1.4. Стиль обрамления ........................................................................................... 128
4.1.5. Края линии....................................................................................................... 129
4.2. Рисование................................................................................................................... 130
4.2.1. Карандаш ......................................................................................................... 130
4.2.2. Кисть ................................................................................................................ 132
4.2.3. Ластик .............................................................................................................. 133
4.2.4. Линия, эллипс, прямоугольник ...................................................................... 134
4.2.5. Многоугольник и звезда ................................................................................. 137
4.2.6. Перо ................................................................................................................. 138
4.2.7. Цвет обрамления и заливки............................................................................ 141
4.2.8. Создание цветовых градиентов ..................................................................... 142
4.2.9. О редактировании графики ............................................................................ 145
4.3. Текст ........................................................................................................................... 149
4.3.1. Типы текста ..................................................................................................... 149
4.3.2. Создание текста............................................................................................... 150
4.3.3. Редактирование текста ................................................................................... 153
4.3.4. Поля ввода ....................................................................................................... 155

Глава 5. Анимация ............................................................................................ 157


5.1. Назначение анимации слою ..................................................................................... 157
5.1.1. О типах анимации ........................................................................................... 157
5.1.2. Анимация движения ....................................................................................... 159
5.1.3. Анимация формы ............................................................................................ 163
5.1.4. Эффекты панели Монтажа ............................................................................. 166
5.1.5. Покадровая анимация ..................................................................................... 170
5.2. Траектория движения ............................................................................................... 172
5.3. Символы..................................................................................................................... 178
5.3.1. Типы символов ................................................................................................ 179
5.3.2. Создание символов ......................................................................................... 179
Создание пустого символа ............................................................................. 179
Создание символа из фрагмента фильма ...................................................... 180
5.3.3. Вставка символов в фильм ............................................................................. 182
5.3.4. Редактирование символов .............................................................................. 182
5.3.5. Создание анимационного символа из фрагмента фильма ........................... 186
5.3.6. Вложенная анимация ...................................................................................... 186
5.3.7. Фильтры ........................................................................................................... 189

Глава 6. Интерактивность (Flash) ................................................................. 193


6.1. О настройке интерактивности .................................................................................. 193
6.2. Кнопки ....................................................................................................................... 195
6.3. ActionScript 2.0 .......................................................................................................... 201
6.3.1. Постановка задачи для сценария ................................................................... 202
6 Îãëàâëåíèå

6.3.2. Создание кода для кадров фильма ................................................................ 203


6.3.3. Программирование кнопки ............................................................................ 208
6.3.4. Отладка ............................................................................................................ 209
6.4. ActionScript 3.0 .......................................................................................................... 212
6.5. О принципах объектно-ориентированного программирования ............................ 217
6.6. Программирование компонентов: Flash-тесты ....................................................... 221
6.6.1. Шаблон Quiz .................................................................................................... 221
6.6.2. Настройка собственных Flash-тестов ............................................................ 225

Предметный указатель .................................................................................... 231


Îãëàâëåíèå

Введение .................................................................................................................. 7

Глава 1. Знакомство с Flash ................................................................................ 9


1.1. Знакомство с Flash ........................................................................................................ 9
1.1.1. Что такое Flash .................................................................................................... 9
1.1.2. Графика .............................................................................................................. 10
1.1.3. Анимация ........................................................................................................... 14
1.1.4. Интерактивность ............................................................................................... 16
1.1.5. Как можно просматривать Flash-фильмы? ..................................................... 18
1.1.6. О версиях Flash ................................................................................................. 20
1.2. Интерфейс Flash .......................................................................................................... 21
1.2.1. Первый запуск Flash ......................................................................................... 21
1.2.2. Основные элементы интерфейса ..................................................................... 23
1.2.3. Сцена (Stage) и панель Монтажа (Timeline).................................................... 27
1.2.4. Компоновка фильма по сценам ....................................................................... 30
1.2.5. О быстрой настройке рабочей области ........................................................... 31
1.2.6. Общий порядок редактирования фильмов ..................................................... 32
1.3. Монтаж простого фильма........................................................................................... 33
1.3.1. Создание нового фильма и импорт графики .................................................. 33
1.3.2. Расположение графики на слоях фильма ........................................................ 36
1.3.3. Настройка анимации ......................................................................................... 38
1.3.4. Предварительный просмотр фильма ............................................................... 41

Глава 2. Работа с файлами ................................................................................ 45


2.1. Управление файлами документов.............................................................................. 45
2.1.1. Открытие и сохранение файлов ....................................................................... 45
2.1.2. Создание новых фильмов ................................................................................. 47
2.1.3. Одновременное редактирование нескольких фильмов ................................. 47
4 Îãëàâëåíèå

2.2. Импорт ......................................................................................................................... 49


2.2.1. Библиотека Flash ............................................................................................... 50
2.2.2. Обычный импорт .............................................................................................. 52
2.2.3. Предварительная обработка растровой графики ........................................... 53
Разбиение рисунка ............................................................................................ 53
Трассировка рисунка ........................................................................................ 53
Преобразование графики в символы ............................................................... 58
2.2.4. Обновление и замена графики ......................................................................... 59
2.2.5. Импорт видео .................................................................................................... 59
2.2.6. Подготовка видео при помощи Adobe Flash Video Encoder.......................... 64
2.2.7. Особенности вставки в фильм видео и звука ................................................. 72
Независимое использование видеоклипа........................................................ 72
Синхронизация видеоклипа со шкалой времени............................................ 73
Звук .................................................................................................................... 74
2.3. Экспорт фильма .......................................................................................................... 76
2.4. Документы Flash Lite (для мобильных устройств) ................................................... 79
2.5. Резюме ......................................................................................................................... 84

Глава 3. Кадры и слои ........................................................................................ 87


3.1. Компоновка фильма на панелях Timeline и Stage..................................................... 87
3.1.1. Строение панели Timeline ................................................................................ 87
3.1.2. Кадры фильма вдоль линейки времени........................................................... 89
О типах кадров .................................................................................................. 89
Расположение кадров друг за другом ............................................................. 91
3.1.3. Принципы компоновки фильма по слоям ....................................................... 92
Фон ..................................................................................................................... 92
Наложение слоев друг на друга ....................................................................... 93
Наложение объектов в пределах слоя ............................................................. 94
3.1.4. Действия со слоями .......................................................................................... 96
Создание нового слоя ....................................................................................... 96
Редактирование слоев ....................................................................................... 96
Добавление объекта на слой ............................................................................ 99
3.1.5. Действия с кадрами слоя .................................................................................. 99
3.1.6. Попробуем сами: слои и кадры на панели Timeline ..................................... 100
3.2. Редактирование объектов на слоях.......................................................................... 107
3.2.1. Инструментарий .............................................................................................. 107
3.2.2. Микшер цветов ............................................................................................... 110
3.2.3. Вставка объектов в фильм.............................................................................. 111
3.2.4. Выделение, перемещение и удаление объектов ........................................... 113
3.2.5. Масштабирование, сдвиги и повороты ......................................................... 115
3.2.6. Выравнивание и расположение ..................................................................... 119
3.2.7. Отмена нежелательных действий .................................................................. 120

Глава 4. Рисование ............................................................................................ 123


4.1. Режимы рисования .................................................................................................... 123
4.1.1. Рисование объектов ........................................................................................ 124
Îãëàâëåíèå 5

4.1.2. Режим притяжения.......................................................................................... 126


4.1.3. Цвет обрамления и заливки............................................................................ 126
4.1.4. Стиль обрамления ........................................................................................... 128
4.1.5. Края линии....................................................................................................... 129
4.2. Рисование................................................................................................................... 130
4.2.1. Карандаш ......................................................................................................... 130
4.2.2. Кисть ................................................................................................................ 132
4.2.3. Ластик .............................................................................................................. 133
4.2.4. Линия, эллипс, прямоугольник ...................................................................... 134
4.2.5. Многоугольник и звезда ................................................................................. 137
4.2.6. Перо ................................................................................................................. 138
4.2.7. Цвет обрамления и заливки............................................................................ 141
4.2.8. Создание цветовых градиентов ..................................................................... 142
4.2.9. О редактировании графики ............................................................................ 145
4.3. Текст ........................................................................................................................... 149
4.3.1. Типы текста ..................................................................................................... 149
4.3.2. Создание текста............................................................................................... 150
4.3.3. Редактирование текста ................................................................................... 153
4.3.4. Поля ввода ....................................................................................................... 155

Глава 5. Анимация ............................................................................................ 157


5.1. Назначение анимации слою ..................................................................................... 157
5.1.1. О типах анимации ........................................................................................... 157
5.1.2. Анимация движения ....................................................................................... 159
5.1.3. Анимация формы ............................................................................................ 163
5.1.4. Эффекты панели Монтажа ............................................................................. 166
5.1.5. Покадровая анимация ..................................................................................... 170
5.2. Траектория движения ............................................................................................... 172
5.3. Символы..................................................................................................................... 178
5.3.1. Типы символов ................................................................................................ 179
5.3.2. Создание символов ......................................................................................... 179
Создание пустого символа ............................................................................. 179
Создание символа из фрагмента фильма ...................................................... 180
5.3.3. Вставка символов в фильм ............................................................................. 182
5.3.4. Редактирование символов .............................................................................. 182
5.3.5. Создание анимационного символа из фрагмента фильма ........................... 186
5.3.6. Вложенная анимация ...................................................................................... 186
5.3.7. Фильтры ........................................................................................................... 189

Глава 6. Интерактивность (Flash) ................................................................. 193


6.1. О настройке интерактивности .................................................................................. 193
6.2. Кнопки ....................................................................................................................... 195
6.3. ActionScript 2.0 .......................................................................................................... 201
6.3.1. Постановка задачи для сценария ................................................................... 202
6 Îãëàâëåíèå

6.3.2. Создание кода для кадров фильма ................................................................ 203


6.3.3. Программирование кнопки ............................................................................ 208
6.3.4. Отладка ............................................................................................................ 209
6.4. ActionScript 3.0 .......................................................................................................... 212
6.5. О принципах объектно-ориентированного программирования ............................ 217
6.6. Программирование компонентов: Flash-тесты ....................................................... 221
6.6.1. Шаблон Quiz .................................................................................................... 221
6.6.2. Настройка собственных Flash-тестов ............................................................ 225

Предметный указатель .................................................................................... 231


ÃËÀÂÀ 1

Çíàêîìñòâî ñ Flash

Вводная глава посвящена, главным образом, первому знакомству с програм-


мой Flash. Мы начинаем с самых общих понятий, связанных с компьютерной
графикой и анимацией, а также Web-программированием (см. разд. 1.1) и
рассмотрением основных элементов интерфейса и принципов функциониро-
вания Flash (см. разд. 1.2). Завершается глава изложением последовательно-
сти действий по монтажу простого фильма во Flash (см. разд. 1.3), а также
обзору опций предварительного просмотра Flash-фильмов (см. разд. 1.3.4).

1.1. Çíàêîìñòâî ñ Flash


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

1.1.1. ×òî òàêîå Flash


Adobe Flash — это редактор, предназначенный для создания компьютерной
анимации и интерактивных фильмов, в первую очередь, для загрузки через
Интернет. Благодаря тому, что проигрыватели Flash-фильмов встроены прак-
тически во все основные браузеры (рис. 1.1), формат Flash, фактически, стал
стандартом анимации для Web. Однако не следует забывать, что эта про-
грамма годится и для создания самостоятельных приложений, примером
одного из которых является видеокурс, прилагаемый к этой книге.
Немного упрощая суть вопроса (что, впрочем, хорошо укладывается в рамки
этой книги), можно представить редактор Flash в виде совокупности сле-
дующих средств разработки:
10 Ãëàâà 1

 редактор анимации;
 язык программирования (предназначенный для настройки интерактив-
ности);
 встроенный графический редактор.

Рис. 1.1. Flash-фильм (открыт в окне браузера) сочетает анимацию и интерактивные элементы

Соответственно, Flash "умеет" работать со всеми базовыми типами мульти-


медиа, среди которых (рис. 1.2):
 графика (растровая и векторная);
 видео и звук;
 интерактивные элементы.
В этой и следующих главах книги мы последовательно рассмотрим основные
приемы работы с каждым из типов мультимедиа во Flash.

1.1.2. Ãðàôèêà
Обратимся к базовым понятиям хранения графической информации (попро-
сту говоря, рисунков) на компьютерах.
Çíàêîìñòâî ñ Flash 11

Рис. 1.2. Типы мультимедиа

Отметим, что графику можно разделить на два класса:


 растровая;
 векторная.
Растровая (bitmap) графика, формируемая при помощи пикселов, — очень
неэкономичный (в смысле расходования памяти компьютера) способ хране-
ния информации. Намного экономичнее векторная (vector) графика, принцип
компьютерного представления которой заключается в хранении информации
об отдельных, образующих ее графических примитивах, например, цвете и
координатах линий, заливке областей и т. п. (рис. 1.3). Разумеется, для созда-
ния векторной графики необходимо ее нарисовать "от руки", либо получить
из растровых изображений при помощи специальных программных средств,
демонстрирующих удовлетворительную работу далеко не всегда.

Рис. 1.3. К сравнению векторной (слева) и растровой (справа) графики


12 Ãëàâà 1

Очевидно, что (особенно для изображений большого размера) использование


векторной графики намного предпочтительнее растровой. Дело не только в
объемах информации, а еще и в том, что редактирование векторных рисунков
(такое как масштабирование, повороты и т. п.) осуществляется программами
с гораздо лучшей точностью. Поэтому при преобразовании векторной графи-
ки ее качество почти (или совсем) не ухудшается, в то время как качество
растровой графики неминуемо теряется.
Векторная графика идеальна при подготовке Web-анимации. Как правило,
ограничения на физический размер медиафайла играют ключевую роль при
загрузке Web-страниц в сети Интернет. Поэтому гораздо предпочтительнее
делать для этих целей фильмы, в которых большая часть видео создается при
помощи векторной графики, а растровые картинки применяются как можно
в меньшей степени.

Рис. 1.4. Flash позволяет преобразовать растровую графику (слева)


в экономичный векторный формат (справа)

Благодаря тому, что программа Flash изначально разрабатывалась как средст-


во компьютерной анимации для Web, она обладает развитыми средствами
преобразования растровой графики в векторную (рис. 1.4). Именно из-за это-
го рассматриваемая программа получила столь широкое распространение,
т. к. она предназначена именно для редактирования векторной анимации
(а также интерактивных элементов) для сети Интернет.
Более того, текстовые объекты, созданные во Flash, также с легкостью могут
быть преобразованы в векторную графику (рис. 1.5), что позволяет, с одной
Çíàêîìñòâî ñ Flash 13

стороны, гарантированно определить местоположение и вид текста в кадре


Flash-фильма, а с другой — получить доступ к дополнительным средствам
настройки анимации текста (например, анимации формы).

Рис. 1.5. Текстовые объекты тоже могут быть преобразованы в графику

Важно также отметить, что Flash содержит большое количество разнообраз-


ных инструментов для рисования графических примитивов (линий, прямо-
угольников, кругов и т. п.) и, кроме того, предусматривает два режима их
создания:
 рисование объектов (object drawing);
 рисование наложением (merge drawing).
В зависимости от того, какой из этих двух режимов выбран, нарисованные
примитивы создаются и впоследствии редактируются либо как единое целое,
либо просто как раскрашенные области кадра.
Если, к примеру, нарисовать прямоугольник и круг в режиме рисования объ-
ектов (рис. 1.6, слева), то они будут добавлены к фильму в виде объектов, не
зависящих от остальной графики. В противном случае, рисование осуществ-
ляется подобно наложению художником мазков краски на холст, полностью
заслоняя, либо накладываясь со смешением оттенков, на фон фильма
(рис. 1.6, справа)
Помимо перечисленных опций, Flash содержит некоторые дополнительные
возможности (например, автоматическое сглаживание или спрямление линий
при рисовании, управление цветом заливки и обрамления и т. д.), которые
будут рассмотрены ниже (см. главу 4).
14 Ãëàâà 1

Рис. 1.6. Два типа векторной графики — объекты (обрамление+заливка, слева) и рисованная
графика ("закрашенные области", справа)

1.1.3. Àíèìàöèÿ
Вероятно, всем читателям известно, что принцип создания кино и видео ос-
нован на быстром чередовании отдельных статических изображений, назы-
ваемых кадрами (frames). Количество кадров, демонстрируемых в течение
одной секунды, называется частотой кадров (frame rate). Психология чело-
веческого восприятия такова, что при чередовании с частотой более 20 кад-
ров в секунду статические кадры не воспринимаются как отдельные изобра-
жения, а полностью создают иллюзию просмотра динамической картины
(рис. 1.7).

Рис. 1.7. К пояснению принципа воспроизведения видео

Принцип компьютерной анимации, реализованный во Flash, заключается в


редактировании пользователем выборочных кадров фильма, называемых
ключевыми кадрами. Для них определяются индивидуальные настройки раз-
личных параметров и графических примитивов. Все остальное программа
Flash делает сама, создавая на участках фильма между ключевыми кадрами
плавное изменение изображения при помощи соответствующих алгоритмов
интерполяции (рис. 1.8). Благодаря этому, технологию анимации, основан-
ную на ключевых кадрах, часто называют непереводимым термином tweening
(или betweening — от английского "between" — "между"), тем самым под-
черкивая, что анимация создается программно, между ключевыми кадрами,
которые рисует пользователь.
Çíàêîìñòâî ñ Flash 15

Рис. 1.8. Анимация движения на основе ключевых кадров (коллаж)

Разумеется, анимация на основе ключевых кадров способна реализовать не


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

Рис. 1.9. Анимация путем одновременного изменения двух параметров (коллаж)

В связи с этим, принцип программирования анимации заключается в сле-


дующем:
1. Выбор определенных кадров фильма в качестве ключевых.
2. Задание на этих ключевых кадрах желаемых значений параметров, кото-
рым будет назначена анимация (например, расположения и размера объек-
тов фильма, их прозрачности и т. п.).
3. Определение, при необходимости, вспомогательных параметров анимации
(таких как траектория движения объекта, интерполяционные характери-
стики и т. д.).
Все остальное программа Flash сделает сама, добавив между ключевыми кад-
рами нужное количество промежуточных кадров (число которых может во
многие сотни и тысячи раз превышать число ключевых).
16 Ãëàâà 1

1.1.4. Èíòåðàêòèâíîñòü
Интерактивные элементы фильмов в последнее время стали полноценным
дополнением мультимедийных файлов. Благодаря сочетанию средств по соз-
данию анимации и средств настройки интерактивности (взаимодействия с
пользователем), Flash стал программой № 1 в соответствующем сегменте ин-
тернет-приложений. Во Flash встроены все основные стандартные элементы
управления, обеспечивающие взаимодействие с пользователем (такие как ги-
перссылки, кнопки, меню, переключатели, флажки проверки и т. п.).

Примером интерактивного фильма является видеокурс по основам Flash, кото-


рый находится на компакт-диске, прилагаемом к этой книге (рис. 1.10).

Рис. 1.10. Интерактивная заставка видеокурса по Flash

Средством, реализующим интерактивность во Flash, является язык програм-


мирования, называемый ActionScript, что примерно означает "сценарии обра-
Çíàêîìñòâî ñ Flash 17

ботки действий". Универсальными элементами, обеспечивающими взаимо-


действие со зрителем Flash-фильма, являются так называемые кнопки
(button). При этом объекты Flash, обозначаемые термином "кнопки", могут
иметь вид не обязательно традиционных кнопок, но и, к примеру, представ-
лять собой иерархические меню или интерактивную графику. Самым про-
стым вариантом интерактивного элемента является объект, при щелчке на
который осуществляется переход на ту или иную сцену фильма (рис. 1.11),
либо на определенный адрес в сети Интернет.

Рис. 1.11. К пояснению реализации интерактивности Flash-фильмов

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


(при помощи языка ActionScript) разработать соответствующий программный
код, реализующий обработку соответствующего события (event), иниции-
руемого зрителем Flash-фильма (например, момент нажатия или отпускания
кнопки). Кроме того, желательно определить вид кнопок, в зависимости от
манипуляций зрителя фильма. Предусмотрено три встроенных представления
18 Ãëàâà 1

кнопки: в обычном состоянии, при наведенном на кнопку указателе мыши


и в момент нажатия.

1.1.5. Êàê ìîæíî ïðîñìàòðèâàòü Flash-ôèëüìû?


Завершим первое знакомство с технологией Flash перечислением вариантов
просмотра Flash-фильма. Сразу отметим, что после его создания, в результате
операции экспорта (export) или опубликования (publish) всегда получается
файл, или набор файлов, определенного формата, главным из которых явля-
ется файл с расширением swf (от сочетания ShockWave Flash). Это — собст-
венный формат Flash, пригодный как для просмотра в браузере (рис. 1.12),
так и посредством специально предназначенной для этого программой —
проигрывателем Flash Player (рис. 1.13). Проигрыватель Flash Player распро-
страняется бесплатно, причем его последнюю версию всегда можно скачать
с сервера компании Adobe.

Рис. 1.12. Flash-фильм открыт в окне браузера


Çíàêîìñòâî ñ Flash 19

Ключевой особенностью SWF-файлов является возможность их воспроизве-


дения браузерами, т. е. программами, предназначенными для просмотра ин-
формации в сети Интернет. Для того чтобы браузер мог воспроизводить
Flash-фильмы (как это показано на рис. 1.12), на вашем компьютере должна
быть инсталлирована дополнительная надстройка к нему, также являющаяся
проигрывателем Flash. Как правило, браузеры время от времени автоматиче-
ски обращаются к серверу Adobe и проверяют наличие обновлений проигры-
вателя Flash. В случае их появления, с согласия пользователя, осуществляется
загрузка и установка новой версии проигрывателя.

Рис. 1.13. Flash-фильм открыт в окне проигрывателя Flash

Отметим также, что программа Flash обладает опцией генерации не только


самих SWF-файлов с фильмом, но и дополнительных (в частности, html) фай-
лов, которые уже содержат ссылку на соответствующий swf-фильм.
Наконец, Flash-фильмы, разработанные с учетом стандарта Flash Lite, допус-
кается просматривать на совместимых мобильных устройствах, таких как
карманные компьютеры (PocketPC, или КПК), смартфоны и мобильные теле-
фоны (рис. 1.14). Опять-таки, чтобы иметь возможность запустить Flash-
фильм на таком устройстве, на нем должен быть предварительно инсталли-
рован либо автономный проигрыватель Flash Lite, либо соответствующая
надстройка к браузеру, который использует мобильное устройство.
20 Ãëàâà 1

Рис. 1.14. Flash-фильмы (с ограниченными возможностями)


пригодны для просмотра на мобильных устройствах

В заключение перечислим еще раз основные способы просмотра Flash-


фильмов:
 SWF-файлы — в предварительно установленном проигрывателе Flash;
 SWF-файлы — без предварительной установки в операционной системе
каких-либо компонентов (это возможно в случае, если при экспорте задана
опция дополнительной генерации исполняемого exe-файла, представляю-
щего собой автономную программу-проигрыватель);
 SWF-файлы — в браузере;
 HTML-файлы (включающие ссылку на SWF-файлы) — в браузере;
 SWF- и HTML-файлы — на совместимых мобильных устройствах.

1.1.6. Î âåðñèÿõ Flash


Наша книга описывает последнюю версию CS3. Между тем, большинство
приемов применимо и к предыдущей версии (хотя ее интерфейс немного от-
Çíàêîìñòâî ñ Flash 21

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


возможность изучить работу двух последних версий:
 Flash 9 (или CS3, что подчеркивает принадлежность к последнему семей-
ству продуктов Adobe — Creative Suite 3);
 Flash 8 — предыдущая версия Flash (ее релиз был осуществлен предыду-
щем владельцем — компанией Macromedia, которая впоследствии была
куплена Adobe Systems).
Стоит также отметить, что Flash выпускается в двух версиях:
 Standard (Стандартная) — с рядом ограниченных возможностей;
 Professional (Профессиональная) — обладающая максимальным набором
функциональностей (но и, разумеется, более дорогая).

1.2. Èíòåðôåéñ Flash


Мы начнем с описания наиболее общих деталей интерфейса Flash и первых
шагов работы.

1.2.1. Ïåðâûé çàïóñê Flash


После завершения установки Adobe Flash CS3 на вашем компьютере нажмите
кнопку Пуск (Start) и затем выберите в главном меню ОС Windows пункт
Adobe Flash CS3 Professional (рис. 1.15).

Впоследствии вы сможете запускать каждое приложение двойным щелчком на


файлах документов Flash, имеющих расширение fla, которые вы до этого со-
хранили.

Принцип работы программы Flash связан с редактированием документа


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

По аналогии, к примеру, с программой Microsoft Word, фильм во Flash соответ-


ствует по смыслу документу Word. Только в последнем вы создаете текст, для
последующей печати на бумаге или публикации в электронном виде, а во
Flash — фильм, предназначенный для воспроизведения в браузере или проиг-
рывателе Flash.
22 Ãëàâà 1

Рис. 1.15. Осуществите запуск нужной программы при помощи главного меню Пуск

Рис. 1.16. Заставка, появляющаяся при запуске Flash


Çíàêîìñòâî ñ Flash 23

Окно программы Flash загружается после запуска с большой внутренней па-


нелью-приглашением, при помощи которой можно выбрать желаемое на-
правление дальнейшей работы. Три списка, занимающие центральную часть
окна, предлагают следующие возможности.
 Open a Recent Item (Открыть последний файл) — открытие существую-
щего файла в одном из форматов Flash;
 Create New (Создать новый...) — создание нового фильма, слайд-шоу,
презентации или проекта;
 Create from Template (Создать на основе шаблона...) — создание нового
фильма или иного файла Flash на основе одного из имеющихся шаблонов.
Для того чтобы начать работу с новым (пустым) Flash-фильмом, щелкните на
самом первом элементе Flash Document (Документ Flash) среднего списка
Create New (Создать новый...) (рис. 1.16).

1.2.2. Îñíîâíûå ýëåìåíòû èíòåðôåéñà


Интерфейс Flash организован таким образом, что основное окно программы
разделено на несколько панелей, которые имеют унифицированный интер-
фейс (рис. 1.17).

Рис. 1.17. Вид окна Flash после создания нового фильма


24 Ãëàâà 1

Рабочая область основного окна Flash поделена на сегменты. В границах этих


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

Рис. 1.18. Управление размещением внутренних панелей во Flash

Для того чтобы соединить две панели в пределах одного сегмента, надо схва-
титься за закладку одной из них и перетащить ее на другую панель, ближе
к той ее границе, вдоль которой вы собираетесь расположить первую панель.
Панель (или группу панелей) можно развернуть (и, наоборот, свернуть) в том
или ином направлении при помощи щелчка на характерной кнопке, которая
примыкает к верхней границе панели (рис. 1.19). Кроме того, во Flash не до-
пускается скрытия кадра фильма, а убрать или, наоборот, вызвать на экран
панель Timeline (Монтаж) легко нажатием одноименной кнопки.
Во Flash основными являются следующие панели (см. рис. 1.17).
 Library (Библиотека) — предназначена для управления исходным мате-
риалом Flash-фильма;

Рис. 1.19. Сворачивание группы панелей


Çíàêîìñòâî ñ Flash 25

 Timeline (панель Монтажа, или Монтажный стол) — служит для покадро-


вого монтажа Flash-фильма при относительно временной шкалы его со-
ставляющих;
 Stage (Сцена) — необходима для просмотра и редактирования изображе-
ния текущего кадра Flash-фильма, т. е. это аналог панели Monitor (Мони-
тор);
 Tools (Инструментарий) — служит для выбора текущего инструмента,
т. е. средства, которым можно выполнить определенные действия по ре-
дактированию изображения кадра фильма.
Flash-фильм собирается по слоям, развернутым относительно линейки вре-
мени. Список слоев и их содержимое представляется на панели Timeline
(Монтаж). Компоновка фильма производится из объектов, предварительно
собираемых на панели Library (Библиотека).
Многие панели имеют специфические меню, характерные для продуктов
компании Adobe и не очень привычные для пользователей других программ
ОС Windows. Эти меню вызываются нажатием кнопки, которую легко оты-
скать в правом верхнем углу панели (рис. 1.20), и содержат наборы команд,
актуальные для данной панели.

Рис. 1.20. Вызов меню панели

Помимо основных панелей, которые используются при монтаже фильма,


программы имеют довольно много вспомогательных панелей, некоторые из
них выводятся по умолчанию на экран (см. рис. 1.17). Они применяются,
главным образом, для специфических действий по редактированию фильма,
облегчения процесса монтажа и вывода дополнительной информации. Про-
смотреть список доступных панелей можно, обратившись к верхнему меню
26 Ãëàâà 1

Window (Окно). Отметим среди них две, применение которых необязательно,


но может сделать работу намного удобнее:
 Info (Информация) — панель, отображающая вспомогательную контекст-
но-зависимую информацию (почти всегда относящуюся к выделенному на
других панелях объекту);
 History (Журнал) — панель, служащая для просмотра и, возможно, отме-
ны последних действий по редактированию фильма. Ее можно вызвать
командой Window > Other Panels > History (Окно > Другие панели >
Журнал).
Вообще говоря, для выполнения действий по редактированию фильмов во
Flash применяются следующие элементы интерфейса.
 Панели (panel) — основные составляющие интерфейса программ, группи-
рующие (в соответствии с общим назначением) элементы управления и
играющие роль внутренних (дочерних) окон. Все панели связаны тем или
иным способом, поэтому, проводя редактирование фильма в одной из них,
вы, возможно, изменяете и состояние других панелей.
 Меню панелей (panel menu) — характерные меню, возникающие при нажа-
тии кнопки их вызова в правом верхнем углу панели (см. рис. 1.20).
 Верхнее меню (menu bar) — строка меню, находящаяся под заголовком
основного окна программы (см. рис. 1.17).
 Контекстные (всплывающие) меню (context menu, pop-up menu) — меню,
появляющиеся при нажатии в том или ином месте правой кнопки мыши.
Это особенно удобный способ редактирования, поскольку содержимое
всплывающих меню зависит от того места, в котором вы его вызываете, и
в нем легко найти нужную команду (рис. 1.21).
 Горячие клавиши (shortcuts) — очень эффективный способ для опытных
пользователей. Если вы часто применяете определенные команды, намно-
го быстрее выполнять их нажатием соответствующего сочетания клавиш
на клавиатуре, чем вызовом меню или применением инструментов.
 Указатель мыши (mouse pointer) — контекстно-зависимый элемент ин-
терфейса, играющий очень важную роль. В зависимости от места, на кото-
рое он наведен, и выбранных сочетаний опций панели (например, при том
или ином активном инструменте) указатель выглядит по-разному
(см. рис. 1.18—1.20), подсказывая пользователю, какие операции ему по-
зволено осуществить.
Çíàêîìñòâî ñ Flash 27

Рис. 1.21. Содержимое контекстного меню зависит от места его вызова

1.2.3. Ñöåíà (Stage) è ïàíåëü Ìîíòàæà (Timeline)


Редактирование фильма во Flash основано на расположении различных объ-
ектов (таких как рисунки, импортированные из файлов, нарисованная графи-
ка, звук и т. п.) на слоях фильма, в строгой привязке ко времени (т. е. к номе-
ру кадра). Для этих целей на панели Timeline (Монтаж) имеется горизон-
тальная временная шкала или линейка времени (time ruler), определяющая
место каждого объекта в фильме.
Важная возможность шкалы времени связана с тем, что пользователь может в
любой момент изменять ее масштаб, выбирая наиболее удобное пространство
для монтажа фильма, "приближая" или "отдаляя" (во времени) редактируе-
мую область. Например, для редактирования продолжительного фильма —
масштаб следует выбрать более мелким, а для прецизионного редактирования
с точностью до кадра — наиболее крупным. Для того чтобы задать масштаб
временной шкалы, достаточно вызвать меню панели Timeline (Монтаж) и
выбрать желаемое значение масштаба из списка (см. рис. 1.20).
28 Ãëàâà 1

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


помощи линии редактирования (editing line) и индикатора текущего кадра
(current-time indicator), выполненного в виде красного прямоугольника на ли-
нейке времени (рис. 1.22).

Рис. 1.22. Текущий кадр фильма выделен линией редактирования


на панели Timeline и отображается на Сцене

Линия редактирования является элементом интерфейса, характерным практи-


чески для всех видеоредакторов, к которым следует отнести и Flash. Таким
образом, из всего фильма в каждый момент времени выделяется один из кад-
ров, имеющий особое значение (мы его будем называть текущим кадром). Но-
мер текущего кадра приводится в нижней области панели Timeline (Монтаж)
в формате порядкового номера и, одновременно, во временном формате, т. е.
в секундах (рис. 1.23). Соответственно, изображение текущего кадра демон-
стрируется на панели Stage (Сцена).

Рис. 1.23. Номер текущего кадра фильма отображается в нижней части панели Timeline
Çíàêîìñòâî ñ Flash 29

Выделение текущего кадра имеет то же назначение, что и, к примеру, курсор,


отмечающий определенное место в тексте при работе в текстовых редакторах
(например, Microsoft Word или Notepad). При этом может оказаться, что не
все время фильма укладывается в видимой области временной шкалы, а часть
ее просто не помещается в пределы панели Timeline (Монтаж). В этом случае
следует использовать полосу прокрутки, расположенную в самом низу пане-
ли Timeline (Монтаж) (см. рис. 1.22). Перемещая ползунок на полосе про-
крутки, легко сделать доступным в видимой области шкалы времени любой
участок фильма. Используйте кнопки слева и справа от полосы прокрутки
для медленного перемещения вдоль фильма в нужном направлении, а щелчки
мышью между этими кнопками и ползунком — для быстрого смещения сразу
на большое расстояние.
Для того чтобы переместить линию редактирования вдоль шкалы времени,
т. е. изменить положение текущего кадра фильма, есть несколько способов:
 перетаскивание линии редактирования вдоль шкалы времени на панели
Timeline (Монтаж) — для этого нужно схватиться за ползунок индикатора
текущего кадра на шкале времени и передвигать его влево или вправо
(рис. 1.22). Учтите, что при перетаскивании на панели Stage (Сцена) де-
монстрируются кадры фильма, через которые вы проносите линию редак-
тирования;
 щелчок в нужном месте шкалы времени — при этом линия редактирова-
ния переносится на тот кадр, на положении которого вы щелкнули;
 одним из способов является воспроизведение фильма, запуск которого
осуществляется нажатием клавиши <Enter>.

Во Flash нельзя перенести линию редактирования на те участки фильма, на ко-


торые еще не добавлены кадры. Для вставки кадра на пустое место того или
иного слоя надо выделить соответствующий пустой фрагмент слоя (это разре-
шается делать) и добавить кадры командой Insert > Timeline > Frame (Встав-
ка > Монтажный стол > Кадр).

Рис. 1.24. Для увеличения пространства представления кадра фильма


допускается скрытие панели Timeline
30 Ãëàâà 1

Рис. 1.25. Выбор масштаба изображения кадра

Отметим также, что убрать или, наоборот, вызвать на экран панель Timeline
(Монтаж) можно нажатием кнопки Show > Hide Timeline (Показать > Скрыть
панель Монтажа) (рис. 1.24), а выбрать масштаб изображения кадра фильма
на панели Stage (Сцена) легко при помощи раскрывающегося списка Scale
(Масштаб) (рис. 1.25).

1.2.4. Êîìïîíîâêà ôèëüìà ïî ñöåíàì


Таким образом, процесс монтажа фильмов, в основном, заключается в распо-
ложении различных объектов на слоях вдоль временной шкалы и последую-
щем их редактировании. Фактически то, что мы видим в соответствующей
закладке панели Timeline (Монтаж), является исчерпывающей записью ре-
дактируемого нами фильма и однозначно определяет вид каждого кадра, ото-
бражаемого на панели Stage (Сцена).
Фильмы во Flash характерны тем, что они компонуются из сцен (scene). Сце-
ны — это просто удобный прием разбиения фильмов на фрагменты. При про-
смотре Flash-фильма они демонстрируются последовательно, одна за другой.
По умолчанию Flash-фильм состоит из единственной сцены Scene 1.

Не путайте термины stage и scene — на русский язык мы их переводим с по-


мощью одного и того же слова "сцена", но значения их не имеют между собой
ничего общего.

Для того чтобы добавить сцену в фильм, достаточно ввести команду Insert >
Scene (Вставка > Сцена). В результате новая сцена будет создана, и содержи-
мое панели Timeline (Монтаж) будет относиться именно к этой сцене. Назва-
ние текущей сцены, которая редактируется в данный момент, отображается в
нижней части панели Timeline (Монтаж), а переключаться между сценами
следует при помощи меню, вызываемого кнопкой Edit Scene (Редактировать
сцену) (рис. 1.26).
Дополнительные средства управления сценами, например, их переименова-
ние или изменение порядка следования во Flash-фильме предоставляет па-
Çíàêîìñòâî ñ Flash 31

нель Scene (Сцена), вызываемая командой Window > Other Panels > Scene
(Окно > Другие панели > Сцена).

Рис. 1.26. Для переключения между сценами фильма служит кнопка Edit Scene

Забегая вперед, отметим, что на панелях Stage (Сцена) и Timeline (Монтаж)


может быть открыта не только некоторая сцена фильма, но и определенный
символ — некоторый скомпонованный элемент фильма (такой как рисунок,
кнопка или анимация), который сам может являться частью некоторой сцены
фильма. Тогда в нижней части панели Timeline (Монтаж) будет приведено имя
этого символа, а переключаться между редактированием разных символов
можно посредством кнопки Edit Symbol (Редактировать символ), находящейся
рядом с кнопкой Edit Scene (Редактировать сцену).

1.2.5. Î áûñòðîé íàñòðîéêå ðàáî÷åé îáëàñòè


Как вы видите, интерфейс Flash довольно сложен и громоздок. Его настройка
может требовать существенных временных затрат, особенно если вы перио-
дически выполняете разную работу (например, осуществляете линейный
монтаж, добавляете программный код на языке ActionScript или редактируете
текст). В связи с этим, важно знать, что для быстрого изменения вида рабочей
области окна Flash 9 не обязательно всякий раз менять размер и расположе-
ние панелей вручную. Достаточно воспользоваться одной из имеющихся
встроенных настроек рабочей области. Для этого нажмите в нижней части
панели Timeline (Монтаж) кнопку Workspace (Рабочая область) и в появив-
шемся меню выберите желаемую настройку (рис. 1.27).
Вовсе не обязательно ограничиваться предустановленными настройками ра-
бочей области. Скорее всего, вы выработаете (одну или несколько) индиви-
дуальных сочетаний размера и расположения панелей, которые будут наибо-
лее комфортны для тех или иных действий. Если оформить эти установки в
виде соответствующих шаблонов настройки рабочей области, то это поможет
существенно сэкономить время, которое вы затрачиваете на работу с филь-
мами.
Сохранить понравившуюся настройку рабочей области для последующего
использования легко нажатием кнопки Workspace (Рабочая область) и по-
следующим выбором пункта Save Current (Сохранить текущую). Затем дос-
32 Ãëàâà 1

таточно определить имя новой настройки в открывшемся диалоговом окне,


после чего она станет доступной в списке настроек рабочей области.

Рис. 1.27. Быстрая настройка рабочей области

1.2.6. Îáùèé ïîðÿäîê ðåäàêòèðîâàíèÿ ôèëüìîâ


В завершение раздела перечислим характерные этапы создания Flash-
фильмов:
1. Создание нового фильма, включая определение его основных установок.
2. Подготовка и импорт исходных медиафайлов: видео, звука и статической
графики (если создавать фильм предполагается на их основе).
3. Линейный монтаж фильма из импортированных клипов, т. е. расположе-
ние их в нужном порядке слоям, в соответствующей позиции кадра, отно-
сительно линейки времени.
4. Добавление текста и рисование графических примитивов "от руки" при
помощи соответствующих инструментов, выбираемых на панели Tools
(Инструментарий).
5. Создание анимации на основе техники "ключевых кадров", когда прори-
совка примитивов и/или настройка тех или иных параметров, определяю-
щих анимацию, осуществляется только для ограниченного количества
кадров фильма, а содержимое остальных (промежуточных) кадров опреде-
ляется программой автоматически.
6. Настройка интерактивных элементов (добавление кнопок, гиперссылок;
написание соответствующего программного кода для элементов фильма
на языке сценариев ActionScript).
Çíàêîìñòâî ñ Flash 33

7. Экспорт смонтированного фильма в нужном формате (в зависимости от


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

1.3. Ìîíòàæ ïðîñòîãî ôèëüìà


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

1.3.1. Ñîçäàíèå íîâîãî ôèëüìà è èìïîðò ãðàôèêè


Начнем с создания нового фильма и определения его установок.
1. Запустите программу Flash и в окне-приглашении выберите пункт Flash
File (ActionScript 2.0), находящийся в группе Create New (Создать но-
вый...) (рис. 1.28).
2. Если панель Properties (Свойства) отсутствует на экране, вызовите ее
командой Window > Properties (Окно > Свойства).
3. На панели Properties (Свойства) нажмите кнопку Size (Размер) (рис. 1.29).
4. В открывшемся диалоговом окне Document Properties (Свойства доку-
мента) выберите в полях Dimension (Размер) желаемые размеры кадра
Flash-фильма в пикселах, например 400×300, а также частоту кадров
34 Ãëàâà 1

Рис. 1.28. Создайте новый документ Flash на основе языка программирования ActionScript 2.0

Рис. 1.29. Определите установки Flash-фильма


Çíàêîìñòâî ñ Flash 35

в поле Frame Rate (Частота кадров), например, 12 кадров в секунду


(рис. 1.29).
5. Введите команду File > Import > Import to Library (Файл > Импорт >
Импорт в библиотеку) (рис. 1.30).
6. В открывшемся диалоговом окне Import to Library (Импорт в библиоте-
ку) выберите графические файлы, из которых вы собираетесь создавать
фильм. В нашем случае это файлы с рисунками неба sky.bmp и воздушно-
го шара balloone.png.

Рис. 1.30. Начните с импорта необходимых файлов

Рис. 1.31. Импортированные рисунки на панели Library


36 Ãëàâà 1

В результате рисунки должны будут появиться на панели Library (Библиоте-


ка), без вставки в фильм (рис. 1.31). Однако если какие-либо изображения
отобразятся на панели Stage (Сцена), выделите их на этой панели щелчком
мыши и удалите из фильма нажатием клавиши <Del>.

1.3.2. Ðàñïîëîæåíèå ãðàôèêè


íà ñëîÿõ ôèëüìà
Теперь, вдобавок к существовавшему по умолчанию слою фильма Layer 1,
добавим еще один слой и разместим на этих двух слоях рисунки облачного
неба и воздушного шара соответственно (добавив предварительно некоторое
число кадров на каждый слой).
1. Нажмите на панели Timeline (Монтаж) кнопку Insert Layer (Вставить
слой) (рис. 1.31).
2. Дважды щелкните на названии нижнего слоя и, после того, как в его пре-
делах появится курсор ввода, переименуйте слой, назвав его sky. Верхний
слой таким же способом назовите другим именем, например fly (рис. 1.32).

Рис. 1.32. Переименуйте слои, чтобы лучше ориентироваться в их содержимом

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.33. Вставьте на слои пустые кадры

Рис. 1.34. Вставка рисунка в фильм


38 Ãëàâà 1

1.3.3. Íàñòðîéêà àíèìàöèè


1. Двойным щелчком выделите фрагмент слоя sky на панели Timeline
(Монтаж).
2. На панели Properties (Свойства) в раскрывающемся списке Tween (Ани-
мация) выберите элемент Motion (Движение) (рис. 1.35).
3. Перейдите на панели Timeline (Монтаж) к последнему кадру фрагмента и
отредактируйте расположение объектов на этом кадре.

Рис. 1.35. Задайте для вставленного рисунка опцию анимации

4. Просмотрите несколько промежуточных кадров фильма, щелкая по шкале


времени в нескольких местах, чтобы убедиться в том, что анимация ри-
сунка с небом настроена.
5. Для того чтобы создать ключевой кадр на верхнем слое, установите на па-
нели Timeline (Монтаж) линию редактирования на его внутренний кадр,
вызовите контекстное меню и выберите в нем пункт Insert Blank Key-
frame (Вставить пустой ключевой кадр) (рис. 1.36).
6. Выделите созданный ключевой кадр на панели Timeline (Монтаж).
Çíàêîìñòâî ñ Flash 39

Рис. 1.36. Создайте в середине верхнего слоя пустой ключевой кадр

Рис. 1.37. Вставьте рисунок с шаром на второй ключевой кадр верхнего слоя
40 Ãëàâà 1

7. Перетащите другой рисунок (с воздушным шаром) из панели Library


(Библиотека) на панель Stage (Сцена) (рис. 1.37).
8. Настройте анимацию для верхнего слоя fly, применяя ту же технику, что
была описана в пп. 1—5. Например, отредактируйте финальный ключе-
вой кадр анимации, переместив рисунок с шаром относительно кадра
фильма (рис. 1.38).

Рис. 1.38. Настройте для верхнего рисунка анимацию движения

9. Для того чтобы создать еще один ключевой кадр в середине анимации на
верхнем слое fly, выделите щелчком этот кадр на панели Timeline (Мон-
таж), вызовите контекстное меню и выберите в нем пункт Insert Key-
frame (Вставить пустой ключевой кадр).
10. Перейдите к первому ключевому кадру анимации на слое fly на панели
Timeline (Монтаж).
11. Выберите на панели Tools (Инструментарий) инструмент Free Transform
(Преобразование).
12. Схватитесь инструментом Free Transform (Преобразование) за маркер
обрамления рисунка с шаром и измените его масштаб, перетаскивая мар-
кер в ту или иную сторону (рис. 1.39).
Çíàêîìñòâî ñ Flash 41

Рис. 1.39. Создайте в середине анимации верхнего рисунка еще один ключевой кадр
и добавьте к анимации эффект масштабирования

1.3.4. Ïðåäâàðèòåëüíûé ïðîñìîòð ôèëüìà


Рассмотрим в заключение различные опции предварительного просмотра
созданного Flash-фильма.
1. Щелкая на шкале времени, просмотрите несколько кадров фильма, чтобы
убедиться в том, что движение шара сопровождается плавным изменением
его размера.
2. Перейдите к первому кадру фильма и нажмите клавишу <Enter>, чтобы
просмотреть фильм в динамике на панели Stage (Сцена).
3. Выберите в верхнем меню команду Control > Test Movie (Управление >
Тестировать фильм), чтобы просмотреть фильм в окне встроенного проиг-
рывателя (рис. 1.40).

Две важных опции, включаемые командами Control > Loop Playback (Управле-
ние > Циклическое воспроизведение) и Control > Play All Scenes (Управле-
ние > Проигрывать все сцены), меняют режим воспроизведения, соответствен-
но, циклическим образом или от начала до конца; а также проигрывание всех
сцен фильма или только текущей сцены.
42 Ãëàâà 1

Рис. 1.40. Просмотрите полученный фильм во встроенном проигрывателе Flash

Наконец, отметим, что для более удобного просмотра фильма может приме-
няться не только верхнее меню 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

Рис. 1.41. Для управления процессом воспроизведения фильма


служит панель Controller (Flash)

Еще одна важная возможность предварительного просмотра фильма связана с


непосредственным тестированием Flash-фильма в программе, которая будет
использоваться для его финального просмотра, например, во внешнем проиг-
рывателе Flash или браузере (см. главу 2).
ÃËÀÂÀ 2

Ðàáîòà ñ ôàéëàìè

Соберем в этой главе все сведения, которые необходимы для организации


эффективной работы с файлами, хранящими ту или иную информацию на
диске компьютера. Мы последовательно рассмотрим вопросы управления
файлами документов Flash (см. разд. 2.1), импорта и первичной обработки
медиаматериала из внешних файлов (см. разд. 2.2), а также экспорта готовых
фильмов (см. разд. 2.3). Также (большей частью, в ознакомительных целях)
рассматриваются особенности создания документов Flash для мобильных
устройств (см. разд. 2.4), таких как сотовые телефоны и карманные компью-
теры (КПК).

2.1. Óïðàâëåíèå ôàéëàìè äîêóìåíòîâ


Вся работа по монтажу фильмов во Flash сохраняется в файлах документов
Flash c расширением fla (сокращение от "Flash"), в котором сохраняется ра-
бота, соответствует единственному редактируемому Flash-фильму.

2.1.1. Îòêðûòèå è ñîõðàíåíèå ôàéëîâ


Несколько команд меню File (Файл) позволяют осуществить опции сохране-
ния документа Flash:
 File > Save (Файл > Сохранить) — сохраняет документ под текущим име-
нем;
 File > Save and Compact (Файл > Сохранить и сжать) — сохраняет доку-
мент, одновременно сжимая его;
 File > Save As (Файл > Сохранить как) — сохраняет документ под новым
именем;
46 Ãëàâà 2

 File > Save as Template (Файл > Сохранить как шаблон) — сохраняет до-
кумент в качестве шаблона для создания новых документов;
 File > Save all (Файл > Сохранить все) — сохраняет все открытые фильмы
(которые могут быть открыты во Flash для одновременного редактирова-
ния).

Сохранить документ можно как в новом формате Flash CS 3, так и в формате


предпоследней версии Flash 8 (если, конечно, он не содержит несовместимых
с предыдущей версией элементов, таких, например, как код на языке програм-
мирования ActionScript 3.0).

Сохраненный ранее документ можно открыть либо командой File > Open
(Файл > Открыть проект) , через стандартное диалоговое окно Open File (От-
крытие файла), либо командой File > Open Recent (Файл > Открыть недавний
проект), которая служит для открытия одного из тех проектов, которые ре-
дактировались в последнее время (рис. 2.1). Если вы хотите открыть доку-
мент, хранящийся в сети Интернет, следует воспользоваться командой File >
Open from Site (Файл > Открыть с сайта).

Рис. 2.1. Верхнее меню File


Ðàáîòà ñ ôàéëàìè 47

2.1.2. Ñîçäàíèå íîâûõ ôèëüìîâ


Для того чтобы создать новый документ, выберите в верхнем меню команду
File > New (Файл > Создать), а затем определите тип создаваемого документа
в диалоговом окне New Document (Создать документ) (рис. 2.2).

Рис. 2.2. При создании нового документа следует выбрать его тип

Диалоговое окно New Document (Создать документ) имеет две вкладки:


General (Общие) (рис. 2.2) и Templates (Шаблоны) (рис. 2.3). Переход к
вкладке Templates (Шаблоны) (как это показано на рис. 2.3) позволяет вы-
брать установки создаваемого Flash-фильма на основе одного из предлагае-
мых шаблонов, или предустановок. После создания новый документ откроет-
ся в окне Flash для редактирования (рис. 2.4).
Помните о том, что поменять эти установки (независимо от того, создавали
вы фильм с установками по умолчанию или на основе шаблона) легко уже в
процессе его редактирования, обратившись к панели Properties (Свойства)
(рис. 2.4, внизу).

2.1.3. Îäíîâðåìåííîå ðåäàêòèðîâàíèå


íåñêîëüêèõ ôèëüìîâ
Отметим, что если в процессе работы создать один или несколько новых
фильмов, то их допускается редактировать одновременно, переходя от одного
48 Ãëàâà 2

Рис. 2.3. Создание нового фильма на основе шаблона (Flash)

Рис. 2.4. Новый фильм готов к редактированию


Ðàáîòà ñ ôàéëàìè 49

фильма к другому, щелкая на соответствующей вкладке панели Timeline


(Монтаж), либо используя соответствующие пункты меню Window (Окно).
Пример редактирования трех новых пустых фильмов показан на рис. 2.5.

Помните о том, что во Flash импортированные объекты сохраняются непосред-


ственно во fla-файле (см. разд. 2.1.2). Иными словами, при переходе от одного
фильма, открытого для редактирования, к другому, содержимое панели
Library (Библиотека) будет меняться.

Рис. 2.5. Три новых фильма готовы для редактирования

Для того чтобы закрыть тот или иной фильм, достаточно нажать кнопку за-
крытия панели в правом верхнем углу панели Timeline (Монтаж).

2.2. Èìïîðò
Для того чтобы использовать графический, звуковой или видеофайл во Flash-
фильме, его следует сначала импортировать из файла. Разработчики преду-
смотрели не только обычные, но и специфические возможности импорта ме-
диа. Перечислим их:
 обычный импорт медиафайлов (графики, видео- или звука). Как правило,
содержимое медиафайла копируется (с применением предусмотренных
для этого алгоритмов сжатия) в файл Flash-документа (тот, что имеет рас-
ширение fla) (см. разд. 2.1.2);
 импорт видео — это набор дополнительных опций, позволяющих, к при-
меру, организовать для уже созданного фильма просмотр импортирован-
ной анимации во встроенном проигрывателе (см. разд. 2.2.5);
 настройка импорта для обращения к медиафайлу в режиме "онлайн" (при
просмотре самого Flash-фильма). Это важно для просмотра Flash-фильмов
через Интернет, когда рационально организовать отдельную загрузку с
сервера Flash-документа и медиаконтента (например, видеофайла).
50 Ãëàâà 2

2.2.1. Áèáëèîòåêà Flash


Если вы собираетесь использовать во Flash-фильме рисунки, видео- или
аудиоматериал, который хранится на диске компьютера в виде файлов, то их
следует импортировать в документ Flash из файла. Для управления импор-
тированными объектами (и прочими элементами, которые создаются в самой
программе) во Flash имеется панель, называемая Library (Библиотека). На
рис. 2.6 показан пример панели Library (Библиотека), содержащей три эле-
мента, которые являются графическими (растровыми) изображениями.

Рис. 2.6. Панель Library

Выделенный объект Библиотеки демонстрируется в миниатюре предвари-


тельного просмотра, а ознакомиться более внимательно с его атрибутами и,
при необходимости, поменять параметры (например, тип сжатия), можно,
щелкнув дважды на имени элемента на панели Library (Библиотека). В этом
случае загружается диалоговое окно Bitmap Properties (Свойства рисунка)
(рис. 2.7), позволяющее, в частности, обновить содержимое объекта (т. е. по-
вторить импорт из того же медиафайла) нажатием кнопки Update (Обновить).
При импорте медиаматериала (графики или звука) в документ Flash, его ко-
пия (возможно, преобразованная в более подходящий формат, например, в
случае звука — в формат MP3) сохраняется в самом документе Flash. Таким
образом, вся информация, необходимая для монтажа фильма, помещается
в файл с документом Flash, т. е. с расширением fla.

Сказанное не относится к видео, которое при импорте не всегда копируется


в документ, а (в наиболее часто используемых опциях импорта) конвертируется
в отдельный файл формата Flash Video, с расширением flv.
Ðàáîòà ñ ôàéëàìè 51

Рис. 2.7. Диалоговое окно Bitmap Properties позволяет ознакомиться


со свойствами элемента библиотеки

Поскольку каждый Flash-фильм является отдельным документом и сохраня-


ется в собственном файле, содержимое панели Library (Библиотека) зависит
от того, какой из документов активен в данный момент. Иными словами, до-
кумент Flash является, сам по себе, обособленным проектом, объекты для

Рис. 2.8. Для управления содержимым панели Library применяется меню панели
52 Ãëàâà 2

монтажа которого хранятся на панели Library (Библиотека). Если в один мо-


мент времени открыто несколько документов, то переход от одного из них к
другому приведет к изменению содержимого панели Library (Библиотека).
Управлять содержимым панели Library (Библиотека) удобнее всего при по-
мощи меню панели (рис. 2.8). В частности, допускается создавать новые пап-
ки и распределять между ними объекты библиотеки, а также переименовы-
вать или удалять их.

2.2.2. Îáû÷íûé èìïîðò


Для того чтобы использовать содержимое графического, видео- или звуково-
го файла в документе Flash, следует осуществить процедуру его импорта.
Отметим, что импорт видео происходит несколько по-другому, о чем пойдет
речь ниже (см. разд. 2.2.5 и 2.2.6).
Для импорта файлов применяются две команды, после ввода любой из кото-
рых появляется диалоговое окно Import (Импорт), необходимое для выбора
файла на диске:
 File > Import > Import to Stage (Файл > Импорт > Импорт в фильм) — для
вставки медиа из файла непосредственно в фильм, на выделенный кадр
выделенного слоя на панели Timeline (Монтаж). В этом случае название
медиафайла появляется на панели Library (Библиотека), а его содержимое
возникает в кадре фильма на панели Stage (Сцена) (рис. 2.9).
 File > Import > Import to Library (Файл > Импорт > Импорт в библиоте-
ку) — для помещения медиаобъекта только на панель Library (Библиоте-
ка), без вставки в фильм.

Рис. 2.9. После импорта в фильм содержимое файла появляется в его кадре
и на панели Timeline
Ðàáîòà ñ ôàéëàìè 53

После того как соответствующий объект появляется на панели Library (Биб-


лиотека), его можно вставить во Flash-фильм путем простого перетаскивания
на изображение кадра.

1
При помощи панели Library (Библиотека) допускается не только импортировать
объекты из медиафайлов, но и создавать пользовательские объекты, называе-
мые символами (например, анимационные клипы, графику или интерактивные
кнопки).

2
Опциями импорта (например, качеством сжатия рисунка) можно управлять при
помощи диалогового окна Bitmap Properties (Свойства рисунка) (см. разд. 2.2.4).

2.2.3. Ïðåäâàðèòåëüíàÿ îáðàáîòêà


ðàñòðîâîé ãðàôèêè
После импорта растровой графики из внешних файлов предпочтительно пре-
образовать ее в векторный вид или хотя бы перевести в разряд "рисованных"
изображений. Для решения этих задач разработчиками Flash предусмотрены
две команды: разбиение и трассировка.

Ðàçáèåíèå ðèñóíêà
Разбиение растрового рисунка позволит впоследствии редактировать его
средствами Flash: поменять те или иные цвета, нарисовать на нем графиче-
ские примитивы и т. д. Разбиение уменьшает объем памяти, который требу-
ется для хранения графики. Соответственно, разбиение растровых рисунков
позволяет значительно уменьшить физический размер окончательного SWF-
файла, чаще всего загружаемого через Интернет.
Для разбиения рисунка на части следует выбрать в верхнем меню команду
Modify > Break Apart (Преобразовать > Разбить). В результате (рис. 2.10)
рисунок перестает вести себя как единое целое, его фрагменты можно выде-
лить инструментом Selection (Выбор) и отредактировать. На рис. 2.11 приве-
ден пример стирания фрагментов изображения рисунка после разбиения по-
средством инструмента Eraser (Ластик).

Òðàññèðîâêà ðèñóíêà
Гораздо большие возможности по изменению рисунков, импортированных из
внешних файлов, дает их трассировка, означающая преобразование растро-
вой графики в векторный формат. Трассировка предпочтительнее простого
разбиения, поскольку открывает новые возможности для ее редактирования,
54 Ãëàâà 2

Рис. 2.10. Рисунок до (слева) и после (справа) разбиения

Рис. 2.11. После разбиения рисунок можно редактировать средствами Flash

а также позволяет повысить качество таких операций, как масштабирование,


повороты и т. п. (рис. 2.12).
Для того чтобы выполнить трассировку рисунка, проделайте следующее.
1. Выделите слой и кадр, содержащий рисунок на панели Timeline (Монтаж).
2. Выделите сам рисунок на панели Stage (Сцена).
Ðàáîòà ñ ôàéëàìè 55

Рис. 2.12. Трассировка рисунка (слева) позволяет разбить его на области по цвету

3. Выберите в верхнем меню Modify > Bitmap > Trace Bitmap (Преобразо-
вать > Рисунок > Трассировка рисунка).
4. В открывшемся диалоговом окне Trace Bitmap (Трассировка рисунка)
(рис. 2.13) выберите опции трассировки (о них написано ниже).

Если вы затрудняетесь сразу выбрать параметры трассировки, выполните ее с


параметрами, предложенными по умолчанию. Если результат трассировки вам
не понравится, вы всегда сможете отменить последнюю операцию нажатием
клавиш <Ctrl>+<Z> и повторить трассировку снова, уже лучше представляя се-
бе, какие параметры необходимо изменить.

5. Нажмите кнопку ОК.


В результате рисунок будет разбит на отдельные фрагменты, в зависимости
от его цветового состава. На рис. 2.14 показан пример трассировки рисунка
с теми параметрами, которые были выбраны на рис. 2.13.
Перечислим, в завершение разговора о трассировке, параметры, при помощи
которых можно управлять этой операцией (рис. 2.13).
 Color threshold (Порог цвета) — параметр, характеризующий ширину
диапазона близких цветов, которые должны считаться одинаковыми при
трассировке;
 Minimum area (Минимальная область) — размер минимальных областей,
на которые может быть разбит рисунок (в пикселах);
56 Ãëàâà 2

Рис. 2.13. Выберите опции трассировки

Рис. 2.14. Результат трассировки рисунка


Ðàáîòà ñ ôàéëàìè 57

 Curve fit (Подгонка линиями) — степень гладкости линий, которыми


должны окаймляться области при трассировке рисунка;
 Corner threshold (Количество углов) — параметр, определяющий число
углов, присутствующих на рисунке (много, немного, мало).

Рис. 2.15. Результат трассировки с другими параметрами

Рис. 2.16. Редактирование рисунка после трассировки


58 Ãëàâà 2

В качестве примера на рис. 2.15 приведен результат трассировки той же гра-


фики, что была показана на рис. 2.13—2.14, но с другими параметрами
(а именно для него размер минимальной области был взят равным 8 пиксе-
лам, а также установлен вариант подгонки менее гладкими линиями).
Отметим еще раз, что после разбиения или трассировки отдельные фрагмен-
ты рисунка допускается выделять и затем редактировать различными сред-
ствами Flash. На рис. 2.16 приведен пример выделения областей при помощи
инструмента Lasso (Лассо).

Ïðåîáðàçîâàíèå ãðàôèêè â ñèìâîëû


После преобразования растровой графики (как разбиения, так и трассировки),
она утрачивает свою целостность, что создает дополнительные трудности
при последующем редактировании. Во Flash такую графику (возможно,
включающую дополнительные рисованные элементы) удобно объединять в
так называемые символы — внутренние объекты Flash, которые допускается
редактировать отдельно от сцен фильма.
Для того чтобы преобразовать какой-либо объект (или группу объектов) в
символ, достаточно выделить их на панели Stage (Сцена) и ввести команду
Modify > Convert to Symbol (Преобразовать > Преобразовать в символ). По-
сле этого следует определить имя символа в открывшемся диалоговом окне и
нажать кнопку ОК, чтобы соответствующий символ заменил группу объек-
тов, выделенную в фильме, и появился на панели Library (Библиотека)
(рис. 2.17). Отметим, что работе с символами будет посвящена часть главы,
связанной с анимацией (см. разд. 5.3).

Рис. 2.17. Замена графики символом


Ðàáîòà ñ ôàéëàìè 59

2.2.4. Îáíîâëåíèå è çàìåíà ãðàôèêè


Импортированный ранее объект (в частности, рисунок) допускается переза-
грузить, используя иные параметры импорта, либо заменяя его на содержи-
мое другого файла. Для этого:
1. Дважды щелкните на имени объекта на панели Library (Библиотека).
2. В открывшемся диалоговом окне Bitmap Properties (Свойства рисунка)
(рис. 2.18) выберите желаемую опцию сжатия в раскрывающемся списке
Compression (Сжатие). При желании можно задать параметр сжатия вруч-
ную, снимая флажок проверки Use document default quality (Использо-
вать качество сжатия по умолчанию) и вводя соответствующее числовое
значение в поле Quality (Качество).
3. Нажмите кнопку Update (Обновить).
4. Если вы хотите вовсе поменять рисунок на какой-либо другой, нажмите
кнопку Import (Импорт) и выберите желаемый файл в стандартном диало-
говом окне открытия файла.
5. Закройте диалоговое окно Bitmap Properties (Свойства рисунка) нажати-
ем кнопки ОК.

Рис. 2.18. Изменение опций импорта

2.2.5. Èìïîðò âèäåî


Flash — это программа, предназначенная, главным образом, для разработки
интерактивной анимации для Интернета. Поэтому для использования видео
из внешних источников предусмотрены дополнительные возможности.
Рассмотрим, как осуществляется импорт видеофайлов при помощи специаль-
ного мастера.
60 Ãëàâà 2

1. Введите команду File > Import > Import Video (Файл > Импорт > Импорт
видео).
2. На открывшейся стартовой странице мастера Import Video (Импорт
видео) определите местоположение видеофайла (рис. 2.19). Если вы пла-
нируете один раз импортировать его и использовать затем в неизменном
виде, определите путь к файлу в верхнем поле File path (Путь к файлу).
Если видеофайл находится не на компьютере, а в сети Интернет, то опре-
делите его местоположение в поле URL (Адрес).

Нажатие в окне мастера Import Video (Импорт видео) кнопки Browse (Пролис-
тать) позволяет определить путь к файлу при помощи стандартного диалогово-
го окна открытия файла.

Рис. 2.19. Определите местоположение видеофайла в диалоговом окне мастера Import Video
Ðàáîòà ñ ôàéëàìè 61

3. Нажмите в диалоговом окне мастера Import Video (Импорт видео) кнопку


Next (Вперед).
4. Выберите тип использования видео при помощи группы переключателей
на следующей странице мастера Import Video (Импорт видео), которая
называется Deployment (Загрузка) (рис. 2.20). Если вы хотите организо-
вать для зрителя вашего Flash-фильма загрузку видео с сервера в момент
его просмотра, выберите одну из трех первых опций, например Progres-
sive download from a web server (Прогрессивная загрузка с сервера).

Рис. 2.20. Определите опции загрузки видео,


которая будет применяться при просмотре Flash-фильма

Если вы собираетесь организовать обработку видео вручную при редактирова-


нии фильма, расположив его для этого вдоль линейки времени, выберите по-
следний переключатель Embed video in SWF and play in timeline (Внедрить
видео в SWF-файл для монтажа). Последняя опция означает копирование все-
62 Ãëàâà 2

го медиаконтента файла во Flash-проект, причем, при ее выборе, на следую-


щей странице мастера Import Video (Импорт видео), которая будет называться
Embedding (Внедрение), необходимо будет подтвердить опции внедрения ви-
део во Flash-фильм.

5. Нажмите кнопку Next (Вперед) для перехода к следующей странице мас-


тера Import Video (Импорт видео).
6. На открывшейся странице Encoding (Кодировка) выберите при помощи
раскрывающегося списка Profile (Предустановка) желаемую предустанов-
ку параметров видеосжатия, которая определит качество изображения ви-
део при просмотре Flash-фильма и размер самого файла.
7. При желании нажмите кнопку Advanced (Дополнительно) (рис. 2.21) и
определите соответствующие установки, которые будут применены при
сжатии видео (см. разд. 2.2.6).
8. Нажмите еще раз кнопку Next (Вперед).

Рис. 2.21. Задайте параметры кодировки видео


Ðàáîòà ñ ôàéëàìè 63

9. На странице Skinning (Оболочка) выберите при помощи раскрывающего-


ся списка Skin (Оболочка) желаемый стиль проигрывателя, который бу-
дет применяться при просмотре видео во Flash-фильме (рис. 2.22).
10. Нажмите кнопку Finish (Завершить).

Рис. 2.22. Выберите стиль воспроизведения видео в финальном Flash-фильме

Рис. 2.23. Видеоклип появляется на панелях Library и Stage


64 Ãëàâà 2

После этого (рис. 2.23) файл появится в списке панели Library (Библиотека) и
будет вставлен в фильм (если была выбрана соответствующая опция на
4-м шаге).

2.2.6. Ïîäãîòîâêà âèäåî


ïðè ïîìîùè Adobe Flash Video Encoder
Как уже было сказано (см. разд. 2.2.5), для работы с видео во Flash необхо-
димо предварительно перекодировать видеофайл, например, имеющий изна-
чально расширение avi, в специальный формат Flash-видео. Соответствую-
щие видеофайлы создаются самой программой Flash и имеют расширение flv.
При работе с видео в программе Flash перекодировка видео из внешних фай-
лов является типичной задачей, с которой приходится сталкиваться довольно
часто. Поэтому если вам требуется перекодировать большое количество фай-
лов для их последующего использования во Flash-фильмах, то более удобным
будет применение не самой программы Flash, а специальной программы, на-
зываемой Adobe Flash Video Encoder (Кодировщик Flash-видео).
Для запуска программы-кодировщика нажмите кнопку Start (Пуск) и затем
выберите в главном меню ОС Windows пункт Adobe Flash CS3 Video
Encoder, после чего она откроется в независимом от программы Flash окне
(рис. 2.24).
Для того чтобы перекодировать группу файлов при помощи Adobe Flash
Video Encoder, следует выполнить следующие операции.
1. Нажмите кнопку Add (Добавить).
2. В диалоговом окне Open (Открыть) определите файлы, подлежащие коди-
ровке, выделив их либо группой, либо по отдельности; возможно, взяв эти
файлы из различных папок.
3. Нажмите кнопку Open (Открыть).
В результате выбранные файлы появляются в списке Source File (Исходные
файлы) (рис. 2.25), после чего следует правильно определить параметры пе-
рекодировки. Рассмотрим, как это делается.
1. Выделите файл или группу файлов в списке Source File (Исходные
файлы).
2. Нажмите кнопку Settings (Установки).
3. В открывшемся диалоговом окне Flash Video Encoding Settings (Установ-
ки кодировки видео) (рис. 2.26) определите те же самые параметры, что
были рассмотрены при импорте видео в программе Flash (см. разд. 2.2.5
и рис. 2.21). В частности, посредством маркеров начала и конца клипа
можно определить его фрагмент, который будет перекодирован.
Ðàáîòà ñ ôàéëàìè 65

Рис. 2.24. Окно кодировщика видео Flash Video Encoder

Рассмотрим более подробно некоторые параметры кодировки, устанавливае-


мые в диалоговом окне Flash Video Encoding Settings (Установки кодировки
видео).
 На вкладке Encoding Profiles (Профили перекодировки) при помощи од-
ноименного раскрывающегося списка выбирается предустановка, которая
наиболее подходит для вашей задачи (рис. 2.26). Например, для загрузки
через медленные модемы логично выбрать предустановку Low Quality
(Низкое качество). При работе с видео стандарта DV (Digital Video) следу-
ет выбрать одну из предустановок: DV Small (DV меньше) или DV Large
(DV больше). В имени каждого профиля, в скобках, приводится поток
данных, который соответствует той или иной предустановке, чтобы сразу
можно было оценить предполагаемый размер файла, полученного при
перекодировке. Важно отметить, что некоторые профили, в частности
предустановка High Quality (Высокое качество) совместима с программой
Flash 8. Если вы предполагаете, что зрители Flash-фильма могут иметь
проигрыватель более ранней версии, то следует использовать одну из пре-
дустановок формата Flash 7.
66 Ãëàâà 2

Рис. 2.25. Для выбора параметров кодировки нажмите кнопку Settings

Каждая предустановка предусматривает ряд параметров, сводка которых при-


водится в раскрывающемся списке Encoding Profiles (Профили перекодиров-
ки). Если вы хотите поменять какой-либо из параметров вручную, то вам надо
будет обратиться к остальным вкладкам диалогового окна Flash Video
Encoding Settings (Установки кодировки видео).

 На вкладке Video (Видео) (рис. 2.27) в раскрывающемся списке Video


codec (Видеокодек) можно выбрать программу, используемую для сжатия
видео, выбрать опцию устранения чересстрочной развертки при помощи
флажка проверки Deinterlace (Удалить чересстрочную развертку), а также
определить частоту кадров при помощи раскрывающегося списка Frame
rate (Частота кадров), качество видеосжатия и максимальный поток дан-
ных, который будет кодировать файл. Если ключевое значение для вас
имеет размер файла, то следует определить минимально возможный поток
данных, исходя из эксперимента, пробуя перекодировать один и тот же
файл с различным качеством. Если размер файла не столь важен, а ре-
Ðàáîòà ñ ôàéëàìè 67

шающее значение имеет качество представления видео, то следует вы-


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

Рис. 2.26. Задайте установки перекодировки

 На вкладке Audio (Аудио) определяются некоторые параметры аудиосжа-


тия. Флажок проверки Encode audio (Кодировать аудио) задает
кодировку соответствующего аудиоряда видеоклипа в формате MP3. Рас-
крывающийся список Data rate (Поток данных) позволяет определить ка-
чество сжатия (малые значения обеспечивают сильное сжатие, т. е. малый
68 Ãëàâà 2

размер файла, а большие значения приводят к большому объему файла, но


практически не ухудшающемуся качеству звука).

Рис. 2.27. Установки кодировки видео выбираются на вкладке Video

 Вкладка Crop and Resize (Обрезка и масштабирование) поможет при ко-


дировке видео изменить его размер, позволяя обрезать кадр клипа сверху
или снизу, а также слева или справа. При определении тех или иных пара-
метров соответствующая область, которая будет записана во Flash-видео-
файл, отмечается непосредственно на кадре клипа в области предвари-
тельного просмотра (рис. 2.28). Передвигая ползунок, расположенный под
областью предварительного просмотра, удобно просматривать разные
кадры клипа, тем самым более точно подбирая область обрезки. Установка
флажка проверки Resize video (Изменить размер видео) позволяет впо-
следствии после обрезки масштабировать видео, изменив его размер. При
выставленном флажке проверки Resize video (Изменить размер видео)
становятся доступными поля Width (Ширина) и Height (Высота), при по-
Ðàáîòà ñ ôàéëàìè 69

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

Рис. 2.28. Масштабирование и обрезка клипа

 Наконец, вкладка Cue points (Точки разметки) позволяет разметить ви-


деоклип таким образом, чтобы получить программный доступ к тем или
иным кадрам клипа из кода, написанного для Flash-фильма. Например, оп-
ределив какой-либо кадр в качестве точки разметки, вы получите быстрый
способ навигации по видеоклипу.
Для того чтобы определить новую точку разметки клипа:
1. Выберите текущий кадр посредством ползунка, расположенного под об-
ластью предварительного просмотра клипа.
70 Ãëàâà 2

Рис. 2.29. Выбор точек разметки клипа

2. Нажмите кнопку + (Добавить).


3. В появившемся элементе списка точек разметки раскройте список Type
(Тип).
4. Выберите тип точки разметки: Event (Как событие) или Navigation (Для
навигации) (рис. 2.29).
5. Повторите описанные действия для остальных точек разметки.

Отметим, что выбор для точки разметки типа Navigation (Для навигации) по-
зволит организовать быструю навигацию по фильму при помощи кнопок медиа-
проигрывателя, которые будут присутствовать на его панели инструментов.
Точка разметки Event (Событие) нужна для того, чтобы осуществить обработку
того или иного события при достижении данной точки видео. Эта обработка на-
страивается посредством языка программирования ActionScript, встроенного во
Flash. Также, при перекодировке видео в самой программе Flash, имеется еще
Ðàáîòà ñ ôàéëàìè 71

один тип, связанный с языком программирования ActionScript (настройка таких


точек разметки осуществляется непосредственно из Flash-фильма).

Для того чтобы подтвердить выбранные установки кодировки, следует на-


жать кнопку ОК в диалоговом окне Flash Video Encoding Settings (Установ-
ки кодировки видео), а для запуска процесса перекодировки — нажать кноп-
ку Start Queue (Начать кодировку) (рис. 2.30).

Рис. 2.30. Процесс кодировки может занять некоторое время

После этого происходит обработка соответствующих видеофайлов и запись


новых файлов формата Flash-видео с расширением flv на жесткий диск ком-
пьютера. Прервать кодировку можно нажатием кнопки Stop Queue (Остано-
вить кодировку).
Для того чтобы вставить его во Flash-документ, можно воспользоваться
обычной процедурой импорта:
1. Перейдите в программу Flash и раскройте верхнее меню File (Файл).
2. Наведите указатель на пункт Import (Импорт) и в подменю выберите
пункт Import to Stage (Импорт в фильм).
72 Ãëàâà 2

3. В открывшемся диалоговом окне Import (Импорт) найдите и выделите в


списке файлов нужный файл с расширением flv.
4. Нажмите кнопку Open (Открыть) в диалоговом окне Import (Импорт).
5. Пройдите все страницы процедуры импорта (см. разд. 2.2.5) с тем, чтобы
уже созданный файл без дополнительной обработки, поскольку кодировка
в формат Flash-видео уже совершена, появился во Flash-документе.

2.2.7. Îñîáåííîñòè âñòàâêè â ôèëüì âèäåî è çâóêà


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

Íåçàâèñèìîå èñïîëüçîâàíèå âèäåîêëèïà


Чтобы использовать видеоклип во Flash-фильме под управлением стандарт-
ного проигрывателя, следует в процессе импорта (см. разд. 2.2.5) выбрать
опцию Progressive download from a web server (Прогрессивная загрузка с
сервера). В этом случае видеоклип будет вставлен на определенный ключе-
вой кадр (рис. 2.31), с тем, чтобы воспроизводиться независимо от линейки
времени Flash-фильма.

Рис. 2.31. Видеофайл импортирован в виде скомпилированного клипа

Полезно после импорта сразу экспортировать фильм при помощи команды


File > Publish (Файл > Опубликовать), чтобы, во-первых, оценить качество,
с которым импортировался видеофайл; и, во-вторых, убедиться в том, что
Ðàáîòà ñ ôàéëàìè 73

видеоклип контролируется специальной оболочкой-проигрывателем медиа


(рис. 2.32).

Рис. 2.32. Просмотр видеофайла после экспорта фильма в проигрывателе Flash

Ñèíõðîíèçàöèÿ âèäåîêëèïà ñî øêàëîé âðåìåíè


Если при импорте, на соответствующей странице мастера Import Video (Им-
порт видео), выбрать опцию Embed video in SWF and play in timeline (Вне-
дрить видео в SWF-файл для монтажа), то вы получите возможность впо-
следствии, при вставке, синхронизировать видеоклип с линейкой времени
самого Flash-фильма. Рассмотрим подробнее, как это делается.
1. Определите на панели Timeline (Монтаж) слой, на который вы собирае-
тесь вставить клип, например Layer 1, щелкая на заголовке этого слоя.
2. Переместите линию редактирования на тот кадр фильма, в который вы со-
бираетесь осуществить вставку начала видеоклипа.
3. Перетащите клип (в нашем случае, clip.flv) из списка панели Library
(Библиотека) на кадр фильма на панель Stage (Сцена).
4. При необходимости подтвердите увеличение общей длительности Flash-
фильма в соответствии с длительностью вставляемого видео в появившем-
ся диалоговом окне.
74 Ãëàâà 2

5. Убедитесь в том, что на панели Timeline (Монтаж) на слое Layer 1 появи-


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

Рис. 2.33. Вставка видеоклипа на линейку времени фильма

Çâóê
Завершим разговор об использовании мультимедиа во Flash-фильмах упоми-
нанием о возможности вставки в них аудиофрагментов. Для того чтобы изу-
чить две основные опции синхронизации звука, проделайте следующие опе-
рации.
1. Осуществите импорт во Flash какого-либо звукового файла.
2. Выделите на панели Timeline (Монтаж) слой и кадр фильма, на который
вы собираетесь вставить звуковой клип.
3. Перетащите звуковой клип из списка панели Library (Библиотека) на па-
нель Stage (Сцена).
Ðàáîòà ñ ôàéëàìè 75

4. При необходимости отредактируйте положение и длительность аудиокли-


па относительно линейки времени (рис. 2.34).

Рис. 2.34. Аудиоклип на линейке времени фильма

5. На панели Properties (Свойства) выберите тип синхронизации в раскры-


вающемся списке Sync (Синхронизация). Для того чтобы звук был привя-
зан к линейке времени фильма, выберите пункт Stream (Поток), а для не-
зависимого воспроизведения звука — пункт Event (Как событие).
6. Осуществите предварительный просмотр фильма и оцените правильность
вставки в него звука.
7. Дважды щелкните на имени аудиоклипа на панели Library (Библиотека)
и, при необходимости, поменяйте содержимое аудиоклипа нажатием
кнопки Update (Обновить) в диалоговом окне Sound Properties (Свойства
звука) (рис. 2.35).
8. Просмотрите Flash-фильм еще раз, чтобы убедиться, что теперь в нем вос-
производится другой звук.
76 Ãëàâà 2

Рис. 2.35. Аудиоклип можно поменять, заново импортировав его из файла

2.3. Ýêñïîðò ôèëüìà


Результатом работы во Flash является, как правило, создание финального
файла в формате SWF. Для сохранения фильма во внешнем файле следует
выполнить следующие действия.
1. Сделайте активным нужный фильм.
2. Выберите в верхнем меню команду File > Export > Export Movie (Файл >
Экспорт > Экспорт фильма ).
3. В открывшемся диалоговом окне Export Movie (Экспорт фильма) опре-
делите месторасположение файла, его формат и название (рис. 2.36).

При желании, можно экспортировать Flash-фильм и в другом формате, напри-


мер, обычного видеофайла, avi или mov.

4. Нажмите кнопку Save (Сохранить) в диалоговом окне Export Movie (Экс-


порт фильма).
5. В открывшемся диалоговом окне Export Flash Player (Экспорт Flash-
фильма) отредактируйте основные установки экспорта и нажмите кнопку
ОК (рис. 2.37).
Ðàáîòà ñ ôàéëàìè 77

Рис. 2.36. Определите имя и местоположение готового фильма

Рис. 2.37. Определение установок экспорта


78 Ãëàâà 2

6. Наблюдайте за процессом экспорта, сопровождающимся показаниями ин-


дикатора информационного окна.
7. По завершении экспорта запустите просмотр созданного файла в окне со-
ответствующей программы-проигрывателя. Для этого достаточно осуще-
ствить двойной щелчок на имени файла в содержимом той папки, в кото-
рую он был сохранен.
Еще одна важная возможность предварительного просмотра фильма связана с
непосредственным тестированием Flash-фильма в программе, которая будет
использоваться для его финального просмотра. Чаще всего, такой програм-
мой является браузер, поскольку Flash применяется, в основном, для созда-
ния анимации для Интернет. Для предварительного просмотра фильма введи-
те команду File > Publish Preview (Файл > Опубликовать предварительно) и в
появившемся подменю выберите программу просмотра. В частности, выбор
пункта HTML запускает фильм в браузере; выбор пункта Flash запускает его

Рис. 2.38. Установки публикации Flash-фильма задаются в диалоговом окне Publish Settings
Ðàáîòà ñ ôàéëàìè 79

во встроенном проигрывателе Flash-фильмов, выбор других пунктов откры-


вает фильм в соответствующей программе для просмотра рисунков или ани-
мации.
Доступные опции предварительного опубликования можно определить в
диалоговом окне Publish Settings (Настройки публикации), вызываемом од-
ноименной командой верхнего меню File (Файл). В частности, оно служит
для задания набора файлов, которые создаются при публикации фильма, а
также их местоположения (рис. 2.38). Запуск финальной публикации фильма
(в результате которой создаются упомянутые файлы) осуществляется нажа-
тием сочетания клавиш <Shift>+<F12> или вводом команды File > Publish
(Файл > Опубликовать).

2.4. Äîêóìåíòû Flash Lite


(äëÿ ìîáèëüíûõ óñòðîéñòâ)
Рассмотрим, как при помощи программы Flash создаются фильмы для про-
смотра на мобильных устройствах, таких как сотовые телефоны, карманные
компьютеры, смартфоны и т. п. Следует сразу заметить, что мобильное уст-
ройство должно поддерживать определенный стандарт, т. е. на нем можно
было бы установить соответствующий проигрыватель роликов Flash Lite.
Для того чтобы создать мобильный Flash-фильм, проделайте следующее.
1. Начните создание нового документа при помощи команды File > New
(Файл > Создать) или (в том случае, если открытых документов нет) ис-
пользуйте заставку-приглашение (рис. 2.39).
2. В заставке обратитесь к группе Create New (Создать новый фильм).
3. Выберите в качестве типа создаваемого документа шаблон Flash File
(Mobile) (Мобильный файл Flash).
4. Далее, в открывшемся окне независимой программы, называемой Adobe
Device Central CS3, в списке Sample Device Set (Набор установок устрой-
ства) выберите стандарт Flash-файла, который будет подходить для мо-
бильного устройства (рис. 2.40).
5. Если вы хотите использовать конкретное устройство, например телефон
Nokia, то выберите соответствующую модель в нижнем списке Available
Devices (Доступные устройства) окна программы Adobe Device Central
CS3. В этом случае имитация конкретного устройства также возникает в
основной части окна программы Adobe Device Central.
6. Нажмите кнопку Create (Создать), предназначенную для создания Flash-
документа с соответствующими установками.
80 Ãëàâà 2

Рис. 2.39. Выберите шаблон документа для просмотра на мобильных устройствах

Рис. 2.40. Программа Adobe Device Central CS3


предназначена для выбора формата документа
Ðàáîòà ñ ôàéëàìè 81

7. В открывшемся окне Flash сохраните созданный документ под желаемым


именем, пользуясь командой File > Save (Файл > Сохранить).
Возвращаясь к интерфейсу программы Adobe Device Central, отметим, что
при помощи трех верхних раскрывающихся списков в ее окне определяются
версии и типы создаваемого Flash-документа, а именно:
 версия плеера, совместимого с устройством:
• Flash Lite 1.0, Flash Lite 1.1 — ранние версии (совместимые с большим
количеством устройств);
• Flash Lite 2.0, Flash Lite 2.1 — более современные, и, как следствие,
обладающие более серьезными возможностями, версии Flash Lite;
 версия языка ActionScript (1.0 или 2.0);
 тип создаваемого контента:
• Browser (Браузер) — для просмотра Flash-документа соответствующи-
ми программами-браузерами;
• Standalone Player (Независимый проигрыватель) — для просмотра в
независимом проигрывателе Flash.

Не все устройства поддерживают опцию просмотра и в браузере, и в проигрывате-


ле. Чтобы уточнить, какой тип следует определить для того или иного устройства,
обратитесь к вкладке Device Profiles (Профили устройства), в которой содержится
библиотека приведенных устройств (см. рис. 2.44 в конце главы).

Таким образом, первый шаг работы связан с выбором соответствующих вер-


сий Flash-документа, совместимых с мобильными устройствами, либо кон-
кретных моделей телефонов, смартфонов или КПК.
После нажатия кнопки Create (Создать) в окне программы Adobe Device
Central вы возвращаетесь в окно Flash с уже созданным документом с опре-
деленными настройками (рис. 2.41). В примере, показанном на рис. 2.41, соз-
дан документ, размером 240×320 пикселов версии Flash Lite 1.1. Соответст-
венно, при его редактировании можно будет использовать только тот вариант
языка ActionScript, который совместим с версией Flash Lite 1.1.
Вторым, и основным, шагом работы будет определение содержимого для
созданного файла. Делается это точно так же, как и при редактировании
обычных Flash-фильмов. Позаботьтесь лишь о том, чтобы создаваемый кон-
тент удовлетворял версии Flash Lite 1.1. Информацию о том, какие именно
команды языка ActionScript и какие возможности Flash применимы при соз-
дании мобильного контента, вы найдете в справочной системе Adobe Flash,
выбрав в верхнем меню команду Неlp > Flash Неlp (Справка > Справка по
82 Ãëàâà 2

Flash). В частности, справочная система содержит отдельные главы, посвя-


щенные версиям языка Flash Lite 2.0, Flash Lite 2.1 и Flash Lite 1.0, Flash
Lite 1.1. Просматривая главы справочной системы, несложно выявить кон-
кретные возможности, которые существуют для создания Flash-документов
определенного формата.

Рис. 2.41. Документ стандарта Flash Lite, созданный при помощи Adobe Device Central

В качестве иллюстрации работы с мобильными устройствами создадим не-


сложный Flash-фильм стандарта Flash Lite:
1. Импортируйте соответствующие файлы с компьютера, воспользовавшись,
как обычно, командой File > Import > Import to Library (Файл > Им-
порт > Импорт в библиотеку).
2. Перетащите импортированные объекты из панели Library (Библиотека) на
кадр фильма, т. е. на панель Stage (Сцена), расположив их желаемым об-
разом на слоях относительно линейки времени (рис. 2.42).
3. Задайте, при желании, несложную анимацию движения при помощи клю-
чевых кадров.
4. Протестируйте созданный Flash-ролик, воспользовавшись для этого той
же самой программой Adobe Device Central, для чего введите команду
Control > Test Movie (Управление > Тестировать фильм).
Ðàáîòà ñ ôàéëàìè 83

Рис. 2.42. Редактирование документа стандарта Flash Lite

5. При тестировании созданного Flash-фильма в программе Adobe Device


Central выберите из списка слева желаемый эмулятор, имитируя тем са-
мым работу Flash-фильма на мобильном устройстве (рис. 2.43).

Рис. 2.43. Тестирование Flash-фильма в эмуляторе сотового телефона Nokia


84 Ãëàâà 2

Отметим, что для тестирования можно выбрать любую доступную модель из


левого нижнего списка Available Devices (Доступные устройства) програм-
мы Adobe Device Central. Таким образом, Adobe Device Central предоставляет
прекрасное средство для отладки мобильных Flash-фильмов. Остается лишь
упомянуть о вкладке Device Profiles (Профили устройства), в которой нахо-
дится библиотека приведенных устройств. При выборе той или иной модели
из левого нижнего списка Available Devices (Доступные устройства) ее ха-
рактеристики сразу загружаются в основную часть окна программы Adobe
Device Central (рис. 2.44).

Рис. 2.44. Характеристики телефона модели Mitsubishi D505i


в окне программы Adobe Device Central CS3

Итак, разработка мобильного контента в программе Flash осуществляется


примерно в том же ключе, что и для обычных Flash-фильмов. Надо только не
забывать о совместимости разрабатываемых Flash-документов со стандартом
Flash Lite 1 или Flash Lite 2, в зависимости от конкретного устройства, для
которого вы создаете Flash-фильм. Повторимся, что протестировать конст-
руируемый Flash-фильм на совместимость с тем или иным мобильным уст-
ройством легко при помощи программы Adobe Device Central.

2.5. Ðåçþìå
Подведем итог, приведя в завершение главы основные сведения о форматах
файлов, которые тем или иным образом используются во Flash (табл. 2.1).
Ðàáîòà ñ ôàéëàìè 85

Òàáëèöà 2.1. Ôîðìàòû ôàéëîâ, ñîâìåñòèìûõ ñ Adobe Flash

Формат Программа Примечания:


(расши- Главное назначение для просмотра или как Flash исполь-
рение) редактирования зует файлы
fla Сохранение процесса редак- Flash Внутренний формат
тирования фильма — основ- Flash.
ной формат Flash Flash 9 поддержи-
вает форматы:
• Flash 9 (CS 3)
• Flash 8
swf Готовый Flash-фильм Flash Player Импорт/экспорт
Браузеры, например
Microsoft Internet Explorer
exe Вспомогательная программа-проектор для просмотра Создание
готовых Flash-фильмов (SWF-файлов) без дополнитель-
ных программ
html Файлы-оболочки, со связью с готовыми Flash-фильмами, Создание
для просмотра в браузерах
flv Flash-видео Flash Импорт/создание
(внутренний формат Flash) Flash Video Encoder (перекодировка)
avi Видео Медиапроигрыватели, Импорт /
mov например, Windows (иногда экспорт)
mpeg Media Player
и т. д.
gif Растровая графика Графические редакторы Импорт /
bmp и средства просмотра (редко экспорт)
jpeg
и т. д.
ai Векторная графика Специализированные Импорт /
fh графические редакторы, (редко экспорт)
и т. д. например, FreeHand

wav Звук Медиапроигрыватели, Импорт /


au например, Windows (редко экспорт)
mp3 Media Player
и т. д.

Программа Flash способна, таким образом, выполнять три главные операции,


при обращении к внешним файлам:
 сохранение (и открытие) документов во внутреннем формате (FLA);
 импорт графики, звука или видео;
 экспорт готового фильма (чаще всего в собственном формате SWF).
86 Ãëàâà 2

Отметим, что, перечисляя эти операции, мы имеем в виду работу с докумен-


тами, т. е. при непосредственном редактировании фильмов в самой програм-
ме Flash. В свою очередь, готовые фильмы можно построить таким образом,
что они будут обращаться при их просмотре, к примеру, к текстовым или
графическим файлам, и считывать из них информацию в режиме реального
времени. В частности, именно на этом принципе построена работа с видео-
материалом. Внешние видеофайлы сначала необходимо конвертировать во
внутренний формат Flash-видео: файлы с расширением flv, к которым swf-
фильмы обращаются для загрузки видеоинформации.
Вообще говоря, чтобы избежать недоразумений, мы, как и раньше, будем го-
ворить о двух "жизненных стадиях" Flash-фильма:
 разработка (соответственно, осуществляемая разработчиком или пользо-
вателем в самой программе Flash);
 просмотр (соответственно, производимый зрителем фильма, например,
в проигрывателе Flash Player или в браузере).
Иными словами, наша книга адресована разработчикам Flash-фильмов, кото-
рые работают для того, чтобы потенциальные зрители (в частности, загрузив
готовый Flash-фильм через сеть Интернет) смогли впоследствии оценить ре-
зультаты их работы.
ÃËÀÂÀ 3

Êàäðû è ñëîè

Посвятим эту главу основным приемам послойного монтажа фильма, глав-


ным образом, на примере импортированных рисунков. Для компоновки
фильма относительно линейки времени следует использовать панель Time-
line (Монтаж), совмещая действия на ней с просмотром кадров Flash-фильма,
отображаемых на панели Stage (Сцена).
Сначала мы разберем строение панели Timeline (Монтаж) и рассмотрим ос-
новные приемы работы со средой компоновки фильма по слоям на панелях
Timeline (Монтаж) и Stage (Сцена) (см. разд. 3.1), а затем познакомимся с
основными особенностями редактирования слоев и объектов, расположенных
на этих слоях (см. разд. 3.2).

3.1. Êîìïîíîâêà ôèëüìà


íà ïàíåëÿõ Timeline è Stage
Линейный монтаж фильма удобнее всего осуществлять при помощи панели
Timeline (Монтаж), которую часто называют Монтажным столом или Мон-
тажной линейкой. Она служит для визуального монтажа фильмов из исход-
ных клипов относительно шкалы времени.

3.1.1. Ñòðîåíèå ïàíåëè Timeline


Рассмотрим общие детали строения панели Timeline (Монтаж), имея в виду,
что основное ее назначение уже было рассмотрено в главе 1 (см. разд. 1.2.3).
Перечислим основные составляющие панели Timeline (Монтаж) (рис. 3.1):
 вкладка текущего фильма (tab) — если одновременно редактируется не-
сколько фильмов, вкладок на панели Timeline (Монтаж) будет несколько,
88 Ãëàâà 3

причем вся остальная область панели, которую вы видите под вкладками,


относится к данному фильму;

Рис. 3.1. Панель Timeline

 стандартные элементы панели — полосы прокрутки, кнопка вызова меню


панели, кнопки, примыкающие к нижней границе панели Timeline (Мон-
таж), которые служат для совершения тех или иных действий в пределах
панели;
 под вкладками находится шкала времени (timeline) — горизонтальная ли-
нейка с метками времени и ползунковым маркером линии редактирования,
отмечающей текущий кадр фильма (см. разд. 1.2.3);
 тайм-код текущего кадра (timecode) — два поля: с номером кадра и те-
кущим временем;
 слои (layer) — горизонтальные прямоугольные области, занимающие поч-
ти все остальное пространство панели; слои начинаются заголовком, рас-
положенным слева и включающим ряд элементов управления статусом
слоя (включения/выключения и запирания);

Выделенный (по-другому, рабочий) слой отличается от остальных выделенным


цветом своего заголовка.

 графическая область (или область кадров) панели Timeline (Монтаж) —


все пространство слоев, расположенное под шкалой времени и представ-
Êàäðû è ñëîè 89

ляющее собой схематическое расположение кадров фильма вдоль линейки


времени.
Таким образом, определяя на панели Timeline (Монтаж) местоположение
объектов по слоям и их протяженность относительно шкалы времени, вы тем
самым задаете место и продолжительность этих объектов в фильме.
Напомним, что для выбора масштаба временной шкалы следует вызвать ме-
ню панели Timeline (Монтаж) и выбрать желаемое значение масштаба из
списка (рис. 3.2). Если в том же меню установить опцию Short (Коротко), то
слои на панели Timeline (Монтаж) будут иметь минимальную высоту (что
позволит сократить размер этой панели).

Рис. 3.2. Выбор масштаба временной шкалы

3.1.2. Êàäðû ôèëüìà âäîëü ëèíåéêè âðåìåíè


Рассмотрим теперь основной принцип редактирования Flash-фильма при по-
мощи панелей Timeline (Монтаж) и Stage (Сцена). Процесс создания филь-
мов во Flash заключается в послойном расположении различных объектов в
кадре — т. е. на панели Stage (Сцена), с учетом того, что эти объекты займут
определенное место на соответствующем слое вдоль временной шкалы —
т. е. на панели Timeline (Монтаж). Для этого панель Timeline (Монтаж)
включает в себя слои, на которых можно располагать кадры, которые, в свою
очередь, формируются путем размещения на них объектов (рис. 3.3).

Î òèïàõ êàäðîâ
Слои Flash-фильма могут включать кадры различных типов, которые по-
разному отображаются на панели Timeline (Монтаж) (рис. 3.3):
 пустые промежутки, не имеющие никакой заливки, — это участки слоев,
на которых еще нет никаких кадров;
90 Ãëàâà 3

 ключевые кадры:
• пустые — в виде кружков без заливки;
• заполненные — обозначаемые сплошными кружками;
 обычные (промежуточные) кадры:
• пустые — обозначаемые белой заливкой фрагментов слоев;
• заполненные — обозначаемые цветной заливкой;
• последние кадры фрагмента — отмечаемые прямоугольником;
• анимация — в виде стрелки (см. главу 5).

Рис. 3.3. Кадры различного типа на панели Timeline

Ключевой кадр (keyframe) — это такой кадр Flash-фильма, который определя-


ет изменение каких-либо свойств объекта на слое. В частности, ключевой
кадр может задавать появление на слое нового объекта (как для выделенного
кадра слоя Layer 2 на рис. 3.4, на котором в фильме появляется рисунок
НЛО), либо изменение свойств объекта, применяемое обычно для настройки
анимации (см. главу 5). Ключевой кадр может быть и пустым (приготовлен-
ным, как бы, про запас). Например, пустым на рис. 3.4 является первый клю-
чевой кадр слоя Layer 2.
Итак, неизменный во времени фрагмент слоя обозначается последователь-
ностью следующих кадров: "ключевой кадр (кружок) — промежуточные
кадры — последний кадр (прямоугольник)".
Êàäðû è ñëîè 91

Рис. 3.4. Ключевые кадры Flash-фильма обозначаются кружками на панели Timeline

Ðàñïîëîæåíèå êàäðîâ äðóã çà äðóãîì


Обычные (промежуточные) кадры, следующие за ключевым (включая и по-
следний кадр фрагмента), являются точным повторением ключевого кадра.
Например, на рис. 3.4 все кадры слоя Layer 1 идентичны — они содержат
изображение одного и того же рисунка облачного неба. То же касается и слоя
Layer 2 — его начальный фрагмент пуст, а второй (и последний) содержит
изображение рисунка НЛО.
Технология создания Flash-фильма как раз и заключается в расположении
ключевых и обычных кадров по слоям относительно линейки времени на па-
нели Timeline (Монтаж) и размещении на них различных объектов. При этом
перетаскивание какого-либо объекта из панели Library (Библиотека) на па-
нель Stage (Сцена) приводит к его вставке в позицию соответствующего
ключевого кадра.
Таким образом, фильм, приведенный на рис. 3.4, содержит статический клип
с изображением неба, на фоне которого (примерно в середине фильма) появ-
ляется изображение НЛО (на слое Layer 2). За пределами последних кадров
слоев Layer 1 и Layer 2 кадров нет — чтобы получить к ним доступ (и, соот-
ветственно, увеличить длительность фильма), необходимо явно вставить но-
вые кадры на один из слоев.
92 Ãëàâà 3

3.1.3. Ïðèíöèïû êîìïîíîâêè ôèëüìà ïî ñëîÿì


Рассмотрим теперь основные принципы компоновки фильма по слоям на
панелях Stage (Сцена) и Timeline (Монтаж), отметив, прежде всего, что в
фильмах применяются преимущественно объекты трех типов:
 объекты, заготовленные на панели Library (Библиотека);
 текст, графика и анимация, созданные средствами Flash (см. главу 4);
 кнопки — интерактивные элементы Flash.
Здесь важно заметить, что объекты, созданные (или отредактированные) не-
посредственно в программе Flash, можно (и в большинстве случаев даже
предпочтительно) оформить как новые объекты библиотеки, называемые
символами (см. разд. 5.3). В частности, символами являются кнопки.

Ôîí
На каждом слое на панели Timeline (Монтаж) можно размещать графику,
текст, анимацию, звук и т. п. Подложкой Flash-фильма является его фон. Фон
находится под самым нижним слоем и непосредственно на панели Timeline
(Монтаж) отсутствует. Для того чтобы изменить цвет фона:
1. Снимите выделение со всех объектов, если они присутствуют в фильме —
для этого достаточно щелкнуть в свободном месте кадра на панели Stage
(Сцена).
2. Раскройте панель Properties (Свойства).
3. На панели Properties (Свойства) нажмите кнопку Background (Фон).
4. Выберите новый фон фильма из появившейся палитры (рис. 3.5).

Рис. 3.5. Выбор фона Flash-фильма осуществляется на панели Properties


Êàäðû è ñëîè 93

Íàëîæåíèå ñëîåâ äðóã íà äðóãà


Над фоном фильма находится самый нижний слой (на рис. 3.4 это слой
Layer 1), над ним — следующий слой (на рис. 3.4 — Layer 2), и т. д. (если до-
полнительные слои были добавлены пользователем). Их содержимое наслаи-
вается друг на друга, как это показано на рис. 3.6. Из-за того, что размер ри-
сунка с НЛО существенно меньше размера рисунка облачного неба, он зани-
мает лишь небольшую часть кадра фильма. А вот сам рисунок с небом
больше кадра фильма, поэтому фона фильма мы на рис. 3.4 не наблюдаем.

Рис. 3.6. К объяснению принципа наложения слоев

Стоит отметить, что многие рисунки (например, в формате Adobe Photo-


shop — PSD) имеют одну важную особенность, связанную с альфа-каналом,
который определяет разметку прозрачности рисунка. Такая графика содер-
жит сведения не только о самом видимом изображении, но и о дополнитель-
ном канале информации, а именно альфа-канале.
Подведем итог: наложение объектов друг на друга во Flash осуществляется
посредством размещения их один над другим, на соответствующих слоях па-
94 Ãëàâà 3

нели Timeline (Монтаж). Если на каком-либо фрагменте слоя объектов нет, то


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

Íàëîæåíèå îáúåêòîâ â ïðåäåëàõ ñëîÿ


Однако это еще не все. Следует помнить о том, что каждый слой может со-
держать не один, а множество объектов. Порядок наложения этих объектов в
пределах слоя может быть различным. Например, на рис. 3.7 все шесть объ-
ектов находятся на одном слое, накладываясь друг на друга в определенном
порядке.

Рис. 3.7. На одном слое расположены шесть объектов

Чтобы изменить порядок наложения объектов:


1. Выделите объект на панели Stage (Сцена).
2. Вызовите нажатием правой кнопки мыши контекстное меню.
3. Наведите указатель на пункт Arrange (Расположить).
Êàäðû è ñëîè 95

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


манд (рис. 3.8):
• Bring to Front (На передний план) — перемещает выделенный объект
на передний план, впереди всех остальных объектов;
• Bring Forward (Перенести вперед) — перемещает выделенный объект
на один шаг вперед;
• Send Backward (Перенести назад) — отодвигает выделенный объект на
один шаг назад;
• Send to Back (На задний план) — отодвигает выделенный объект на
задний план, позади остальных объектов.

Рис. 3.8. Управление взаимным расположением объектов

Следует напомнить, что одной из опций рисования на слоях является "рисова-


ние наложением" (см. разд. 1.1.2), фактически, означающее рисование на са-
мом слое, точнее, на собственном фоне слоя. Управлять расположением гра-
фики, нарисованной "наложением" нельзя, в противоположность графике, соз-
даваемой путем "рисования объектами".

Подведем итог раздела: подложкой Flash-фильма является его фон, над кото-
рым располагаются слои. При этом, каждый слой может содержать несколько
объектов, в свою очередь, наслаивающихся в определенном порядке в преде-
лах этого слоя.
96 Ãëàâà 3

3.1.4. Äåéñòâèÿ ñî ñëîÿìè


Перечислим основные операции со слоями на панели Timeline (Монтаж),
принятые во Flash.

Ñîçäàíèå íîâîãî ñëîÿ


Во Flash слои могут содержать несколько объектов (клипов, графики и т. п.).
Вследствие этого, перед тем как добавить клип во Flash-фильм, следует поза-
ботиться о наличии соответствующего слоя (который может быть как пус-
тым, так и уже содержать какие-либо объекты).
Чтобы создать новый слой на панели Timeline (Монтаж), достаточно ввести
команду меню Insert > Timeline > Layer (Вставка > Монтажный стол >
Слой), либо воспользоваться кнопкой вставки слоя в левом нижнем углу па-
нели Timeline (Монтаж) (рис. 3.9). Результатом вставки будет появление но-
вого слоя с очередным порядковым номером, например, Layer 2, Layer 3
и т. д.

Рис. 3.9. Создание нового слоя на панели Timeline

Ðåäàêòèðîâàíèå ñëîåâ
Уделим теперь некоторое внимание организации списка слоев на панели
Timeline (Монтаж). Со слоями можно осуществлять следующие основные
операции:
 включение/выключение отображения содержимого слоя на кадре фильма,
а также запирание слоя (запрещение всякого редактирования) — для этого
щелчком установите на заголовке слоя соответствующий признак (пикто-
грамму с глазом или замком);
 переименование — для того чтобы изменить название слоя, щелкните
дважды на его названии и введите новое в позицию появившегося курсора
ввода текста (см. рис. 3.10);
 изменение порядка расположения по вертикали — для того чтобы изме-
нить позицию слоя в фильме, достаточно просто схватиться за заголовок
слоя и перетащить его вверх или вниз;
Êàäðû è ñëîè 97

Рис. 3.10. Переименование слоя Рис. 3.11. Распределение слоев по папкам

 удаление слоя — для этого выделите слой на панели Timeline (Монтаж) и


нажмите кнопку Delete Layer (Удалить слой) с изображением мусорной
корзины в нижней части панели Timeline (Монтаж);
 создание нового слоя — нажмите кнопку Insert Layer (Вставить слой),
чтобы добавить новый слой на панель Timeline (Монтаж);
 создание слоя-траектории (слоя, который не отображается в финальном
Flash-фильме, т. е. не входит в SWF-файл, и служит для настройки траек-
тории для других слоев) — для создания такого слоя нажмите кнопку Add
Motion Guide (Вставить траекторию движения) (подробнее об использо-
вании траекторий написано в разд. 5.2);
 упорядочивание слоев в папках (рис. 3.11) — создание новой папки произ-
водится нажатием кнопки Insert Folder (Вставить папку), а распределение
между папками слоев осуществляется простым перетаскиванием;

При работе с папками принцип наложения слоев на панели Timeline (Монтаж)


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

 изменение атрибутов слоя — для того, чтобы изменить атрибуты слоя в


диалоговом окне Layer Properties (Свойства слоя) (рис. 3.12), вызовите
его двойным щелчком на поле, изображающем цвет, ассоциированный со
слоем;

1
При работе с папками принцип наложения слоев на панели Timeline (Монтаж)
сохраняется, т. е. слои, находящиеся в папках, участвуют в формировании
изображения кадра фильма, причем их место определяется расположением
папки среди остальных слоев.
98 Ãëàâà 3

2
Если вы меняете тип существующего слоя с обычного на тип Folder (Папка), то
учтите, что все содержимое слоя при этом будет потеряно.

Рис. 3.12. Атрибуты существующего слоя можно изменить в диалоговом окне Layer Properties

Рис. 3.13. Для выделенного слоя включен режим Outline (Разметка)


Êàäðû è ñëîè 99

 отображение содержимого слоя на кадре фильма в виде контура


(рис. 3.13) — данный режим включается щелчком на поле, изображающем
цвет, ассоциированный со слоем, на панели Timeline (Монтаж) (вернуть
обычное отображение слоя можно повторным щелчком на данном поле).

Äîáàâëåíèå îáúåêòà íà ñëîé


Рисование на слоях Flash-фильма, либо вставка на слой объектов из панели
Library (Библиотека) осуществляется на сам его кадр, т. е. на панель Stage
(Сцена). Для этого на панели Timeline (Монтаж) необходимо точно опреде-
лить, во-первых, текущий кадр вставки объекта и, во-вторых, текущий слой.

3.1.5. Äåéñòâèÿ ñ êàäðàìè ñëîÿ


Рассмотрим теперь наиболее важные операции с отдельными кадрами (как
ключевыми, так и обычными). Для редактирования кадров на панели Time-
line (Монтаж) предусмотрены следующие операции:
 выделение одного кадра — для этого достаточно щелкнуть на нужном
кадре слоя;
 выделение нескольких кадров — для этого следует применять щелчки при
удерживаемой клавише <Shift> или <Ctrl>;
 выделение неизменного фрагмента слоя от ключевого кадра до последнего
обычного кадра — для этого используется двойной щелчок мыши;

Описанные операции по выделению кадров работают, если выбран режим вы-


деления отдельных кадров (frame based selection). Возможно, вам покажется
более удобным альтернативный режим выделения, когда при щелчке на панели
Timeline (Монтаж) выделяются не кадры, а фрагменты (span based selection).
Для смены режима редактирования выберите в верхнем меню Edit >
Preferences > General (Правка > Настройки > Общие) и установите в открыв-
шемся диалоговом окне флажок Span based selection (Режим выделения
фрагментов).

 перемещение относительно шкалы времени (в пределах одного слоя, либо


с одного слоя на другой) — для этого следует выделить кадр и перетащить
его на новое место (имейте в виду, что при перетаскивании обычного кад-
ра на новое место он автоматически сделается ключевым);
 удаление кадра или фрагмента слоя — достаточно выделить кадр или
фрагмент и нажать клавишу <Del> ;
 вставку в любое место слоя обычного кадра, ключевого кадра или пустого
ключевого кадра — эту операцию следует выполнять при помощи команд
100 Ãëàâà 3

контекстного меню, вызываемого щелчком правой кнопки мыши на нуж-


ном кадре слоя:
• Insert Frame (Вставить кадр);
• Insert Keyframe (Вставить ключевой кадр);
• Insert Blank Keyframe (Вставить пустой ключевой кадр);
 копирование, вырезание и вставку при помощи буфера обмена — соответ-
ствующие общеупотребительные команды доступны в верхнем или кон-
текстном меню;

Привычные команды, например Copy (Копировать) или Paste (Вставить), пред-


назначены для копирования и вставки в буфер объектов изображения кадра
фильма. Если вам нужно скопировать в буфер фрагмент слоя (или нескольких
слоев) линейки времени, т. е. панели Timeline (Монтаж), используйте другие
команды — Copy Frames (Копировать кадры) и Paste Frames (Вставить кадры).

 преобразование обычных кадров в ключевые — достаточно использовать


команды контекстного меню Convert to Keyframes (Преобразовать в клю-
чевой кадр) или Convert to Blank Keyframes (Преобразовать в пустой
ключевой кадр);
 преобразование ключевых кадры в обычные — при помощи команды кон-
текстного меню Clear Keyframe (Удалить ключевой кадр);
 добавление на ключевой кадр слоя объекта из панели Library (Библиоте-
ка) — для этого применяется выделение нужного кадра на панели Time-
line (Монтаж) и последующее перетаскивание этого объекта на панель
Stage (Сцена).

3.1.6. Ïîïðîáóåì ñàìè:


ñëîè è êàäðû íà ïàíåëè Timeline
Приведем в заключение пример несложных действий с фильмом, состоящим
из трех слоев, которые позволят на практике применить сведения, изложен-
ные в предыдущих разделах. А именно, рассмотрим следующие возмож-
ности:
 вставка объекта в нужное место фильма;
 подгонка его длительности;
 размещение объектов друг за другом вдоль линейки времени;
 размещение объектов один над другим — в виде слоев изображения
фильма;
 удаление объектов из фильма.
Êàäðû è ñëîè 101

Для того чтобы разобраться в особенностях компоновки фильма в разных


программах, мы последовательно реализуем каждой из них следующий не-
хитрый сценарий появления (в разных местах кадра) НЛО на фоне голубого
неба (рисунка из графического файла sky.tif).

Конечно, в следующих главах мы рассмотрим, как настраиваются эффекты


анимации, с тем, чтобы НЛО не просто статично висело над пейзажем, а пере-
мещалось по нему, возможно, меняясь в размерах для подчеркивания перспек-
тивы.

Для этого проделайте следующее.


1. Создайте новый документ Flash с установками ActionScript 2.0.
2. Для того чтобы разместить в начале слоя Layer 1 несколько пустых кад-
ров, перенесите линию редактирования на желаемое место и введите
команду Insert > Timeline > Frame (Вставка > Монтажный стол > Кадр).
3. Выделите слой Layer 1 щелчком на его заголовке на панели Timeline
(Монтаж), а затем выделите его первый кадр (который пока является пус-
тым ключевым кадром).
4. Перетащите графический клип (в нашем случае, импортированный рису-
нок с изображением облачного неба) из списка панели Library (Библиоте-
ка) на кадр фильма на панели Stage (Сцена). В результате он будет встав-
лен на весь промежуток, состоящий из вставленных кадров слоя Layer 1 на
панели Timeline (Монтаж) (рис. 3.14).

Рис. 3.14. Рисунок вставлен в текущий ключевой кадр фильма на слой Layer 1
102 Ãëàâà 3

5. Схватитесь за последний кадр фрагмента с рисунком неба на панели


Timeline (Монтаж), который выделен прямоугольником, и перетащите его
ближе к началу фильма, уменьшив тем самым длительность фрагмента.
6. Создайте еще один (третий) слой и переименуйте слои в соответствии с их
содержимым, например, так, как показано на рис. 3.15.
7. Создайте фрагмент из пустых кадров на слое UFO так, как описано в п. 1,
т. е. пользуясь командой Insert > Timeline > Frame (Вставка > Монтаж-
ный стол > Кадр).

Рис. 3.15. Flash-фильм состоит из трех слоев: фоновый рисунок, рисунок с НЛО
и пустой верхний слой (показан момент подгонки длительности фрагмента
с рисунком НЛО на слое UFO)

8. Создайте ключевой кадр на каком-либо внутреннем кадре слоя UFO, уста-


новив на него линию редактирования и введя команду Insert > Timeline >
Keyframe (Вставка > Монтажный стол > Ключевой кадр).
9. При выделенном ключевом кадре слоя UFO на панели Timeline (Монтаж)
перетащите следующий графический клип (в нашем случае, рисунок
меньшего размера с НЛО) из списка панели Library (Библиотека) в же-
лаемое место изображения кадра фильма, т. е. на панель Stage (Сцена).
Êàäðû è ñëîè 103

10. Выделите созданный ключевой кадр и перетащите его вправо, ближе к


концу фильма, уменьшив тем самым длительность демонстрации в филь-
ме картинки НЛО (рис. 3.15).
Обратите внимание на то, что в промежутке от ключевого кадра слоя UFO до
конца фрагмента находится последовательность обычных кадров. При этом,
согласно самому определению обычных кадров, их содержимое будет иден-
тично содержимому ключевого кадра (т. е. включать изображение клипа с
НЛО, как это показано на рис. 3.15).
Немного усложним созданный фильм, чтобы потренироваться в приемах ре-
дактирования во Flash. Для этого проделаем следующие операции.
1. Создайте примерно посередине среднего слоя новый ключевой кадр,
щелкнув на нем и выбрав в контекстном меню команду Insert Keyframe
(Преобразовать в ключевой кадр) (рис. 3.16).

Рис. 3.16. Преобразование обычного кадра в ключевой

2. Выделите второй из образовавшихся фрагментов среднего слоя на панели


Timeline (Монтаж) щелчком на любом его кадре.
3. Перетащите изображение слоя на другое место относительно фонового
рисунка (рис. 3.17).
104 Ãëàâà 3

Рис. 3.17. Переместите изображение слоя по Сцене

4. Просмотрите несколько кадров фильма, чтобы убедиться в том, что дейст-


вие разворачивается следующим образом: "НЛО нет — НЛО появляет-
ся — НЛО скачком перемещается в другое место — НЛО пропадает".
5. Вызовите из кадра слоя (ближе к концу первого фрагмента) контекстное
меню (рис. 3.18) и выберите в нем пункт Insert Blank Keyframe (Вставить
пустой ключевой кадр). В результате между двумя фрагментами среднего
слоя будет создан промежуток, состоящий из пустых кадров (рис. 3.19).
6. Перейдите к созданному пустому промежутку и убедитесь, что этот фраг-
мент фильма не содержит изображения НЛО.
7. Выделите двойным щелчком на панели Timeline (Монтаж) второй из
фрагментов слоя с НЛО.
8. Перетащите выделенный фрагмент на верхний слой, не меняя его распо-
ложения относительно линейки времени (рис. 3.20).
9. Просмотрите фильм, чтобы убедиться, что последняя операция не измени-
ла сценарий: "НЛО нет — НЛО появляется — НЛО исчезает — НЛО по-
является в другом месте — НЛО нет".
Êàäðû è ñëîè 105

Рис. 3.18. Создайте пустой промежуток в середине слоя

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


106 Ãëàâà 3

Рис. 3.20. Переместите фрагмент среднего слоя на верхний слой

Рис. 3.21. Средний и верхний слой перекрываются во времени


Êàäðû è ñëîè 107

10. Перетащите ключевой кадр верхнего слоя вправо, чтобы увеличить дли-
тельность фрагмента на верхнем слое.
11. Переместите тот же фрагмент еще дальше влево, увеличив еще больше
его длительность, чтобы он перекрывался (во времени) со средним слоем.
Таким образом, для короткого промежутка времени фильма в его кадре
будет два НЛО (рис. 3.21).
12. Удалите некоторое количество кадров из фрагмента верхнего слоя. Сде-
лать это можно, выделив их и введя команду контекстного меню Remove
Frames (Удалить кадры), что полностью уберет кадры из фильма. Можно
также выделить первый из кадров и использовать команду Insert Blank
Keyframe (Вставить пустой ключевой кадр), что преобразует конец
фрагмента во фрагмент пустых кадров.
Наконец, последним действием по редактированию фильма во Flash является
его предварительный просмотр и тестирование, для которого, в частности,
может использоваться окно встроенного проигрывателя, вызываемое коман-
дой Control > Test Movie (Управление > Тестировать фильм).

3.2. Ðåäàêòèðîâàíèå îáúåêòîâ íà ñëîÿõ


Обратимся теперь к вопросам редактирования слоев на панели Stage (Сцена),
осуществляемого при помощи инструментов с панели Tools (Инстру-
ментарий).

3.2.1. Èíñòðóìåíòàðèé
Действия над слоями на панели Stage (Сцена) связаны, в основном, с визу-
альным методом редактирования непосредственно в кадре фильма. Для
осуществления любых операций над слоем следует выбрать подходящий
инструмент на панели Tools (Инструментарий) (рис. 3.22).
Панель Tools (Инструментарий) включает в себя несколько групп кнопок,
верхние из которых применяются для выбора инструментов, а нижние — для
задания рабочих цветов и соответствующих опций работы. Содержимое двух
последних групп является контекстно-зависимым, т. е., исходя из того, какой
именно инструмент выбран, они предлагают пользователю цвета и режимы
работы, которые предусмотрены для этого инструмента.
Перечислим инструменты, имеющиеся на панели Tools (Инструментарий),
учитывая, что некоторые из них совмещены в общих кнопках (и для того,
чтобы выбрать скрытый инструмент, следует нажать и удерживать такую
кнопку до появления подменю).
108 Ãëàâà 3

Рис. 3.22. Панель Tools

 Группа Tools (Инструменты):


• Selection (Выбор) — для выделения содержимого слоев;
• Subselection (Субвыбор) — для выделения и редактирования контуров
объектов (маркеров разметки слоев, линий и т. п.);
• Free Transform (Преобразование) — для свободного преобразования
объектов (перемещения, масштабирования, поворотов и сдвига);
• Gradient Transform (Преобразование градиента) — для редактирова-
ния градиентной и растровой заливки объектов;
• Line (Линия) — для рисования прямых линий;
• Lasso (Лассо) — для выделения объектов областью произвольной формы;
• Pen (Перо) — для точного рисования линий в форме прямых или
кривых;
Êàäðû è ñëîè 109

• Text (Текст) — для создания текста;


• Oval (Овал) — для рисования эллипсов;
• Rectangle (Прямоугольник) — для рисования прямоугольников (со-
вмещен в одной кнопке с инструментом для рисования многоугольни-
ков);
• Polystar (Многоугольник) — для рисования многоугольников и звезд,
параметры которых задаются на панели Properties (Свойства);
• Pencil (Карандаш) — для рисования линий "от руки";
• Brush (Кисть) — для рисования жирными линиями;
• Ink Bottle (Обрамление) — для изменения цвета линии обрамления
объектов;
• Paint Bucket (Заливка) — для заливки объектов;
• Eyedropper (Пипетка) — для "зачерпывания" текущего цвета из любо-
го места кадра фильма;
• Eraser (Ластик) — для стирания объектов.
 Группа View (Вид):
• Hand (Рука) — для визуального перемещения видимого поля кадра
фильма в пределах панели Stage (Сцена);
• Zoom (Масштаб) — для выбора масштаба отображения кадра.
 Группа Colors (Цвета):
• Stroke Color (Цвет обрамления) — выбор из палитры цветов текущего
цвета, который будет использоваться для линий обрамления при рисо-
вании объектов;
• Fill Color (Цвет заливки) — выбор текущего цвета заливки объектов;
• Black and White (Черно-белая палитра) — включение черно-белого
режима заливки и обрамления;
• No Colors (Нет цветов) — выбор прозрачного цвета в качестве теку-
щего;
• Swap Colors (Поменять цвета) — смена (один на другой) текущих цве-
тов линий обрамления и заливки.
 Группа Options (Опции) — несколько кнопок, состав которых различен,
в зависимости от выбранного инструмента и определяет параметры его
применения.
110 Ãëàâà 3

3.2.2. Ìèêøåð öâåòîâ


Еще одна панель, которая широко применяется для редактирования объек-
тов, — это панель Color (Цвет) (рис. 3.23). Она предназначена для управле-
ния цветом объектов на слоях.

Рис. 3.23. Панели Color и Swatches

Перечислим основные элементы управления, присутствующие на панели


Color Mixer (Микшер цветов).
 Stroke Color (Цвет обрамления) — поле выбора цвета линий обрамления
объектов;
 Fill Color (Цвет заливки) — поле выбора цвета заливки;
 Type (Тип) — раскрывающийся список выбора типа градиента цвета за-
ливки (предварительный просмотр выбранного цвета, с учетом градиента,
приводится в нижней части панели):
• None (Нет);
• Solid (Сплошной);
• Linear (Линейный);
• Radial (Круговой);
• Bitmap (Рисунок);
 RGB — поля числового ввода интенсивностей основных цветов (красного,
зеленого и синего);
 Alpha (Альфа) — поле числового ввода значения прозрачности выбранно-
го цвета.
Êàäðû è ñëîè 111

Еще одна панель, которая служит для настройки цвета, — это панель
Swatches (Образцы цветов). С ее помощью удобно выбирать стандартные
цвета из ограниченного набора недавно использовавшихся цветов (рис. 3.23).
Для того чтобы поменять цвет заливки или обрамления объекта на слое, не-
обходимо его выделить на панелях Timeline (Монтаж) и Stage (Сцена) и за-
тем определить соответствующие цвета на панели Color (Цвет) (рис. 3.24).

Цвет и стиль обрамления и заливки допускается выбирать не для всех классов


объектов, а, в частности, для нарисованных в самой программе Flash.

Рис. 3.24. Использование панели Color для редактирования объекта

3.2.3. Âñòàâêà îáúåêòîâ â ôèëüì


Напомним, как осуществляется вставка объектов из панели Library (Библио-
тека) в фильм.
1. Выделите на панели Timeline (Монтаж) слой, а на этом слое нужный кадр
(или фрагмент слоя, начиная с некоторого ключевого кадра), в позицию
которого вы собираетесь вставить объект.
2. Перетащите объект из панели Library (Библиотека) на изображение кадра
фильма, т. е. на панель Stage (Сцена) (рис. 3.25).
В результате на текущем слое появится изображение объекта. Во Flash-
фильме на существующий слой можно добавлять все новые и новые объекты
из панели Library (Библиотека). При необходимости можно отредактировать
продолжительность демонстрации вставленного объекта в фильме (рис. 3.26).
Всегда помните о том, что кадры, на которых что-то происходит (в част-
ности, в фильме появляются новые объекты), всегда являются ключевыми
112 Ãëàâà 3

Рис. 3.25. Вставка объекта в фильм

Рис. 3.26. Редактирование длительности вставленного объекта в фильме


Êàäðû è ñëîè 113

кадрами. Для редактирования объекта на некотором промежутке фильма, еще


не обозначенном на панели Timeline (Монтаж), необходимо сначала выде-
лить этот промежуток и создать на его первом кадре новый ключевой кадр.

3.2.4. Âûäåëåíèå, ïåðåìåùåíèå


è óäàëåíèå îáúåêòîâ
Для выделения объектов на кадре фильма во Flash имеются три инструмента:
Selection (Выбор), Subselection (Субвыбор) и Lasso (Лассо). В первую очередь,
отметим различие в использовании первых двух инструментов. В то время как
инструмент Selection (Выбор) предназначен для выделения объекта как еди-
ного целого (например, для последующего перемещения на новое место), ин-
струмент Subselection (Субвыбор) применяется для выделения отдельных со-
ставных элементов объектов (контуров, линий, точек привязки и т. д.). После
такого выделения объект допускается редактировать, меняя его форму тем же
инструментом Subselection (Субвыбор) (см. разд. 4.2.9).

Рис. 3.27. Выделение объекта инструментами Selection и Subselection (коллаж)

При помощи инструментов выделения, в зависимости от текущей задачи, можно


выделить объекты на кадре Flash-фильма целым рядом различных способов.
Приведем некоторые из них.
 Для выделения объекта, группы объектов, одной линии обрамления объ-
екта или одной заливки объекта щелкните на нем инструментом Selection
(Выбор). Чтобы потом переместить объект, достаточно перетащить его на
новое место в кадре фильма тем же инструментом Selection (Выбор). Вы-
делять и перетаскивать можно один или сразу несколько объектов
(рис. 3.28).
 Для выделения объекта вместе с его заливкой дважды щелкните на залив-
ке инструментом Selection (Выбор). В результате будет выделена как ли-
ния обрамления, так и заливка.
114 Ãëàâà 3

Рис. 3.28. Перемещение группы объектов инструментом Selection

 Для выделения одной линии соединения объектов дважды щелкните на


ней инструментом Selection (Выбор). (Рис. 3.29 демонстрирует после-
дующее перемещение одной линии обрамления круга по кадру фильма.)
 Для выделения объектов, занимающих определенную (прямоугольную)
область кадра фильма, протащите инструмент Selection (Выбор) через эту
область при нажатой кнопке мыши.
 Для того чтобы добавить к уже выделенным объектам еще один или не-
сколько, нажмите и удерживайте клавишу <Shift>, а потом выделите но-
вые объекты инструментом Selection (Выбор).
 Для выделения всех объектов текущего кадра на всех слоях нажмите на
клавиатуре сочетание клавиш <Ctrl>+<A>.
 Для выделения объектов, расположенных в области произвольного разме-
ра, определите ее, "нарисовав" на кадре фильма инструментом Lasso (Лас-
со) (рис. 3.30). При желании можно задать область в виде многоугольника,
предварительно установив соответствующий режим нажатием нижней
кнопки из группы Options (Опции). Вершины многоугольника определя-
ются щелчками инструментом Lasso (Лассо) на кадре фильма.
Êàäðû è ñëîè 115

Рис. 3.29. Перемещение одной линии обрамления инструментом Selection

Рис. 3.30. Выделение объекта инструментом Lasso

Для удаления выделенного объекта достаточно нажать клавишу <Del> на


клавиатуре, либо выбрать в верхнем меню Edit > Clear (Правка > Удалить).

3.2.5. Ìàñøòàáèðîâàíèå, ñäâèãè è ïîâîðîòû


Изображение объектов в кадре фильма можно увеличить или уменьшить в
размерах, исказить или повернуть. Для перечисленных операций применяется
инструмент Free Transform (Трансформирование).
116 Ãëàâà 3

Чтобы освоить их, проведите следующие простые действия.


1. Выделите желаемый объект (или несколько объектов), например, при по-
мощи инструмента Selection (Выбор).
2. Выберите на панели Tools (Инструментарий) инструмент Free Transform
(Трансформирование).
3. Хватаясь инструментом Free Transform (Трансформирование) за маркер
обрамления объекта и перетаскивая маркер в ту или иную сторону, добей-
тесь желаемого увеличения или уменьшения объекта (рис. 3.31).

Рис. 3.31. Масштабирование слоев производится перетаскиванием


маркеров обрамления при помощи инструмента Free Transform

4. Для сохранения пропорций объекта нажмите и удерживайте при масшта-


бировании клавишу <Shift>.
5. Чтобы изменить форму объекта, задав перемещение только перетаскивае-
мого маркера, удерживайте при его перетаскивании нажатой клавишу
<Ctrl>.
6. Для поворота объекта наведите указатель на один из углов его контура об-
рамления (рядом с маркером обрамления). Когда указатель приобретет
вид, который будет говорить об операции поворота, нажмите кнопку мы-
ши и сместите указатель в желаемом направлении, ориентируясь на кон-
турное изображение нового положения объекта (рис. 3.32).
Êàäðû è ñëîè 117

Рис. 3.32. Поворот объектов вокруг точки привязки

7. Чтобы изменить положение центра вращения объекта, переместите инст-


рументом Free Transform (Трансформирование) его точку привязки
(anchor point) на другое место кадра фильма. Точка привязки обозначает-
ся белым кружком и по умолчанию находится в центре объекта. Она не
влияет на внешний вид самого слоя, но играет определяющую роль как
при вращении слоев, так и при некоторых других операциях (например,
при отражении).
8. Попробуйте осуществить вращение объекта еще раз, убедившись, что он
поворачивается вокруг нового положения точки привязки (рис. 3.33).
9. Для того чтобы настроить для объекта характерное искажение, наведите
указатель на одну из его линий обрамления и, дождавшись изменения его
вида на пиктограмму, символизирующую операцию сдвига, сместите ли-
нию обрамления в желаемом направлении (рис. 3.34).
10. Для отражения объекта относительно вертикальной или горизонтальной
оси, выделите его и выберите в верхнем меню Modify > Transform > Flip
Vertical (Преобразовать > Трансформировать > Отразить вертикально)
или Modify > Transform > Flip Horizontal (Преобразовать > Трансфор-
мировать > Отразить горизонтально).
11. Чтобы вернуть выделенный объект к исходному виду, выберите Modify >
Transform > Remove Transform (Преобразовать > Трансформировать >
Удалить трансформирование).
118 Ãëàâà 3

Рис. 3.33. Поворот объекта (точка привязки перемещена в другое место)

Рис. 3.34. Сдвиг объекта


Êàäðû è ñëîè 119

Рис. 3.35. Панель Transform

В заключение отметим, что большинство перечисленных операций допуска-


ется осуществлять не только при помощи инструмента Free Transform
(Трансформирование), но и заданием числовых значений соответствующих
параметров (вертикального и горизонтального масштаба, углов поворота и
сдвига) на специально предусмотренной для этого панели Transform
(Трансформирование) (рис. 3.35). В частности, допускается операция созда-
ния копии объекта с измененными характеристиками, для чего следует сна-
чала выбрать желаемые параметры на панели Transform (Трансформирова-
ние), а затем нажать на ней кнопку Transform and Copy (Трансформировать
и копировать) (рис. 3.36).

Рис. 3.36. Создание копии объекта с его одновременным преобразованием

3.2.6. Âûðàâíèâàíèå è ðàñïîëîæåíèå


Задачи выравнивания и упорядочивания объектов в определенном направле-
нии решаются при помощи панели Align (Выравнивание), которая вызывает-
ся командой Window > Align (Окно > Выравнивание). Для выполнения того
или иного действия достаточно выделить объекты и нажать кнопку с пикто-
граммой, представляющей желаемый тип выравнивания или расположения
объектов. В зависимости от того, включена или нет опция To stage (По отно-
шению к сцене), выравнивание и распределение объектов будет произведено
либо по отношению к самим этим объектам, либо по отношению к границам
кадра фильма.
120 Ãëàâà 3

Панель Align (Выравнивание) включает несколько групп кнопок (рис. 3.37):


 Align (Выравнивание);
 Distribute (Расположение);
 Match size (Подгонка размера);
 Space (Промежуток).

Рис. 3.37. Панель Align

3.2.7. Îòìåíà íåæåëàòåëüíûõ äåéñòâèé


Отменить последнее действие по редактированию фильма можно с лег-
костью, либо выбрав в верхнем меню команду Edit > Undo (Правка > Отме-

Рис. 3.38. Панель History


Êàäðû è ñëîè 121

нить), либо нажав комбинацию клавиш <Ctrl>+<Z>. Для повторения ранее


отмененного действия служит команда Edit > Redo (Правка > Повторить)
либо комбинация клавиш <Ctrl>+<Shift>+<Z>.

Для повторения и отмены последовательности последних действий можно вос-


пользоваться панелью History (Журнал) (рис. 3.38).
ÃËÀÂÀ 4

Ðèñîâàíèå

Рисование разнообразных графических примитивов (см. разд. 4.2) и тексто-


вых объектов (см. разд. 4.3) во Flash осуществляется на слоях на панели
Stage (Сцена), на ключевых кадрах фильма, определенных на панели Time-
line (Монтаж). Рисование производится инструментами, выбираемыми на
панели Tools (Инструментарий), а режимы и опции рисования выбираются на
панели Properties (Свойства) (см. разд. 4.1) , причем цвет создаваемых объ-
ектов удобнее всего определить посредством панели Color (Цвет).

4.1. Ðåæèìû ðèñîâàíèÿ


Рисование при помощи различных инструментов предусматривает возмож-
ность задания различных параметров. Режимы зависят от того, какой именно
инструмент вы используете, а их выбор осуществляется при помощи двух
панелей:
 Tools (Инструментарий), которая (в своей нижней части) содержит не-
сколько контекстно-зависимых кнопок группы Options (Опции) (рис. 4.1);
 Properties (Свойства), при помощи которой легко определить стиль и
толщину линии обрамления объекта, цвет заливки и т. д.

Параметры цвета заливки и обрамления, доступные на панели Properties


(Свойства), дублируются на панели Color (Цвет).

В рамках этого вводного раздела мы остановимся на нескольких, наиболее


важных, режимах рисования.
124 Ãëàâà 4

4.1.1. Ðèñîâàíèå îáúåêòîâ


При рисовании на слоях очень важно представлять себе, что во Flash преду-
смотрено два режима: включенной и выключенной опции рисования объек-
тов (object drawing). В зависимости от того, какой из режимов использовался
при создании объекта, впоследствии его можно будет редактировать либо как
единое целое, либо просто как закрашенные области слоя. Переключение ре-
жимов осуществляется кнопкой Object Drawing (Рисование объекта) группы
Options (Опции) на панели Tools (Инструментарий) (рис. 4.1).

Рис. 4.1. Включение режима рисования объекта на панели Tools

Если, к примеру, нарисовать прямоугольник при включенном режиме Object


Drawing (Рисование объекта), то он будет добавлен к фильму в виде объекта,
не зависящего от остальных. В частности, затем его можно будет передви-
нуть на новое место, вернув прежний вид фона, находившегося под ним. Та-
ким образом, объекты, накладываясь друг на друга, полностью сохраняют
информацию о нижележащих объектах слоя (рис. 4.2).
Если, напротив, перед рисованием отключить режим Object Drawing (Рисо-
вание объекта), то создаваемая графика "закрасит" содержимое кадра фильма,
находящееся под ней. Например, нарисованный таким способом прямоуголь-
ник (рис. 4.2, справа) при последующем перетаскивании инструментом
Selection (Выбор) обнажит на слое пустое пространство. Поэтому данный
режим называют также "рисованием наложением" (merge drawing).
Ðèñîâàíèå 125

Рис. 4.2. К объяснению режима рисования объектов

Рис. 4.3. Овал нарисован как объект


126 Ãëàâà 4

Графику, нарисованную в режиме Object Drawing (Рисование объекта), лег-


ко перевести в разряд "раскраски" слоя, проведя ее разбиение на обрамление
и заливку. Для этого достаточно ввести команду верхнего меню Modify >
Break Apart (Преобразовать > Разбить). Результат разбиения графического
примитива, нарисованного как объект (рис. 4.3), показан на рис. 4.4.

Рис. 4.4. Результат разбиения овала

4.1.2. Ðåæèì ïðèòÿæåíèÿ


Говоря об опциях рисования, нельзя не сказать о режиме Snap (Притягивать),
включение которого на панели Tools (Инструментарий) (рис. 4.5) приводит
к тому, что объекты при рисовании и перетаскивании начинают автоматиче-
ски "притягиваться" к границам других объектов, присутствующим в кадре
фильма.

Рис. 4.5. Режим притяжения к объектам


включается на панели Tools

4.1.3. Öâåò îáðàìëåíèÿ è çàëèâêè


Перед тем как вы начинаете рисовать тот или иной объект (линию, прямо-
угольник или т. п.), желательно определить те цвета, при помощи которых он
будет нарисован. Вне зависимости от того, какой режим рисования выбран
Ðèñîâàíèå 127

(рисования объектов или рисования наложения), при создании объекта будут


использованы два рабочих цвета (рис. 4.6):
 Stroke (Обрамление) — цвет, которым будет нарисован контур, обрам-
ляющий объект (линия обрамления);
 Fill (Заливка) — цвет внутренней области объекта

Рис. 4.6. Цвета заливки и обрамления можно выбрать на различных панелях

Цвета заливки или обрамления объекта доступны не только на панели Tools


(Инструментарий), но и на панелях Color (Цвет) и Properties (Свойства). Из-
менение рабочего цвета на любой из этих панелей влечет за собой автомати-
ческое синхронное изменение цвета и на других панелях.
Для того чтобы выбрать рабочие цвета для вновь создаваемого объекта, сни-
мите выделение со всех объектов фильма на панели Stage (Сцена) (для этого
можно щелкнуть в любом свободном месте кадра фильма), а затем раскройте
соответствующий список выбора цвета на любой из панелей Tools (Инстру-
ментарий), Color (Цвет) или Properties (Свойства) (рис. 4.7). Затем остается
только выбрать желаемый цвет из раскрывающегося списка с набором цве-
тов — а состав этого набора цветов допускается редактировать при помощи
панели Swatches (Набор цветов).

Если в момент определения цвета какой-либо объект будет выделен на панели


Stage (Сцена), то изменение цвета обрамления и/или заливки будет применено
к этому объекту.
128 Ãëàâà 4

Рис. 4.7. Выбор цвета заливки из набора цветов Рис. 4.8. Линия обрамления выключена

Линию обрамления или заливку любого объекта можно выключить, выбирая


в соответствующем списке выбора цвета символический элемент с пикто-
граммой в виде перечеркивания (рис. 4.8).

4.1.4. Ñòèëü îáðàìëåíèÿ


Еще один важный параметр, имеющий значение для большинства графиче-
ских примитивов, — это стиль линии обрамления. Для его определения обра-
титесь к одноименному раскрывающему списку на панели Properties (Свой-
ства) и выберите желаемый вид линии обрамления (рис. 4.9).

Рис. 4.9. Выбор стиля линии обрамления

Аналогичным образом на панели Properties (Свойства) определяется и тол-


щина линии обрамления (рис. 4.10).
Ðèñîâàíèå 129

Рис. 4.10. Выбор толщины линии обрамления

4.1.5. Êðàÿ ëèíèè


Еще два менее значимых параметра, которые устанавливаются на панели
Properties (Свойства), задают различную форму крайних точек рисованных
линий (рис. 4.11).
 Cap (Конец) — параметр, задающий стиль, применяемый автоматически
на конце линии:
• None (Нет) — конец линии не добавляется;
• Round (Сглаживание) — на конце линии добавляется скругление;
• Square (Квадрат) — каждой линии добавляется конец, равный по раз-
меру половине ее толщины.
 Join (Точка соединения) — параметр, определяющий соединение двух на-
рисованных линий:
• Miter (Острие);
• Round (Сглаживание);
• Bevel (Отсекание).
Смысл этих параметров пояснен рис. 4.12, верхняя часть которого иллюстри-
рует, соответственно, три варианта установки параметра Cap (Конец), а ниж-
няя — параметра Join (Точка соединения). Для тонких линий они не имеют
большого значения, а для толстых их правильное задание может значительно
улучшить качество создаваемой графики.
130 Ãëàâà 4

Рис. 4.11. Установка параметров Cap и Join

Рис. 4.12. Пояснение смысла параметров Cap (сверху) и Join (снизу)

4.2. Ðèñîâàíèå
Рассмотрим теперь, как во Flash осуществляется рисование графических
примитивов при помощи различных инструментов, выбираемых на панели
Tools (Инструментарий).

4.2.1. Êàðàíäàø
Применение инструмента Pencil (Карандаш) очень похоже на рисование
сплошных или прерывистых линий "от руки", подобно тому, как принято пи-
сать настоящим карандашом на листе бумаги. При нажатой кнопке мыши ка-
рандаш рисует на выделенном слое линию, перемещаясь за указателем, а при
отпускании кнопки мыши рисование линии прерывается. Цвет и стиль линий
выбирается, как обычно, на панели Properties (Свойства).
Рисование карандашом предусматривает три разных режима, задаваемых на
панели Tools (Инструментарий) в нижней области Options (Опции) (рис. 4.11):
 Straighten (Прямые) — для рисования прямыми линиями (спрямление на-
рисованных фрагментов производится автоматически);
Ðèñîâàíèå 131

 Smooth (Сглаженные) — для рисования сглаженными линиями, причем


сглаживание осуществляется самой программой Flash после того, как вы
оторвете карандаш от слоя, а степень сглаживания определяется парамет-
ром Smoothing (Сглаживание) на панели Properties (Свойства);
 Ink (Ручка) — для рисования линий, в полном смысле слова, "от руки",
без применения сглаживающих алгоритмов.
Слово "pencil" на рис. 4.13 написано Карандашом в двух вариантах: сглажен-
ными линиями (снизу) и со спрямлением линий (сверху). Отметим также, что
степень автоматического сглаживания линий может быть различной, а вы-
брать ее можно посредством поля числового ввода и /или регулятора
Smoothing (Сглаживание) (рис. 4.14).

Рис. 4.13. Рисование Карандашом

Рис. 4.14. Управление сглаживанием линий при рисовании Карандашом


132 Ãëàâà 4

4.2.2. Êèñòü
Рисование инструментом Brush (Кисть) похоже на рисование карандашом и
применяется, к примеру, для каллиграфического письма на слоях Flash-
фильма (рис. 4.15). В частности, принцип рисования ("от руки") остается тем
же, и на панели Properties (Свойства) можно задать значение параметра
Smoothing (Сглаживание).

Рис. 4.15. Использование инструмента Brush

Применение инструмента Brush (Кисть), в отличие от инструмента Pencil


(Карандаш), позволяет достичь эффекта смешивания рисованных областей с
заливкой фоновых объектов, которые присутствовали на слое до рисования.
Для этого следует выбрать желаемый режим действия инструмента Brush
(Кисть) на содержимое слоя (рис. 4.15):
 Paint Normal (Обычное рисование) — применяется для рисования как на
линиях, так и на заливке объектов, которые имеются на выделенном слое;
 Paint Fills (Рисование заливки) — рисует только на заливке объектов и
пустом месте слоя, оставляя линии обрамления нетронутыми;
 Paint Behind (Рисование сзади) — рисует только на пустом пространстве
слоя, оставляя линии обрамления и заливку объектов нетронутыми;
Ðèñîâàíèå 133

 Paint Selection (Рисование на выделении) — рисует только на заливке тех


областей, которые были предварительно выделены, например, инструмен-
том Selection (Выбор);
 Paint Inside (Рисование внутри) — рисует только на той заливке объекта,
с которой вы начали применение инструмента Brush (Кисть) (не меняя
заливки остальных объектов и не затрагивая никаких линий обрамления).
Размер и форма "наконечника кисти", которым осуществляется рисование,
выбираются на панели Options (Опции) посредством двух раскрывающихся
списков (рис. 4.16).

Рис. 4.16. Выбор


наконечника кисти
для инструмента Brush

4.2.3. Ëàñòèê
Для быстрого стирания существующих объектов (фактически, для рисования
невидимых линий, уничтожающих содержимое кадра) предназначен инстру-
мент Eraser (Ластик). Перед тем как его использовать, следует в нижней
части панели Tools (Инструментарий) выбрать "наконечник ластика" (анало-
гично использованию "наконечника кисти", показанному на рис. 4.16) и же-
лаемый режим стирания (рис. 4.17):
 Erase Normal (Обычное стирание) — стирает и заливку, и обрамление;
 Erase Fills (Стирание заливки) — стирает только заливку объектов;
 Erase Lines (Стирание обрамления) — стирает только линии обрамления;
 Erase Selected Fills (Стирание выделенной заливки) — стирает только
предварительно выделенную заливку объектов (не трогая их обрамление,
вне зависимости от того, выделено оно или нет);
134 Ãëàâà 4

 Erase Inside (Стирание внутри) — стирает только ту заливку, которую вы


начали стирать (не трогая ни заливки остальных объектов, ни обрам-
ление).

Рис. 4.17. Стирание инструментом Eraser

4.2.4. Ëèíèÿ, ýëëèïñ, ïðÿìîóãîëüíèê


Для создания одного из стандартных графических примитивов следует сна-
чала выбрать соответствующий инструмент, а затем нарисовать контуры это-
го примитива на кадре фильма, используя протаскивание указателя при нажа-
той левой кнопке мыши. После того как кнопка мыши будет отпущена, объ-
ект будет добавлен к выделенному слою фильма (рис. 4.18 и 4.19).

Рис. 4.18. Рисование графических примитивов (на примере линии)

Для создания объекта правильной формы (например, квадрата вместо прямо-


угольника, окружности вместо эллипса, строго горизонтальной или верти-
кальной линии и т. п.), в момент протаскивания указателя мыши через кадр
следует удерживать на клавиатуре в нажатом состоянии клавишу <Shift>.
Ðèñîâàíèå 135

Тогда масштаб объекта по вертикали и горизонтали будет принудительно


выдерживаться одинаковым, и объект будет симметричным.

Рис. 4.19. Рисование графических примитивов (на примере прямоугольника)

Перечислим инструменты, которые используются для создания примитивов,


подчеркнув, что все они, за исключением инструмента Line (Линия), совме-
щены в одной кнопке панели Tools (Инструментарий), и для выбора нужного
инструмента следует нажать и короткое время удерживать соответствующую
кнопку, а затем выбрать нужный пункт появившегося подменю (рис. 4.20).
Перечислим инструменты, служащие для создания графических примитивов.
 Line (Линия) — создает отрезки прямых линий;
 Rectangle (Прямоугольник) — служит для рисования прямоугольников;
 Oval (Овал) — создает эллипсы (овалы);
 Rectangle Primitive (Примитив Прямоугольник) — применяется для ри-
сования прямоугольников с дополнительной опцией скругления вершин
(рис. 4.21);
 Oval Primitive (Примитив Овал) — создает эллипсы с дополнительными
свойствами;
 PolyStar (Многоугольник) — служит для рисования многоугольников и
звезд.
Для того чтобы нарисовать эллипс или прямоугольник в режиме примитива,
следует выбрать инструмент Oval Primitive (Примитив Овал) или Rectangle
136 Ãëàâà 4

Рис. 4.20. Выбор инструмента для рисования графического примитива

Рис. 4.21. Рисование прямоугольника со скругленными вершинами


Ðèñîâàíèå 137

Primitive (Примитив Прямоугольник), соответственно, нарисовать его обыч-


ным способом, а затем на панели Properties (Свойства) определить дополни-
тельные параметры. Для примитива-прямоугольника этими параметрами яв-
ляются степень сглаженности каждой из вершин, а для примитива-овала —
Start Angle (Начальный угол), End Angle (Конечный угол) и Inner Radius
(Внутренний радиус), что позволяет нарисовать примитив в виде сегмента
или кольца (рис. 4.22).

Рис. 4.22. Рисование овала в режиме примитива

4.2.5. Ìíîãîóãîëüíèê è çâåçäà


Для создания многоугольников и звезд служит инструмент Polystar (Много-
угольник), также совмещенный в одной кнопке с прямоугольниками и овала-
ми. Рисование многоугольников и звезд выполняется точно так же, как и дру-
гих примитивов — при помощи нажатия кнопки мыши и последующего про-
таскивания указателя через изображение слоя фильма (рис. 4.23).

Рис. 4.23. Рисование многоугольника и звезды


138 Ãëàâà 4

Параметры этих примитивов задаются в диалоговом окне Tool Settings (На-


стройки инструмента), вызываемом нажатием кнопки Options (Опции) на
панели Properties (Свойства). Перед тем как рисовать фигуру, следует опре-
делить в этом диалоговом окне (рис. 4.24) ее тип в раскрывающемся списке
Style (Стиль), т. е. polygon (многоугольник) или star (звезда), а также число
вершин в раскрывающемся списке Number of Sides (Число вершин). Для
звезд имеется возможность выбора остроты лучей путем определения пара-
метра Star point size (Размер внутренней части звезды), задаваемого в отно-
сительных единицах.

Рис. 4.24. Выбор параметров многоугольников и звезд

4.2.6. Ïåðî
Во Flash 9 опция рисования кривых в форме кривых Безье реализована при
помощи группы инструментов Pen (Перо) (рис. 4.25), служащих для точного
рисования линий по отрезкам, которые могут быть как отрезками прямых, так
и кривых. В основе работы этого инструмента лежит повсеместно распро-
страненный в компьютерной графике алгоритм Безье. Кривые Безье — это
кривые, состоящие из отдельных участков, отделенных друг от друга управ-
ляющими маркерами или, по-другому, точками привязки (anchor point), кото-
рые можно, в свою очередь, редактировать при помощи управляющих линий.
Кривые Безье, подобно другим объектам, могут иметь не только линию об-
рамления, но и заливку.
Рисование сглаженных сегментов заключается в определении вершин кривой
нажатием кнопки мыши и последующем удерживании ее в нажатом состоя-
нии. Через небольшой промежуток времени после нажатия на экране возни-
кают так называемые управляющие линии, перетаскивая вершины которых
мышью можно добиться желаемой формы сегмента (рис. 4.26).
Кривые Безье рассчитываются исходя из перемещения пользователем марке-
ров и управляющих линий по сцене, по весьма сложным математическим ал-
горитмам. При работе с кривыми Безье гораздо важнее представлять, хотя бы
на интуитивном уровне, как действия пользователя будут влиять на форму
Ðèñîâàíèå 139

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


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

Рис. 4.25. Выбор инструмента Pen для редактирования кривой Безье

Рис. 4.26. Создание кривой Безье

Для редактирования кривых Безье предусмотрены четыре различных инстру-


мента:
 Pen (Перо) — предназначен для создания новой кривой Безье, совмещая
в себе все остальные инструменты (выбирая один из них автоматически,
в зависимости от положения указателя мыши);
 Add anchor point + (Добавить точку привязки) — добавляет новый управ-
ляющий маркер на существующую кривую Безье;
140 Ãëàâà 4

 Delete anchor point (Удалить точку привязки) — удаляет один из управ-


ляющих маркеров с кривой Безье;
 Convert anchor point (Преобразовать тип точки привязки) — предназна-
чен для редактирования управляющих маркеров и преобразования их типа
(с гладкой вершины на острую и наоборот).
Итак, для того чтобы создать кривую Безье, проделайте следующее:
1. Выберите инструмент Pen (Перо).
2. Щелкните в месте расположения первого маркера кривой Безье.
3. Щелчками определите остальные маркеры кривой Безье, создав, тем са-
мым, ее контур (рис. 4.26).
4. Если вы желаете создать замкнутую кривую Безье, последний из маркеров
совместите с самым первым (рис. 4.27).

Рис. 4.27. Создание замкнутой кривой Безье (коллаж)

5. При необходимости удалите какую-либо из вершин кривой Безье, наводя


на нее инструмент Pen (Перо), либо Delete anchor point (Удалить точку
привязки), и щелкая на вершине (рис. 4.28).

Рис. 4.28. Удаление вершины кривой Безье (коллаж)

6. Отредактируйте форму кривой Безье, перетаскивая ее линию обрамления,


маркеры и управляющие линии маркеров инструментом Pen (Перо) или
Convert anchor point (Преобразовать тип точки привязки) (рис. 4.29).
Ðèñîâàíèå 141

7. При желании добавьте новые маркеры при помощи инструмента Bezier+


(Добавить маркер кривой Безье) или удалите существующие инструмен-
том Bezier– (Удалить маркер кривой Безье).
8. Отформатируйте кривую Безье, отредактировав такие ее параметры, как
обрамление или заливка.

Рис. 4.29. Изменение формы кривой Безье

4.2.7. Öâåò îáðàìëåíèÿ è çàëèâêè


После того как объект нарисован на слое Flash-фильма, можно отредактиро-
вать как его обрамление, так и его заливку. Выделяя объект и изменяя его
атрибуты на панели Properties (Свойства), легко быстро изменить его внеш-
ний вид, используя ту же технику, что и при выборе режимов рисования для
новых объектов (см. разд. 4.1).
Для управления цветом используются либо панель Properties (Свойства), ли-
бо пара инструментов панели Tools (Инструментарий):
 Ink Bottle (Обрамление) — для выбора цвета линии обрамления объекта
(рис. 4.30);
 Paint Bucket (Заливка) — для закрашивания связанных областей текущим
цветом заливки (рис. 4.31).
В последнем случае необходимо предварительно определить рабочие цвета,
доступные в группе Colors (Цвета) на панели Tools (Инструментарий). Вы-
бирать текущий цвет удобно при помощи инструмента Eyedropper (Пипет-
ка), щелчок которым в любом месте кадра устанавливает его цвет в качестве
текущего.
142 Ãëàâà 4

Рис. 4.30. Изменение цвета обрамления объекта инструментом Ink Bottle

Рис. 4.31. Заливка выполняется инструментом Paint Bucket

4.2.8. Ñîçäàíèå öâåòîâûõ ãðàäèåíòîâ


Применение обыкновенных (сплошных) цветов — вовсе не единственный
вариант раскраски объектов. Flash предоставляет пользователю очень удоб-
ные средства, которые позволяют быстро и наглядно настроить градиентные
переходы цвета графических примитивов и других объектов.
Рассмотрим на примере какого-либо графического примитива, как это дела-
ется.
Ðèñîâàíèå 143

Рис. 4.32. Выберите тип градиента на панели Color

1. Нарисуйте на каком-либо слое прямоугольник и закрасьте его в любой


цвет (рис. 4.32).
2. На панели Color (Цвет) в раскрывающемся списке Type (Тип) выберите
тип градиента, например Linear (Линейный) (как на рис. 4.32) или Radial
(Круговой).
3. Оцените цвет появившейся градиентной заливки прямоугольника и, при
необходимости, отредактируйте его основной оттенок при помощи панели
Color (Цвет) (рис. 4.33).
4. Посредством ползунковых регуляторов выбора оттенка на панели Color
(Цвет) (рис. 4.34) выберите интенсивность начального и конечного цветов
градиента.
5. Щелкая на ползунке выбора начального, а затем конечного цвета, опреде-
лите при помощи цветовой палитры на панели Color (Цвет) желаемые
граничные цвета градиента.
6. На панели Tools (Инструментарий) выберите инструмент Gradient Trans-
form (Преобразование градиента) (рис. 4.35). В результате выделенный на
панели Stage (Сцена) объект (прямоугольник) приобретет дополнитель-
144 Ãëàâà 4

ное выделение, предназначенное для регулировки градиента его цвета


(рис. 4.36).

Рис. 4.33. Выбор основного цвета для градиентной заливки

Рис. 4.34. Выбор оттенков основных цветов Рис. 4.35. Выберите инструмент Gradient
градиентной заливки Transform

7. Наводя указатель на угловой маркер дополнительного выделения прямо-


угольника, осуществите поворот ориентации его градиентной заливки
(рис. 4.36).
8. Хватаясь за сами линии выделения градиента, отрегулируйте интенсив-
ность начального и конечного цветов градиентной заливки (рис. 4.37).
9. При необходимости, проведите дальнейшее редактирование посредством
панели Color (Цвет) и инструмента Gradient Transform (Преобразование
градиента).
Ðèñîâàíèå 145

Рис. 4.36. Вращение градиента

Рис. 4.37. Регулировка средней интенсивности градиента цвета

4.2.9. Î ðåäàêòèðîâàíèè ãðàôèêè


Рисунки, созданные при помощи соответствующих инструментов Flash, до-
пускается модифицировать различными способами. В частности, напомним,
что имеется возможность преобразовать импортированную графику в фоно-
вую заливку слоя посредством команды Modify > Bitmap > Trace Bitmap
(Преобразовать > Рисунок > Трассировка рисунка) (см. разд. 2.2.3).
Еще одна полезная команда — Modify > Shape > Convert Lines to Fills (Пре-
образовать > Форма > Преобразовать линии в заливку) позволяет перевести
те или иные объекты в класс "рисованной" графики (рис. 4.38).
146 Ãëàâà 4

Рис. 4.38. Преобразование линий в заливку

В частности, такое преобразование может быть полезным при многоступен-


чатой конвертации импортированной графики в символы, с тем, чтобы потом
можно было применять для нее различные цветовые эффекты (например,
градиенты). На рис. 4.39 приведен пример последующего преобразования
рисунка облака в символ, который затем размножен на сцене Flash-фильма.
Отметим, что при редактировании объектов на панели Stage (Сцена) удобно,
в контексте производимых действий, использовать инструменты Hand (Рука)
и Zoom (Масштаб) соответственно, для визуального смещения видимой об-
ласти по кадру фильма (рис. 4.40) и ее быстрого "приближения" или "отдале-
ния" (рис. 4.41).
Для редактирования контура существующего объекта применяется инстру-
мент Subselection (Субвыбор). Щелчок этим инструментом на том или ином
объекте приводит к появлению маркеров обрамления, перетаскивая которые
легко добиться желаемого изменения формы объекта (рис. 4.42).
Напомним также, что графика, нарисованная как объект, в режиме Object
Drawing (Рисование объекта) может быть с легкостью преобразована в фоно-
вую графику, т. е. в разряд "раскраски" слоя (см. разд. 2.2.3). Для этого доста-
точно ввести команду верхнего меню Modify > Break Apart (Преобразо-
вать > Разбить), что преобразует выделенный объект в "нарисованные"
Ðèñîâàíèå 147

Рис. 4.39. Объект, преобразованный в заливку,


вставлен в фильм несколько раз в качестве символа

Рис. 4.40. Использование инструмента Hand


148 Ãëàâà 4

Рис. 4.41. Настройка масштаба инструментом Zoom

Рис. 4.42. Редактирование объекта инструментом Subselection

обрамление и заливку. Пример разбиения графического примитива показан


на рис. 4.43, представляющий два одинаковых круга, выделенных инстру-
ментом Selection (Выбор), правый из которых разбит на части командой
Break Apart (Разбить).
Ðèñîâàíèå 149

Рис. 4.43. Правый круг разбит на "рисованные" обрамление и заливку

4.3. Òåêñò
Принцип работы с текстом во Flash не очень сильно отличается от After
Effects, поэтому рассмотрим коротко основные моменты редактирования тек-
ста, обратив внимание читателя на нестандартные приемы (например, созда-
ние текста с прокруткой и полей ввода текста).

4.3.1. Òèïû òåêñòà


Во Flash имеется несколько типов текста, которые классифицируются в соот-
ветствии с различными признаками.
Во-первых, текст делится на:
 обычный, или строчный, текст — текст, размер которого в кадре фильма
зависит от количества введенных символов (т. е. увеличивающийся при
вводе текста);
 текстовый блок — текст, который размещается в пределах блока, изна-
чально определенного пользователем.
Во-вторых, с точки зрения назначения в фильме, существуют следующие ти-
пы текста:
 статический текст (static text) — текст, который не меняется с течением
времени во Flash-фильме;
 динамический текст (dynamic text) — текст, меняющийся динамически
(например, счет игры в спорте, показания приборов и т. п.);
 поле ввода (input text) — текст, который допускается вводить пользовате-
лю в процессе воспроизведения Flash-фильма.
При работе с текстом при помощи инструмента Text (Текст) его тип визуали-
зируется характерным угловым маркером круглой (для обычного текста) или
квадратной формы (в случае текстового блока). Если данный маркер распола-
гается в верхнем углу, то текст является статическим, а если в нижнем — ди-
150 Ãëàâà 4

намическим (рис. 4.44). Маркер этот активный — двойной щелчок на квад-


ратном маркере меняет тип текста на обычный.
Наконец, в зависимости от направления, текст бывает:
 горизонтальный;
 вертикальный.

Рис. 4.44. Тип текста отображается при его выделении (коллаж)

4.3.2. Ñîçäàíèå òåêñòà


Для создания в фильме нового текста выполните следующие действия.
1. Выберите инструмент Text (Текст) на панели Tools (Инструментарий).
2. Убедитесь, что панель Properties (Свойства) присутствует на экране. В про-
тивном случае выберите Window > Properties (Окно > Свойства) (рис. 4.45).
3. На панели Properties (Свойства) выберите в раскрывающемся списке Text
type (Тип текста) желаемый тип текста:
• Dynamic Text (Динамический текст);
• Input Text (Поле ввода);
• Static Text (Статический текст).
4. Выделите слой и кадр фильма, в который вы собираетесь вставить текст.
5. Определите местоположение текста на кадре фильма, одновременно задав
тип текста:
• для создания обычного текста щелкните в желаемом месте кадра фильма;
• для создания текстового блока определите его размер и положение про-
таскиванием указателя через кадр фильма при нажатой кнопке мыши.
Ðèñîâàíèå 151

Рис. 4.45. Создание текста при помощи инструмента Text и панели Properties

Рис. 4.46. Ввод текста в позицию курсора


152 Ãëàâà 4

6. Введите текст в позицию появившегося курсора ввода (рис. 4.46).


7. При необходимости отформатируйте текста при помощи панели Properties
(Свойства). На рис. 4.47 показан пример изменения размера шрифта (кегля).

Рис. 4.47. Форматирование текста осуществляется при помощи панели Properties

8. Аналогичным образом настройте остальные параметры форматирования:


начертание (рис. 4.48), тип шрифта (гарнитуру), плотность символов, цвет
текста и т. п.

Рис. 4.48. Применение полужирного начертания


Ðèñîâàíèå 153

9. Щелкните в кадре фильма за пределами введенного текста, чтобы выйти


из режима его редактирования.

4.3.3. Ðåäàêòèðîâàíèå òåêñòà


Для того чтобы отредактировать текст, используйте как обычные средства
для правки объектов Flash-фильма, доступные на панели Tools (Инструмен-
тарий), так и средства, предназначенные исключительно для форматирования
текста, собранные на панели Properties (Свойства). Помните о том, что текст
в кадре фильма выделяется двумя способами:
 инструментом Selection (Выбор), как единое целое (т. е. как любой другой
объект) — в этом случае последующее форматирование будет относиться
к тексту целиком;
 инструментом Text (Текст), которым удобно выделить фрагмент текста
(при помощи протаскивания указателя мыши) или отдельное слово (двой-
ным щелчком мыши).
Таким образом, чтобы отформатировать текст, достаточно выделить его (це-
ликом или частично) и поменять тот или иной параметр на панели Properties
(Свойства), в частности тип текста (чтобы сделать статический текст динами-
ческим или наоборот). Для форматирования абзацев следует нажать кнопку
Edit Format Options (Изменить опции формата) с изображением символа
конца строки на панели Properties (Свойства) и задать желаемый параметр в
открывшемся диалоговом окне Format Options (Опции формата) (рис. 4.49).

Рис. 4.49. Форматирование параметров абзаца

Отметим также, что изменение размера текстового блока, которое произво-


дится перетаскиванием маркеров обрамления инструментом Selection (Вы-
бор), может приводить к смене типа текста. Например, горизонтальный текст
легко превратить в вертикальный; простой текст — в текстовый блок (и на-
оборот) и т. д.
При желании можно разрешить зрителю Flash-фильма выделять фрагменты
текста (что удобно, к примеру, для их последующего копирования в буфер
154 Ãëàâà 4

Рис. 4.50. Просмотр фильма: для текста UFO был установлен признак Selectable

Рис. 4.51. Разбиение


текста (коллаж)
Ðèñîâàíèå 155

обмена из браузера). Для этого достаточно нажать на панели Properties


(Свойства) кнопку Selectable (Разрешить выделение). В результате, при про-
смотре фильма текст будет можно выделять протаскиванием указателя
(рис. 4.50).
Наконец, подобно графическим примитивам, текст может быть разбит на со-
ставляющие командой Modify > Break Apart (Преобразовать > Разбить).
Первое применение этой команды к некоторому слову разбивает его на бук-
вы, а повторное — преобразует их в "нарисованную" графику (рис. 4.51).

4.3.4. Ïîëÿ ââîäà


Особый тип текста Flash — это поля ввода (input text). Поскольку Flash — это
программа для разработки интернет-приложений, то существенной является
техника предоставления пользователю права вводить текст во Flash-фильм
(который впоследствии может обрабатываться по алгоритму, реализованному
на языке ActionScript).
Для того чтобы определить текст как поле ввода, проделайте следующее.
1. Выделите уже существующий текст в кадре фильма или создайте новый.
2. На панели Properties (Свойства) выберите в раскрывающемся списке Text
type (Тип текста) элемент Input Text (Поле ввода) (рис. 4.52).

Рис. 4.52. Настройка поля ввода текста

3. Если вы планируете, что поле ввода должно появляться во Flash-фильме


с некоторым текстом, то введите его.
156 Ãëàâà 4

4. При помощи раскрывающегося списка Line type (Тип строк) определите,


как можно будет вводить текст:
• Multiline (В несколько строк);
• Single Line (В одну строку);
• Multiline No Wrap (В несколько строк, без перетекания текста).
5. Нажмите кнопку Show Border (Показывать границу), если текст предпоч-
тительнее отображать с черной рамкой и не на прозрачном, а на белом
фоне.
6. Определите остальные параметры форматирования текста при помощи
панели Properties (Свойства).
В результате в фильме будет определено текстовое поле, которое при его
просмотре будет активным. Зритель, просматривая Flash-фильм, например,
в браузере, будет иметь право менять текст этого поля ввода (рис. 4.53).

Рис. 4.53. Поле ввода текста во Flash-фильме


ÃËÀÂÀ 5

Àíèìàöèÿ

Посвятим эту главу основным принципам и приемам подготовки анимации


во Flash. Расскажем сначала об основных типах анимации (см. разд. 5.1), за-
тем остановимся на средствах Flash, предназначенных для настройки траек-
тории анимации (см. разд. 5.2), а в заключение рассмотрим типичный стиль
редактирования Flash-фильмов, основанный на применении символов
(см. разд. 5.3), которые, в частности, используются для реализации вложен-
ной анимации (см. разд. 5.3.6).

5.1. Íàçíà÷åíèå àíèìàöèè ñëîþ


Анимация во Flash бывает следующих типов:
 эффекты панели Монтажа (timeline effects);
 анимация на основе ключевых кадров (tweening);
 покадровая анимация.
Последний тип анимации подразумевает, что рисование каждого кадра филь-
ма осуществляется самим пользователем, поэтому мы рассмотрим два первых
типа анимации.

5.1.1. Î òèïàõ àíèìàöèè


Настройка анимации во Flash организована на основе редактирования ключе-
вых кадров. Фактически такая анимация (tweening) — это фрагмент слоя ме-
жду ключевыми кадрами, между которых осуществляется соответствующая
интерполяция того или иного параметра. Напомним, что ключевые кадры
обозначаются на панели Timeline (Монтаж) маркером круглой формы (без
158 Ãëàâà 5

заливки, если эти ключевые кадры являются пустыми, и с черной заливкой,


в противоположном случае). Пока анимация для фрагмента фильма, начи-
нающегося некоторым ключевым кадром, не назначена, этот фрагмент обо-
значается на панели Timeline (Монтаж) так, как показано на рис. 5.1, сверху,
т. е. "пустой или заполненный ключевой кадр (белый или черный кружок) —
промежуточные кадры — последний кадр (прямоугольник)".
Если вы начали, но не завершили настройку анимации, то она представляется
так, как показано на рис. 5.1, внизу.

Рис. 5.1. Визуализация анимации на панели Timeline

Анимация, основанная на ключевых кадрах, бывает следующих типов.


 Анимация движения (motion tweening) — анимация между двумя ключе-
выми кадрами, для каждого из которых определены соответствующие па-
раметры объектов на слое (в частности, положение в кадре фильма, раз-
мер, угол поворота и т. п.). В этом случае анимация создается программой
путем интерполяции перечисленных параметров (рис. 5.2).

Рис. 5.2. Анимация движения

 Анимация формы (shape tweening) — анимация, начинающаяся с рисова-


ния некоторого объекта на одном ключевом кадре, который затем перери-
совывается на следующем ключевом кадре, возможно, в виде совсем дру-
Àíèìàöèÿ 159

гого объекта. В этом случае анимации программа Flash осуществляет ин-


терполяцию самого объекта между этими ключевыми кадрами (рис. 5.3).

Рис. 5.3. Анимация формы

5.1.2. Àíèìàöèÿ äâèæåíèÿ


Для настройки анимации движения, например, перемещения одного из объ-
ектов верхнего слоя по нижнему фоновому слою, выполните следующее.
1. Выделите слой, на котором находится объект, и фрагмент этого слоя, для
которого вы собираетесь настроить анимацию.
2. Сделайте первый кадр фрагмента ключевым кадром при помощи команды
Insert > Timeline > Keyframe (Вставка > Монтажный стол > Ключевой
кадр).
3. Отредактируйте ключевой кадр слоя (рис. 5.4), определив положение и
масштаб объектов на нем, нарисовав графические объекты, объединив их
затем в символы (о том, как это делается, см. разд. 5.3).
4. На панели Properties (Свойства) в раскрывающемся списке Tween (Ани-
мация) выберите элемент Motion (Движение). Если этой панели нет на эк-
ране, вызовите ее командой Window > Properties (Окно > Свойства).

Для назначения анимации выделенному фрагменту слоя можно, не обращаясь


к панели Properties (Свойства), ввести либо команду Insert > Timeline > Create
Motion Tween (Вставка > Монтажный стол > Создать анимацию), либо анало-
гичную команду контекстного меню.

5. Перейдите на панели Timeline (Монтаж) к последнему кадру фрагмента и


отредактируйте расположение объектов на этом кадре (рис. 5.5).
6. При необходимости настройте траекторию движения (см. разд. 5.2).
7. Помимо расположения объектов в кадре фильма, отредактируйте их мас-
штаб, сдвиг и угол поворота, определив, тем самым, финальный кадр ани-
мации (рис. 5.6).
160 Ãëàâà 5

Рис. 5.4. Отредактируйте первый ключевой кадр анимации

Рис. 5.5. Перейдите к следующему ключевому кадру


Àíèìàöèÿ 161

Рис. 5.6. Отредактируйте последний ключевой кадр анимации

Рис. 5.7. Просмотр промежуточных кадров анимации

8. Просмотрите несколько промежуточных кадров, чтобы оценить, что полу-


чилось (рис. 5.7).
9. Если вам требуется, чтобы движение между ключевыми кадрами не было
равномерным, измените на панели Properties (Свойства) параметр Ease
(Вход). Его значения в диапазоне (-1...-100) соответствуют ускорению к
концу движения, а диапазон значений (1...100) — ускорению при начале
движения (и замедлению к его концу). При желании можно с лучшей точ-
ностью отредактировать динамику скорости движения, нажав кнопку Edit
162 Ãëàâà 5

(Правка) и отрегулировав график изменения параметра анимации в от-


крывшемся диалоговом окне Custom Ease In/Ease Out (Вход в/Выход из)
(рис. 5.8). Сами параметры можно настраивать по отдельности, выбирая
их в раскрывающемся списке Property (Свойство).

Рис. 5.8. Настройка неравномерного движения

10. Если вы используете анимацию вращения, то выберите желаемую опцию


в раскрывающемся списке Rotate (Вращение):
• None (Нет вращения);
• Auto (Автоматическая настройка) — вращение в соответствии с уста-
новленными значениями угла поворота на ключевых кадрах;
• CW (По часовой стрелке) — вращение по часовой стрелке, причем
число полных переворотов задается в становящемся доступном поле
числового ввода справа от списка Rotate (Вращение);
• CCW (Против часовой стрелки) — то же самое для вращения против
часовой стрелки.
11. Если нужно, добавьте дополнительные ключевые кадры и определите для
них соответствующие параметры анимации. Напомним, что для создания
ключевого кадра, например, внутри фрагмента с настроенной анимацией,
следует установить на него линию редактирования и ввести команду
Insert > Timeline > Keyframe (Вставка > Монтажный стол > Ключевой
кадр) (рис. 5.9).
Àíèìàöèÿ 163

Рис. 5.9. Настройте остальные ключевые кадры

12. При необходимости, отредактируйте анимацию: отрегулируйте парамет-


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

5.1.3. Àíèìàöèÿ ôîðìû


Альтернативный вид анимации — это анимация формы. Она определяет
трансформацию объекта между ключевыми кадрами и назначается почти так
же, как было описано в предыдущем разделе.
1. Выделите первый ключевой кадр слоя и нарисуйте на нем какую-либо фи-
гуру.
2. Перейдите к концу фрагмента и создайте еще один ключевой кадр, иден-
тичный первому (рис. 5.10).
3. Перейдите на панели Timeline (Монтаж) к последнему ключевому кадру и
отредактируйте его, например, изменив форму фигуры инструментом
Subselection (Субвыбор) (рис. 5.11).
4. Выделите фрагмент, который вы собираетесь сделать анимацией формы
(в нашем случае это фрагмент, начинающийся первым ключевым кадром
слоя).
164 Ãëàâà 5

Рис. 5.10. Нарисуйте первый ключевой кадр

Рис. 5.11. Отредактируйте финальный ключевой кадр


Àíèìàöèÿ 165

5. На панели Properties (Свойства) в раскрывающемся списке Tween (Ани-


мация) выберите элемент Shape (Форма) (рис. 5.12).

Рис. 5.12. Назначьте анимации тип Shape

6. Просмотрите несколько промежуточных кадров анимации, чтобы прове-


рить ее качество.
7. При желании добавьте промежуточные кадры анимации формы и отредак-
тируйте существующие.

Рис. 5.13. Анимация формы может сопровождаться перемещением объекта

Вовсе не обязательно, чтобы объекты на первом и последнем ключевых кад-


рах находились в одном месте кадра фильма. На рис. 5.13 приведен пример
той же анимации формы для фигур, разнесенных (на ключевых кадрах ани-
мации) в разные углы кадра фильма. Видно, что и в этом случае Flash осуще-
ствляет интерполяцию, обеспечивающую плавность превращения одного
объекта в другой (рис. 5.14). Отличие от анимации движения заключается в
том, что в начале анимации может присутствовать один объект, а в конце —
совсем другой.
166 Ãëàâà 5

Рис. 5.14. Анимация формы: превращение круга в стилизованный месяц

5.1.4. Ýôôåêòû ïàíåëè Ìîíòàæà


Дополним рассказ о типах анимации во Flash описанием альтернативного ви-
да анимации — так называемых эффектах панели Монтажа. Фактически
эффекты панели Timeline (Монтаж) — это простые предустановки анимации,
которые позволяют минимальными усилиями добавить в фильм соответст-
вующий спецэффект. Особенно полезны эффекты при настройке переходов
между действиями фильма.
Для вставки в фильм эффекта панели Монтажа выполните следующие дейст-
вия.
1. Выделите фрагмент слоя на панели Timeline (Монтаж).
2. Выберите в верхнем меню Insert > Timeline Effects (Вставка > Эффект
панели Монтажа) (рис. 5.15).
3. В появившемся подменю выберите одну из подгрупп эффектов:
• Assistants (Размножение);
• Effects (Эффекты);
• Transition/Transform (Переходы/Преобразования).
4. В новом подменю выберите желаемый эффект: например эффект Blur
(Размытие) из группы Effects (Эффекты) или эффект Transition (Переход)
из группы Transition/Transform (Переходы/Преобразования) (рис. 5.15).
Àíèìàöèÿ 167

Рис. 5.15. Настройка эффекта на панели Timeline

5. В открывшемся диалоговом окне с настройками эффекта отрегулируйте


его параметры, например, для эффекта Transition (Переход) выберите
длительность эффекта и его геометрию (направление и т. п.) (рис. 5.16).
Ориентируйтесь при этом на поле предварительного просмотра действия
эффекта, обновлять содержимое которого придется периодическими на-
жатиями кнопки Update Preview (Обновить предварительный просмотр).

Рис. 5.16. Настройка эффекта Transition


168 Ãëàâà 5

Параметры большинства эффектов интуитивны, а поле предварительного про-


смотра дает прекрасное представление о сути эффекта. Поэтому выбор и на-
стройка эффекта панели Монтажа не составит для вас особого труда.

6. По завершении регулировки эффекта нажмите кнопку ОК.


7. Просмотрите, как будет выглядеть действие эффекта панели Монтажа в
кадре фильма (рис. 5.17).

Рис. 5.17. Просмотр назначенного эффекта в проигрывателе Flash

На рис. 5.18 приведен пример настройки другого эффекта — Blur (Размы-


тие). Для него можно определить такие параметры, как длительность эффек-
та, графическое разрешение и масштаб, а также направление размытия
(рис. 5.18).
Для изменения настроек ранее назначенного эффекта выделите объект, кото-
рому он назначен, и нажмите кнопку Edit (Правка) на панели Properties
(Свойства). В результате откроется то же самое диалоговое окно с настрой-
ками эффекта (рис. 5.18), в котором его параметры будет легко отредактиро-
вать. Пример работы эффекта Blur (Размытие) в фильме показан на рис. 5.19.
Àíèìàöèÿ 169

Рис. 5.18. Настройка эффекта анимации Blur на панели Timeline

Рис. 5.19. Эффект Blur назначен слою на панели Timeline

Для отмены эффекта достаточно выделить фрагмент слоя, которому он на-


значен, вызвать из его области нажатием правой кнопки мыши контекстное
меню и выбрать в нем команду Timeline Effects > Remove Effect (Эффект
панели Монтажа > Удалить эффект). В результате действие эффекта будет
отменено, и фрагмент вернется к первоначальному состоянию.
170 Ãëàâà 5

5.1.5. Ïîêàäðîâàÿ àíèìàöèÿ


Скажем несколько слов и об очевидном способе "покадровой" анимации, ко-
гда каждый ее кадр прорисовывается вручную. Этот способ подходит для
скачкообразного изменения действия фильма, а также для программирования
его интерактивного интерфейса (например, настройки иерархических меню),
когда действие фильма контролируется кодом ActionScript.
В качестве примера рассмотрим появление (по отдельным буквам) текстового
объекта "UFO". Для этого создадим фильм и отредактируем фрагмент его
слоя из четырех кадров, необходимых для появления текста "UFO". Для на-
стройки покадровой анимации проделаем следующее.
1. Создайте пустой фрагмент слоя из четырех кадров.
2. Перейдите ко второму кадру фрагмента и вставьте на него еще один клю-
чевой кадр (рис. 5.20).

Рис. 5.20. Начните с создания нужного количества ключевых кадров

3. На втором ключевом кадре при помощи инструмента Text (Текст) нари-


суйте текстовый блок и введите в него текст "UFO" (он будет продолжать-
ся в течение трех кадров фильма).
4. Преобразуйте все кадры фрагмента с текстом в ключевые кадры. Таким
образом, слой будет содержать четыре последовательно расположенных
ключевых кадра (первый пустой и три пока одинаковых с текстом "UFO").
5. Перейдите ко второму ключевому кадру и, пользуясь инструментом Text
(Текст), удалите из текстового блока две последних буквы, оставив только
одну — "U" (рис. 5.21).
Àíèìàöèÿ 171

Рис. 5.21. Определите каждый ключевой кадр вручную

6. Аналогичным образом оставьте на третьем ключевом кадре две буквы


"UF".
7. Последний ключевой кадр оставьте без изменений.
8. Просмотрите получившийся фильм, убедившись в том, что он состоит из
четырех, определенных вручную кадров: сначала текста нет, а затем текст
"UFO" появляется скачкообразно — по буквам.

Рис. 5.22. Оцените, как работает покадровая анимация


172 Ãëàâà 5

Для работы с покадровой анимацией удобно использовать режим Preview (Про-


смотр) панели Timeline (Монтаж), который выбирается одноименной командой
в меню этой панели (рис. 5.22).

5.2. Òðàåêòîðèÿ äâèæåíèÿ


При настройке анимации движения важную роль играет правильное опреде-
ление траектории (пути следования) объектов. Трудоемкая расстановка до-
полнительных промежуточных ключевых кадров не решает задачи задания
плавной траектории, поскольку она все равно будет иметь форму ломаной.
Рассмотрим Flash-фильм, состоящий из нескольких слоев, для каждого из
которых назначена соответствующая анимация движения (см. разд. 1.3.3, в
котором разбирался соответствующий пример). Напомним, что мы настроили
анимацию движения и для слоя sky, и для слоя fly (рис. 5.23).

Рис. 5.23. Анимация движения назначена для двух слоев фильма

Flash имеет простое средство настройки траектории, основанное на примене-


нии слоев, так и называемых траекториями движения (motion guide). Такие
Àíèìàöèÿ 173

слои не входят в изображение кадра Flash-фильма, а предназначены для слу-


жебных целей: будучи связаны с другими слоями с назначенной анимацией,
они определяют для них траекторию объектов.
Для настройки траектории выполните следующее.
1. Определите для некоторого фрагмента слоя анимацию при помощи клю-
чевых кадров.
2. Выделите на панели Timeline (Монтаж) тот слой, для объектов которого
вы собираетесь редактировать траекторию.
3. Создайте на панели Timeline (Монтаж) новый слой типа траектории, на-
жав для этого кнопку Add Motion Guide (Вставить траекторию движения)
(рис. 5.24).

Рис. 5.24. Создание слоя-траектории

4. Убедитесь, что созданный слой-траектория находится непосредственно


над слоем с анимацией (как показано на рис. 5.25). Это означает, что эти
слои связаны между собой.
5. Любым из инструментов рисования, например Pen (Перо), Pencil (Каран-
даш), Line (Линия) или Rectangle (Прямоугольник), нарисуйте траекто-
рию движения (рис. 5.25).
174 Ãëàâà 5

Рис. 5.25. Рисование траектории

6. Выровняйте на панели Timeline (Монтаж) фрагменты слоя с анимацией и


слоя-траектории.
7. Выделите первый ключевой кадр анимации и перетащите объект, для ко-
торого она назначена на нарисованную траекторию. Убедитесь в том, что
точки привязки объекта "притянулась" к траектории.
8. Перейдите к последнему ключевому кадру анимации и аналогичным об-
разом перетащите объект на конец траектории (рис. 5.26).
9. Просмотрите несколько промежуточных кадров анимации и убедитесь в
том, что объект, которому назначена анимация, следует в точности вдоль
нарисованной траектории (рис. 5.27). В противном случае проверьте точ-
ность позиционирования точек привязки объекта на траектории для нача-
ла и конца анимации.
10. При необходимости отредактируйте слой-траекторию при помощи инст-
рументов Pen (Перо) или Subselection (Субвыбор).

При настройке анимации на верхнем слое удобно бывает выключить отображе-


ние нижележащих слоев (как это показано на рис. 5.27).
Àíèìàöèÿ 175

Рис. 5.26. Позиционируйте объекты на ключевых кадрах в точности на траектории

Рис. 5.27. Результат настройки движения вдоль траектории


176 Ãëàâà 5

Разумеется, нарисовать свою траекторию можно для любого из слоев. На


рис. 5.28 приведен соответствующий пример, когда оба слоя имеют свой
слой-траекторию с нарисованным на нем путем своего движения.

Рис. 5.28. Движение двух объектов по своим траекториям

В заключение заметим, что связь слоя-траектории и слоя с назначенной ани-


мацией может быть беспрепятственно отключена. Для этого выделите слой с
анимацией и введите команду Modify > Timeline > Layer Properties (Преоб-
разовать > Монтажный стол > Свойства слоя) и в диалоговом окне Layer
Properties (Свойства слоя) выберите переключатель Normal (Обычный).
Можно поступить и проще, переместив слой с анимацией вверх или вниз на
панели Timeline (Монтаж), нарушив тем самым связь со слоем-траекторией.
Как только связь слоя-траектории и слоя с анимацией нарушается, объекты
перестают замечать нарисованный путь. Для того чтобы вернуть эту связь,
следует либо расположить слои в точности друг над другом на панели
Timeline (Монтаж), либо установить для слоя с анимацией в диалоговом окне
Layer Properties (Свойства слоя) переключатель Guide (По траектории)
(рис. 5.29).
Àíèìàöèÿ 177

Рис. 5.29. Задание типа слоя в диалоговом окне Layer Properties

Рис. 5.30. Отображение анимации в виде шлейфа кадров

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


качество визуализации анимации и особенно удобна при настройке траекто-
рии движения. Она связана со специальным отображением объектов, кото-
рым назначена анимация, не в виде отдельных кадров, а в виде шлейфа кад-
ров (рис. 5.30). Для включения соответствующей опции нажмите одну из
178 Ãëàâà 5

кнопок, расположенных в нижней части панели Timeline (Монтаж), напри-


мер кнопку Onion Skin (Шлейф кадров). В результате появится возможность
работать не с одним, а с несколькими кадрами, формирующими анимацию.
Примечательно, что на шкале времени панели Timeline (Монтаж) одновре-
менно появляются маркеры, выделяющие фрагмент фильма, показываемый
в виде шлейфа кадров.
Если включить еще одну кнопку в нижней части панели Timeline (Монтаж),
а именно Onion Skin Outlines (Разметка шлейфа кадров), то кадры, форми-
рующие анимацию, будут представлены в виде контурной разметки
(рис. 5.31).

Рис. 5.31. Включение разметки анимации

5.3. Ñèìâîëû
Символами (symbol) называются объекты, создаваемые из графики, анимации
и интерактивных элементов, непосредственно в программе Flash. Конечно,
Flash-фильмы можно создавать и не прибегая к промежуточным действиям
по подготовке символов (как, собственно говоря, мы поступали почти всегда
до сих пор, рассказывая о работе во Flash). Однако использование символов
Àíèìàöèÿ 179

является крайне предпочтительным, позволяя уменьшить (иногда очень


сильно) размер финального SWF-файла и (иногда) ускоряя его загрузку.

5.3.1. Òèïû ñèìâîëîâ


Во Flash имеются следующие типы символов:
 графика (graphic) — статические изображения или видеоклипы, без звука,
интерактивных элементов;
 кнопки (button) — интерактивные элементы, имеющие, как правило, не-
сколько вариантов исполнения, чтобы отобразить реакцию на щелчки
мыши и другие действия (см. главу 6);
 клипы (movie clip) — фрагменты анимации, которые выгодно применять,
когда ваш Flash-фильм содержит повторяющиеся фрагменты видео.
Символы, сами по себе, могут быть маленьким фильмом. Они имеют собст-
венную линейку времени и редактируются на панелях Timeline (Монтаж) и
Stage (Сцена) в точности так же, как и сцены (scene) фильма. Отличие симво-
ла от сцены заключается в том, что он, сам по себе, не входит в окончатель-
ный фильм, а является как бы "полуфабрикатом" для сцены фильма. Поэтому
символы присутствуют в списке объектов панели Library (Библиотека).

Как вы видите, графические символы и символы-видеоклипы могут содержать


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

5.3.2. Ñîçäàíèå ñèìâîëîâ


Создание символа осуществляется одним из двух способов:
 преобразование в символ части Flash-фильма (например, нескольких объ-
ектов слоя, либо некоторого временного фрагмента);
 создание пустого символа на панели Library (Библиотека).

Ñîçäàíèå ïóñòîãî ñèìâîëà


Для того чтобы создать пустой символ, выберите в меню панели Library
(Библиотека) пункт New Symbol (Создать символ). В появившемся диалого-
вом окне Create New Symbol (Создать новый символ) выберите его тип и оп-
ределите название символа, а потом нажмите кнопку ОК (рис. 5.32).
180 Ãëàâà 5

Рис. 5.32. Выберите тип создаваемого символа

Для задания дополнительных опций создаваемого символа нажмите в диалого-


вом окне Create New Symbol (Создать новый символ) кнопку Advanced (До-
полнительно). В результате появится возможность определить вспомогатель-
ные параметры, например, создать символ на основе существующего на диске
документа Flash.

Созданные пустые символы появляются в списке панели Library (Библиоте-


ка), причем тип символа показывается его пиктограммой (рис. 5.33). Впо-
следствии созданные символы легко отредактировать (см. разд. 5.3.4),
а также добавить к Flash-фильму, подобно обычным объектам, присутствую-
щим на панели Library (Библиотека) (рисункам, видеоклипам и т. д.)
(см. разд. 5.3.3).

Рис. 5.33. Символы и графика на панели Library

Ñîçäàíèå ñèìâîëà èç ôðàãìåíòà ôèëüìà


Для того чтобы создать статический символ на основе некоторого фрагмента
фильма, выполните описанные далее действия.
Àíèìàöèÿ 181

1. Выделите фрагмент слоя (или нескольких слоев) в кадре фильма на панели


Stage (Сцена).
2. В верхнем меню выберите пункт Modify > Convert to Symbol (Преобразо-
вать > Преобразовать в символ), либо перетащите выделенные объекты на
панель Library (Библиотека), либо просто нажмите клавишу <F8>.
3. В диалоговом окне Convert to Symbol (Преобразовать в символ) введите
имя создаваемого символа и его тип (графика, кнопка или анимационный
клип) (рис. 5.34).

Рис. 5.34. Преобразование фрагмента фильма в символ

4. Если вы хотите изменить регистрационную точку (registration point) сим-


вола, т. е. точку, координаты которой будут определять начало координат
для отсчета положения символа в кадре фильма, щелкните на одной из де-
вяти точек регистрационной диаграммы в диалоговом окне Convert to
Symbol (Преобразовать в символ).
5. Нажмите кнопку ОК.
В результате выбранный фрагмент фильма преобразовывается в символ на
панели Timeline (Монтаж) (рис. 5.35). Название символа возникает на панели
Library (Библиотека).
182 Ãëàâà 5

Очень важно иметь в виду, что описанный способ предназначен для создания
символа, длительность которого составляет всего один кадр. Соответственно,
в расчет принимаются только объекты, выделенные на текущем кадре филь-
ма, независимо от их динамики относительно линейки времени на панели
Timeline (Монтаж). Если сравнить содержимое панели Timeline (Монтаж)
рис. 5.34 и 5.35, то вы заметите изменения, произошедшие с фильмом в его
временной части.

Рис. 5.35. Фрагмент фильма заменен символом

5.3.3. Âñòàâêà ñèìâîëîâ â ôèëüì


Для того чтобы использовать символ в фильме, просто перетащите его из па-
нели Library (Библиотека) на изображение текущего кадра фильма, подобно
тому, как вы вставляете в фильм любой другой объект. При вставке в фильм
на панели возникает экземпляр символа.
Вставить символ в фильм допускается любое количество раз, причем каждый
экземпляр редактируется независимо от других. В частности, любой из эк-
земпляров можно переместить, масштабировать, повернуть и т. д. (рис. 5.36).

5.3.4. Ðåäàêòèðîâàíèå ñèìâîëîâ


Символы во Flash имеют собственную линейку времени и редактируются по-
добно сценам фильма. Для того чтобы открыть символ для редактирования,
достаточно щелкнуть дважды на его названии на панели Library (Библиоте-
ка). В результате содержимое символа открывается на панелях Timeline
(Монтаж) и Stage (Сцена) (рис. 5.37).
Àíèìàöèÿ 183

Рис. 5.36. Экземпляры символа в фильме

Рис. 5.37. Редактирование символа


184 Ãëàâà 5

Очень важно понимать, что редактирование самого символа из панели


Library (Библиотека) приводит к соответствующим изменениям его экземп-
ляров, уже вставленных в фильм (рис. 5.38). Таким образом, независимо от
количества экземпляров символа, внести желаемую правку сразу во все эк-
земпляры несложно, однократно изменив соответствующим образом сам
символ из панели Library (Библиотека).

Рис. 5.38. Экземпляры отредактированного символа в фильме

Переключаться между редактированием сцен фильма и символов удобно при


помощи кнопок Edit Scene (Правка сцены) и Edit Symbol (Правка символа),
находящихся в верхней части панели Timeline (Монтаж) (рис. 5.39).
Наконец, если вам удобнее редактировать сам символ на фоне кадра фильма,
выделите его инструментом Selection (Выбор) и выберите в меню Edit > Edit
in place (Правка > Правка на месте). В результате символ откроется для ре-
дактирования на панели Timeline (Монтаж), а на панели Stage (Сцена) будет
отображаться наряду с более блеклым фоновым изображением кадра фильма
(рис. 5.40).
Àíèìàöèÿ 185

Рис. 5.39. Переключение между редактированием разных символов

Рис. 5.40. Редактирование символа на фоне кадра фильма


186 Ãëàâà 5

5.3.5. Ñîçäàíèå àíèìàöèîííîãî ñèìâîëà


èç ôðàãìåíòà ôèëüìà
Напомним, что, подобно сценам фильма, символы формируются из слоев и
кадров, причем их допускается копировать в буфер обмена из содержимого
самого фильма и вставлять в символы. Соответствующий пример вставки
фрагмента фильма из буфера обмена был приведен на рис. 5.34.
Для сохранения динамики слоев, настроенной в фильме, при преобразовании
его фрагмента в символ анимационного типа следует действовать по-дру-
гому. Для преобразования фрагмента фильма на основе выделения на панели
Timeline (Монтаж) в символ типа анимационного клипа выполните следую-
щее.
1. На панели Timeline (Монтаж) выберите желаемые кадры на всех слоях
фильма, которые вы хотите преобразовать в анимационный символ.
2. Вызовите из области выделения панели Timeline (Монтаж) контекстное
меню и выберите в нем либо пункт Copy Frames (Копировать кадры), ли-
бо (при желании сразу заменить содержимое фильма символом) пункт Cut
Frames (Вырезать кадры).
3. Снимите выделение с объектов и убедитесь, что в кадре фильма ничего не
выделено.
4. Введите команду Modify > New Symbol (Преобразовать > Создать сим-
вол).
5. В открывшемся диалоговом окне New Symbol (Создать символ) введите
имя создаваемого символа, укажите в качестве типа Graphic (Графиче-
ский) или Movie Clip (Анимационный клип) и нажмите кнопку OK.
6. Отредактируйте символ, открывшийся для правки на панелях Timeline
(Монтаж) и Stage (Сцена), добавив в него выделенный фрагмент (рис. 5.41).
Для этого щелкните на первом кадре слоя Layer 1 на панели Timeline
(Монтаж) и выберите в меню пункт Edit > Timeline > Paste Frames
(Правка > Монтажный стол > Вставить кадры).
7. Выберите в верхнем меню Edit > Edit Document (Правка > Правка доку-
мента), чтобы вернуться к редактированию Flash-фильма.

5.3.6. Âëîæåííàÿ àíèìàöèÿ


Приведем еще один пример редактирования символа, на этот раз анимацион-
ного типа, и с его помощью покажем, как во Flash можно организовать так
называемое вложенное редактирование, т. е. "анимацию внутри анимации".
Àíèìàöèÿ 187

Рис. 5.41. Редактирование графического символа относительно линейки времени

Отметим, что символ, показанный на рис. 5.41, принадлежит к типу графиче-


ских символов. Напомним, что графические символы синхронизованы с ли-
нейкой времени фильма, а для анимационных клипов имеет значения только
собственная шкала времени символа (пример такого символа приведен на
рис. 5.42).
Для начала создадим символ типа Movie Clip (Анимационный клип), состоя-
щий из двух слоев (на верхнем слое мы разместим рисунок пламени, выры-
вающегося из ракеты, а на нижнем — саму ракету, как это показано на
рис. 5.42). Затем добавим еще один слой для фрагмента пламени и настроим
анимацию движения для обоих верхних слоев, чтобы создать иллюзию дви-
жения пламени относительно ракеты (рис. 5.43).
В завершение разместим символ на верхнем слое фильма и назначим, уже
самому символу, анимацию движения (рис. 5.44). В результате анимация сло-
ев символа будет вложена в анимацию, назначенную на сцене фильма: по ме-
ре полета ракеты из нее будет вырываться пламя, которому, в свою очередь,
назначена анимация.
188 Ãëàâà 5

Рис. 5.42. Редактирование символа анимационного типа

Рис. 5.43. Настройка анимации движения для слоев символа


Àíèìàöèÿ 189

Рис. 5.44. Вложенная анимация: символу типа Movie Clip


назначена анимация движения

5.3.7. Ôèëüòðû
Завершим рассказ о кнопках упоминанием о мощном средстве их редактиро-
вания, имеющемся во Flash. Речь идет о фильтрах (filter) — характерных
спецэффектах, которые применяются для форматирования объектов в филь-
ме. Прежде всего, отметим, что фильтры допускается назначать только неко-
торым типам объектов:
 символам типа "кнопка";
 символам — анимационным клипам;
 текстовым объектам.
Для того чтобы применить фильтр кнопке (либо иному из перечисленных
объектов):
1. Выделите объект в кадре фильма.
2. Откройте панель Filters (Фильтры), которая обычно совмещена с панелью
Properties (Свойства), под кадром фильма.
3. Нажмите кнопку Add Filter (Добавить фильтр) с изображением знака "+"
на панели Filters (Фильтры) (рис. 5.45).
4. В раскрывшемся меню выберите желаемый фильтр (рис. 5.45).
190 Ãëàâà 5

Рис. 5.45. Назначение символу фильтра

5. При помощи появившихся на панели Filters (Фильтры) элементов управ-


ления настройте параметры фильтра (рис. 5.46). Ориентируйтесь при этом
на изменения, происходящие с изображением объекта в кадре фильма.
6. При желании назначьте другие фильтры объекту.
7. Если объекту назначено несколько фильтров, отредактируйте на панели
Filters (Фильтры) порядок их назначения и параметры для каждого из них.
Для того чтобы получить доступ к настройке того или иного фильтра, вы-
делите его в списке панели Filters (Фильтры) так, как показано на
рис. 5.46.
8. Если вы хотите временно выключить действие фильтра, щелкните на пик-
тограмме слева от его названия на панели Filters (Фильтры). Для после-
Àíèìàöèÿ 191

дующего возвращения действия фильтра повторно щелкните на той же


пиктограмме.

Рис. 5.46. Редактирование настроек фильтра

9. Для безвозвратной отмены фильтра выделите его на панели Filters


(Фильтры) и нажмите кнопку Remove Filter (Удалить фильтр) с изобра-
жением знака "–".
10. Выберите в верхнем меню File > Publish Preview > Flash (Файл > Опуб-
ликовать предварительно > Во Flash) и оцените результат применения
объекту фильтра (рис. 5.47).
192 Ãëàâà 5

Рис. 5.47. Символ, которому назначен фильтр, в фильме


ÃËÀÂÀ 6

Èíòåðàêòèâíîñòü (Flash)

В последней главе собраны основные сведения, касающиеся вопросов на-


стройки интерактивности, а именно редактирование кнопок (см. разд. 6.2),
написание программного кода на языке сценариев версий ActionScript 2.0
(см. разд. 6.3) и ActionScript 3.0 (см. разд. 6.4), сопровождаемое пояснением
основных принципов объектно-ориентированного программирования, реали-
зованного в этих языках (см. разд. 6.4). Завершается глава примером создания
интерактивных обучающих Flash-фильмов на основе соответствующего шаб-
лона (см. разд. 6.6).

6.1. Î íàñòðîéêå èíòåðàêòèâíîñòè


Рассмотрим главные принципы организации во Flash интерактивности, т. е.
взаимодействия со зрителем. Учитывая, что изложение деталей Flash-
программирования выходит далеко за рамки нашей книги, приведем самые
основные сведения об интерактивных элементах и их настройке.
В первую очередь, отметим, что настройка интерактивности представляет
собой типично программистскую задачу. Поэтому во Flash встроен самый
настоящий язык программирования, называемый ActionScript, что примерно
означает "сценарий обработки действий". Написание программного кода
осуществляется при помощи панели Actions (Действия) (рис. 6.1). Большую
часть панели Actions (Действия) (справа) занимает поле, в котором приво-
дится программный код сценария. Сам код, в частности, может назначаться
определенным кадрам фильма, что обозначается соответствующим символом
("альфа") на панели Timeline (Монтаж) (рис. 6.1).
Следует сразу сказать, что во Flash 9 встроено две версии языка ActionScript
(не считая еще нескольких "облегченных" его модификаций, предназначен-
194 Ãëàâà 6

ных для мобильных устройств), что бросается в глаза в самом начале работы,
при создании нового Flash-фильма (рис. 6.2):
 ActionScript 2.0 — язык, совместимый с прежней версией Flash 8;
 ActionScript 3.0 — новый язык, несовместимый с прошлыми версиями.

Рис. 6.1. Для настройки интерактивности предназначена панель Actions

Рис. 6.2. При создании нового Flash-фильма необходимо определиться


с версией языка программирования ActionScript
Èíòåðàêòèâíîñòü (Flash) 195

Различие между двумя версиями языка проявляется, в частности, в том, что


ActionScript 3.0 — "более объектно-ориентированный" язык, с его помощью
можно реализовывать практически весь спектр программных решений, ха-
рактерных для современных языков программирования. Сценарий, разрабо-
танный на ActionScript 3.0, является полноценной компьютерной програм-
мой, в то время как в ActionScript 2.0 ценой достижения большей простоты и
наглядности разработки кода была ограниченность возможностей.
Вспоминая о направленности нашей книги (введение во Flash), мы не будем
рассматривать сколько-нибудь сложных программистских решений, ограни-
чившись объяснением основных приемов программирования во Flash. При-
держиваясь этой точки зрения, мы наметим главные моменты, которые по-
зволят читателю реализовать самые необходимые интерактивные возможно-
сти Flash и начать работу как с версией языка ActionScript 2.0, так и с версией
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

говорит пустая область предварительного просмотра символа (с символи-


ческим крестиком) в пределах панели Library (Библиотека).

Рис. 6.3. Примеры двух кнопок в проигрывателе Flash

1
Кнопку, как и любой символ, можно создать путем преобразования объектов,
расположенных на кадре фильма, в символ, как это показано на рис. 6.4.

Рис. 6.4. Преобразование графики в кнопку


Èíòåðàêòèâíîñòü (Flash) 197

2
Переименовать кнопку на панели Library (Библиотека) можно уже и после ее
создания.

3. Откройте кнопку для редактирования щелчком на ее пиктограмме на па-


нели Library (Библиотека). Обратите внимание, что символ типа кнопки
открывается для правки на панели Timeline (Монтаж) в виде четырех кад-
ров (рис. 6.5), каждый из которых предназначен для определения вида
кнопки в зависимости от того или иного действия зрителя фильма.

Рис. 6.5. Редактирование кнопки на панелях Timeline и Stage

4. Отредактируйте все четыре кадра кнопки, сделав их по очереди ключевы-


ми и добавив на них соответствующие символы, графические примитивы
или текст. Кадры кнопки имеют следующий смысл:
• Up (Наверху) — кнопка в верхнем (ненажатом) положении; такой она
появляется в фильме первый раз;
• Over (Над) — вид кнопки в момент, когда зритель Flash-фильма наво-
дит на нее указатель мыши (рис. 6.6) (например, можно добавить для
данного ключевого кадра несколько графических примитивов или из-
менить атрибуты текста, сделав его полужирным);
• Down (Внизу) — кнопка в нижнем (нажатом) состоянии; такой она ока-
зывается, когда зритель Flash-фильма нажимает ее посредством нажа-
тия кнопки мыши (рис. 6.7);
• Hit (Щелчок) — разметка активной области кнопки, т. е. той ее части,
действия зрителя над которой будут иметь последствия (в нашем при-
мере лучше всего, чтобы активная область кнопки совпадала с ее обыч-
ной формой).
198 Ãëàâà 6

Рис. 6.6. Редактирование кнопки в положении Over

Рис. 6.7. Редактирование кнопки в положении Down

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


убедитесь в том, что каждое из них описывается именно ключевым кадром на
панели Timeline (Монтаж).
Èíòåðàêòèâíîñòü (Flash) 199

5. После того как вы закончили разработку дизайна кнопки, вернитесь к ре-


дактированию сцены фильма.
6. Выберите тот слой и кадр фильма, на который вы собираетесь вставить
кнопку, на панели Timeline (Монтаж).
7. Перетащите кнопку из панели Library (Библиотека) на кадр фильма на
панели Stage (Сцена) (рис. 6.8).

Рис. 6.8. Вставка кнопки в фильм

8. При необходимости отредактируйте кнопку в самом фильме, например,


измените ее длительность вдоль шкалы времени на панели Timeline
(Монтаж), либо измените ее размер, положение в кадре и т. п. (рис. 6.9).
9. Осуществите предварительный просмотр фильма с кнопкой при помощи
команды File > Publish Preview > Flash (Файл > Опубликовать предвари-
тельно > Во Flash) (рис. 6.10).
10. В окне проигрывателя осуществите наведение указателя мыши на кнопку,
а также ее нажатие, с тем, чтобы протестировать правильность настройки
состояний кнопки (рис. 6.11).
В заключение отметим, что описанная техника создания кнопки пока каса-
лась только разработки ее дизайна в различных состояниях, определяемых
действиями зрителя Flash-фильма. Сами события, которые будут генериро-
ваться в зависимости от обработки действий пользователя, должны настраи-
ваться отдельно, при помощи языка ActionScript.
200 Ãëàâà 6

Рис. 6.9. Редактирование экземпляра кнопки в фильме

Рис. 6.10. Предварительный просмотр фильма с кнопкой

Рис. 6.11. Кнопка в разных состояниях: Up — Over — Down (коллаж)


Èíòåðàêòèâíîñòü (Flash) 201

6.3. ActionScript 2.0


Перейдем теперь к программированию интерактивности Flash-фильма, для
чего наметим его основные принципы, сначала для языка ActionScript 2.0.
Как уже отмечалось (см. разд. 6.1), для создания программного кода служит
панель Actions (Действия) (рис. 6.12). Панель Actions (Действия) разделена
на несколько областей, главной из которых является правое поле с кодом
программы. На рис. 6.12 оно пустое, поскольку никакого кода пока не добав-
лено. Левая часть панели представляет, в ее верхней левой части, список
функций (для их быстрой вставки в программу), а также (внизу слева) поле
с содержанием фильма (перечнем сцен) и списком элементов, которым
назначены сценарии. В ActionScript 2.0 код сценариев допускается назна-
чать отдельным кадрам слоев фильма (см. разд. 6.3.2), а также кнопкам
(см. разд. 6.3.3).

Рис. 6.12. Включите режим Script Assist

Вообще говоря, панель Actions (Действия) предусматривает два стиля про-


граммирования:
202 Ãëàâà 6

 написание и отладку кода вручную;


 использование техники "Script Assist", означающую создание кода в полу-
автоматическом режиме.
Для включения полуавтоматического режима достаточно нажать на панели
Actions (Действия) кнопку Script Assist (Разработка сценария). В результате
поле кода разделится горизонтальной линией на две части: верхняя предна-
значена для полуавтоматической разработки сценария, а нижняя, по-
прежнему, служит для отображения кода. В режиме Script Assist ввод кода с
клавиатуры не допускается, а разрешено пользоваться только соответствую-
щими средствами панели Actions (Действия), что гарантирует корректность
программы.

6.3.1. Ïîñòàíîâêà çàäà÷è äëÿ ñöåíàðèÿ


Собственно, разработке программного кода всегда должен предшествовать
его этап проектирования, т. е. постановки задачи. Мы рассмотрим приемы
работы с языком сценариев ActionScript на следующем простом примере.
Будем использовать фильм, состоящий из трех сцен: первая представляет со-
бой кнопку на белом фоне, разработанную в прошлом разделе (см. рис. 6.11),

Рис. 6.13. Вторая сцена фильма


Èíòåðàêòèâíîñòü (Flash) 203

вторая — анимацию НЛО (рис. 6.13), а третья — анимацию ракеты (тоже на


фоне неба) (рис. 6.14).
Таким образом, задача выглядит следующим образом.
 При запуске фильма статично отображаются две кнопки (пока зритель
фильма не нажмет одну из них, сцена не меняется).
 При нажатии одной кнопки запускается сцена с полетом НЛО.
 При нажатии другой кнопки запускается сцена с полетом ракеты.

Сначала, ради простоты, (в этом разделе) мы решим задачу программирования


одной кнопки, а в следующем — при разборе ActionScript 3.0 — создадим и на-
строим (почти одинаковый) код для обеих кнопок.

Рис. 6.14. Третья сцена фильма

6.3.2. Ñîçäàíèå êîäà äëÿ êàäðîâ ôèëüìà


Как вы помните, при обычном просмотре Flash-фильма происходит последо-
вательный показ всех его сцен. Нам же, в соответствии с поставленной зада-
чей, необходимо сначала осуществить демонстрацию только первой сцены, в
204 Ãëàâà 6

то время как переход на остальные сцены осуществлялся бы только нажатием


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

Рис. 6.15. Начало вставки кода для последнего кадра сцены

Выполним следующие операции.


1. На панели Timeline (Монтаж) выделите любой, например последний, кадр
первой сцены фильма.
2. Вызовите на экран панель Actions (Действия) (см. рис. 6.12).
3. Нажмите на панели Actions (Действия) кнопку Script Assist (Разработка
сценария).
4. На панели Actions (Действия) нажмите кнопку Add (Добавить) (рис. 6.15).
5. Выберите в появившемся меню: Global Functions > Timeline Control >
goto (Глобальные функции > Управление Монтажным столом > Перейти)
(рис. 6.16).
6. Настройте на панели Script Assist (Разработка сценария) параметры функ-
ции Go To and Stop (Перейти и остановиться), переводящей действие на
определенный кадр фильма, так, как это показано на рис. 6.17. (Заметим,
Èíòåðàêòèâíîñòü (Flash) 205

что в нашем случае, в качестве параметра функции, т. е. кадра перехода,


подойдет любой кадр первой сцены).

Рис. 6.16. Добавление кода останова действия для начальной сцены

В полуавтоматическом режиме программирования, т. е. в режиме Script Assist,


сами строки кода позволено только просматривать, но не редактировать. Код
генерируется автоматически, исходя из параметров сценария, определяемых в
диалоговом режиме в верхней части панели Actions (Действия).

Обратите внимание на то, что в области кода на панели Actions (Дейст-


вия) появляются соответствующие строки программы, а именно функция
gotoAndStop(1). В результате ее работы вторая и третья сцены при просмот-
ре Flash-фильма демонстрироваться не станут, а переход к ним должен будет
осуществляться только по нажатию кнопки, находящейся на первой сцене
(соответствующий код для кнопки нам еще предстоит написать).
Отметим также, что, во-первых, после добавления кода на пустом ключевом
кадре на панели Timeline (Монтаж) возникает символ "альфа", говорящий о
наличии сценария для этого кадра. Во-вторых, на панели Actions (Действия)
206 Ãëàâà 6

(в ее нижней левой части) появляется отметка о назначении сценария перво-


му кадру сцены Start (на эту отметку наведен указатель мыши на рис. 6.18).

Рис. 6.17. Настройка функции gotoAndStop

В заключение добавим код для последнего кадра сцены с НЛО, сделав так,
чтобы действие при его достижении останавливалось. Для этого следует по-
вторить описанные действия, только применительно к соответствующему
ключевому кадру следующей сцены (рис. 6.19). Отметим, что для реализации
останова фильма можно выбрать переход не на кадр сцены с некоторым но-
мером, а на предыдущий кадр сцены, для чего на панели Script Assist (Разра-
ботка сценария) следует выбрать в раскрывающемся списке Type (Тип) пункт
Previous Frame (Предыдущий кадр). Соответственно, функцией языка
ActionScript, которая будет добавлена выделенному кадру на панели кода,
станет функция prevFrame() (рис. 6.19).

Пустые скобки, следующие за именем функции prevFrame(), говорят об от-


сутствии параметров у этой функции языка ActionScript (а ее действие, как не-
сложно догадаться, заключается в переходе к предыдущему кадру сцены и ос-
танову на нем Flash-фильма).
Èíòåðàêòèâíîñòü (Flash) 207

Рис. 6.18. Сценарий gotoAndStop назначен первому кадру слоя

Рис. 6.19. Назначение сценария prevFrame() последнему кадру сцены с НЛО


208 Ãëàâà 6

6.3.3. Ïðîãðàììèðîâàíèå êíîïêè


Создадим теперь такой программный код, который при нажатии зрителем
кнопки (на первой сцене) переводил бы действие на начало второй сцены.
Для этого необходимо добавить соответствующий сценарий обработки собы-
тия нажатия кнопки следующим образом.
1. На панели Tools (Инструментарий) сделайте активным инструмент
Selection (Выбор).
2. Выделите слой с кнопкой на панели Timeline (Монтаж).
3. Выделите кнопку на кадре фильма инструментом Selection (Выбор).
4. Вызовите на экран панель Actions (Действия) и убедитесь, что на ней
включен режим Script Assist (Разработка сценария).
5. Нажмите кнопку Add (Добавить) на панели Actions (Действия) и выберите
в иерархическом списке доступных функций языка ActionScript функцию
On (На) так, как это показано на рис. 6.20.
6. В верхней части панели Actions (Действия) оставьте без изменений выде-
ленный по умолчанию флажком вариант Release (Отпустить кнопку мы-
ши). Это означает, что последующие строки кода будут относиться к об-
работке события отпускания кнопки мыши на выделенном объекте (т. е.
после того, как нажатая кнопка с титром UFO будет отпущена зрителем
фильма) (рис. 6.20).

Рис. 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

Рис. 6.22. Для отладки просмотрите Flash-фильм в проигрывателе (коллаж)

Подобным образом производится обработка других событий и программиро-


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

Рис. 6.23. Сценарий для второй кнопки


Èíòåðàêòèâíîñòü (Flash) 211

В заключение отметим несколько важных моментов.


Во-первых, при выделении на панели Actions (Действия) строк программного
кода соответствующие настройки (которые определялись при его создании)
вновь становятся доступными в верхней части этой панели (как показано, к
примеру, на рис. 6.23, иллюстрирующем добавление сценария для еще одной
кнопки).
Во-вторых, комбинация кнопок с текстом и соответствующего кода сценари-
ев предоставляет широчайшие возможности для создания меню различного
типа, примеры которых вы, без сомнения, встречали в Интернете на множе-
стве Web-страниц, разработанных во Flash.
В-третьих, пользоваться языком ActionScript вовсе не обязательно в режиме
Script Assist. Если повторно нажать одноименную кнопку, то все пространст-
во справа на панели Actions (Действия) будет отведено коду, который станет
доступным для ручной правки. Отметим, что в этом случае добавлять функ-
ции можно, пользуясь их перечнем слева, организованным в форме вложен-
ного списка (рис. 6.24). Список объектов фильма, которым назначены сцена-
рии, приводится в нижней части панели Actions (Действия).

Рис. 6.24. Разработка кода в ручном режиме


212 Ãëàâà 6

6.4. ActionScript 3.0


Рассмотрим, как программе Adobe Flash организован новый язык программи-
рования ActionScript 3.0. Для знакомства с ним мы используем тот же про-
стой пример навигации по двум сценам фильма: одна — с НЛО, другая —
с ракетой (рис. 6.25) при помощи пары кнопок, расположенных на стартовой
сцене фильма (см. рис. 6.26, ниже).

Рис. 6.25. Содержимое сцен 2 и 3

Рассмотрим такой же документ, состоящий из трех сцен, что был рассмотрен


в предыдущих разделах.

Помните о том, что при создании нового документа следует выбрать версию
языка программирования — в нашем случае, ActionScript 3.0.

На первой сцене расположим пару кнопок, отредактировав их точно так же,


как мы это осуществляли и раньше (см. разд. 6.2). Можно использовать заго-
товки кнопок, созданные в другом документе, скопировав их и разместив на
первой сцене Flash-фильма.
Таким образом, первая сцена имеет один слой, который и содержит две кноп-
ки (рис. 6.26). Остальные сцены состоят из нескольких слоев: вторая сцена
представляет собой анимацию летающей тарелки, а на третьей сцене на-
строена анимация ракеты на фоне облачного неба (рис. 6.25).
Обратимся к первой сцене и рассмотрим, каким образом можно настроить
обработку событий для каждой из двух кнопок, чтобы каждая из них перево-
дила действие фильма на ту или иную сцену. Сразу отметим, что важным но-
вовведением языка ActionScript 3.0 является то, что код теперь нельзя назна-
чать отдельным элементам Flash-фильма, например, кнопкам. Весь код дол-
жен содержаться в отдельных блоках, которые можно назначить кадрам.
Таким образом, программный код, реализующий интерактивность, т. е. собы-
Èíòåðàêòèâíîñòü (Flash) 213

тие "нажатие кнопки UFO — переход на сцену 2" и событие "нажатие кноп-
ки Rocket — переход на сцену 3", будет помещен в блок, относящийся к пер-
вому кадру слоя Layer 1.

Рис. 6.26. На панели Properties задайте имена кнопок

Чтобы программа ActionScript 3.0 могла идентифицировать тот или иной


объект Flash-фильма, перед тем, как написать сам код, необходимо будет
присвоить кнопкам UFO и Rocket уникальные имена. Следует хорошо себе
представлять, что кнопки, размещаемые во Flash-фильме, являются экземп-
лярами кнопок — символов, представленных на панели Library (Библио-
тека).

Язык ActionScript 3.0 — это более объектно-ориентированный язык программи-


рования. Если вы когда-либо сталкивались с технологией Java, то без труда уз-
наете в языке ActionScript 3.0 многие качества, характерные для языка Java.

Приведем теперь основные этапы разработки кода на ActionScript 3.0, реали-


зующие наш сценарий фильма, сопроводив их минимальными коммента-
риями.
Для этого:
1. Откройте панель Actions (Действия) и выключите режим Script Assist
(Разработка сценария), чтобы иметь возможность вводить код с клавиа-
туры.
2. Выделите на панели Timeline (Монтаж) первый кадр слоя Layer 1. Весь
код, который мы создадим, будет размещен на этом кадре.
214 Ãëàâà 6

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");
}

Рис. 6.27. Программирование нажатия кнопки UFO


Èíòåðàêòèâíîñòü (Flash) 215

Введенный код является функцией, записанной в соответствии с языком про-


граммирования ActionScript 3.0. Эта функция, названная нами startUFO, при-
звана обрабатывать событие, вызываемое щелчком мыши по кнопке UFO.
Содержимое программы связано с тем, что данный фильм, идентифицируе-
мый ключевым словом this, переходит на определенный кадр сцены. Един-
ственная строка функции startUFO определяет перевод фильма на первый
кадр сцены 2 посредством встроенной функции gotoAndPlay(1,"Scene 2").
Однако это еще не все. Пока мы лишь определили некоторый законченный
фрагмент кода (функцию), который позволяет перейти на определенный кадр
фильма, но мы не связали эту функцию с самим событием — нажатием зри-
телем фильма кнопки UFO. Обработка событий, подобных нажатиям кнопок,
в языке ActionScript 3.0 организована точно так же, как в языке Java. Для это-
го тем или иным объектам следует назначить так называемые слушатели, или
листенеры (listener). Соответствующий код также размещается в программ-
ном блоке, ассоциированном с первым кадром слоя, и выглядит следующим
образом: кнопке UFO_button (идентификатор кнопки UFO) добавляется слу-
шатель (обработчик событий) eventListener:
UFO_button.addEventListener(MouseEvent.CLICK, startUFO);

С его помощью обрабатывается событие MouseEvent.CLICK, т. е. щелчок по


кнопке UFO, и обработка события сводится к запуску функции "startUFO".
Таким образом, мы запрограммировали событие — нажатие кнопки UFO.
Для этого, во-первых, нам пришлось добавить обработчика события кнопке,
имеющей некоторое имя. Во-вторых, нам понадобилось явно записать функ-
цию с кодом обработки события (переходом на следующую сцену).
Аналогичным образом несложно определить код и для второй кнопки, напи-
сав его в том же блоке на панели Actions (Действия) (рис. 6.28):
function startRocket(event:MouseEvent):void
{
this.gotoAndPlay(1,"Scene 3");
}
Rocket_button.addEventListener(MouseEvent.CLICK, startRocket);

Теперь обратимся к финальному кадру каждой из оставшихся сцен (с НЛО и


ракетой) и разместим на них несложный сценарий, который будет переводить
действие на начальную сцену (с кнопками). Для этого, выделив соответст-
вующий ключевой кадр на панели Timeline (Монтаж), наберем с клавиатуры
на панели Actions (Действия) следующий код (рис. 6.29):
this.gotoAndStop(1,"Scene 1");
216 Ãëàâà 6

Рис. 6.28. Общая программа обработки нажатия каждой из кнопок

Рис. 6.29. Программа перехода на 1-й кадр 1-й сцены

В заключение обратим ваше внимание на то, что язык 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.5. Î ïðèíöèïàõ îáúåêòíî-îðèåíòèðîâàííîãî


ïðîãðàììèðîâàíèÿ
Читателю, ранее не сталкивавшемуся с техникой объектно-ориентированного
программирования (ООП), возможно, непросто будет сразу овладеть логикой
языков ActionScript, встроенных во Flash. Поэтому в данном разделе, никоим
образом не претендуя на полноту, и даже корректность, сведений, мы дадим
некоторые пояснения, которые, надеемся, помогут проникнуться духом про-
граммирования во Flash.
ООП построено по принципу работы с объектами — элементами интерфей-
са, оформленными специальным образом программами и т. п. Объекты ха-
рактеризуются определенными свойствами, а также для них предусмотрены
соответствующие действия (фактически, подпрограммы), называемые мето-
дами. При этом исключительно важно, что в конечной программе (в случае
работы с Flash — во Flash-фильме) участвуют не сами объекты, а их экземп-
ляры, которые можно считать клонами исходного объекта (источника).
Например, в рассматриваемом нами фильме из трех сцен мы используем два
объекта — кнопки с текстом UFO и Rocket. Кнопка Button UFO (именно так
называется соответствующий символ) на панели Library (Библиотека) — это
сам объект, а соответствующая кнопка в самом фильме, на панели Stage
(Сцена) — это его экземпляр. В принципе, в фильм можно вставить несколь-
ко экземпляров объекта (все они будут обладать одинаковым набором
свойств) и для каждого из экземпляров настроить эти свойства соответст-
вующим образом. Именно так, напомним, мы поступали, создавая несколько
экземпляров рисунков летающей тарелки и размещая их по экрану, масшта-
бируя и переворачивая каждый из экземпляров, а также настраивая для них
анимацию, независимо от других.
Проделаем еще несколько простых действий, чтобы разобраться с принципа-
ми ООП.
1. Нарисуйте инструментом Text (Текст) на панели Stage (Сцена) текстовый
блок, расположив его на том же слое, что и кнопки.
218 Ãëàâà 6

Рис. 6.30. Объект (кнопка UFO) на панели Library и его экземпляр на панели Stage

2. Введите в текстовый блок какой-либо текст.


3. На панели Properties (Свойства) выберите в раскрывающемся списке
Type (Тип) элемент Dynamic Text (Динамический текст) (рис. 6.31).
4. В поле Instance name (Поле экземпляра) на панели Properties (Свойства)
введите имя текста, например, status.
5. Снимите выделение со всех объектов на панели Stage (Сцена) и перейдите
к программе на панели Actions (Действия).
6. Измените функции обработки нажатия каждой кнопки, временно отклю-
чив созданный ранее код, поместив перед ним пару символов <// > и до-
бавив для каждой кнопки строку кода, показанную на рис. 6.32. Например,
действие строки кода status.text="UFO button was pressed"; будет
приводить к изменению текста объекта status.

Символы <// > в начале строки обозначают ее как неисполняемый комментарий


в коде программы.

7. Выберите в верхнем меню Control > Test Movie (Управление > Тестиро-
вать фильм).
8. Протестируйте фильм, нажимая по очереди ту или иную кнопку и наблю-
дая, как будет изменяться текст в текстовом блоке (рис. 6.33).
Таким образом, вы видите, что доступ к свойствам объектов имеет следую-
щую структуру: <имя экземпляра объекта > .<свойство > . В рассмотрен-
ном примере исходным объектом является текстовый блок (встроенный объ-
ект Flash, его экземпляром — объект status, а свойством — содержимое бло-
ка, т. е. находящийся в нем текст).
В качестве примера программирования метода можно привести несколько
раз использовавшийся в фильме вызов процедуры gotoAndPlay(), которая
Èíòåðàêòèâíîñòü (Flash) 219

относится к самому фильму, идентифицируемому ключевым словом this.


Таким образом, и для вызова метода (фактически, подпрограммы) в ООП ис-
пользуется тот же синтаксис <имя экземпляра объекта > .<метод > (пара-
метры метода). В рассмотренном примере это выглядело как строка кода
типа this.gotoAndPlay(1,"Scene 3");.

Рис. 6.31. Создайте в фильме динамический текст и дайте ему уникальное имя

Наконец, еще один неотъемлемый элемент ООП — это события, в частности,


вызываемые стандартными действиями зрителя: нажатием кнопок, наведени-
ем указателя мыши на те или иные объекты и т. д. Для обработки событий,
как уже отмечалось, предусмотрены специальные подпрограммы-листенеры,
являющиеся, по сути, методами, связанными с определенными объектами.
Например, метод addEventListener(MouseEvent.CLICK, startRocket), свя-
220 Ãëàâà 6

занный с объектом-кнопкой, является подпрограммой, отслеживающей мо-


мент нажатия кнопки и запускающей в этом случае на выполнение опреде-
ленную ранее функцию startRocket().

Рис. 6.32. Модифицируйте программу обработки нажатия кнопки

Рис. 6.33. Тестирование фильма


Èíòåðàêòèâíîñòü (Flash) 221

Резюмируем сказанное. ООП основано на двухэтапной технике. Во-первых,


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

6.6. Ïðîãðàììèðîâàíèå êîìïîíåíòîâ:


Flash-òåñòû
Рассмотрим в качестве примера практического использования программиро-
вания, как в программе Flash создаются документы, предназначенные для
электронного обучения. Для того чтобы сделать такой документ, разработчи-
ки предусмотрели специальный шаблон, называемый Quiz (Опрос).

6.6.1. Øàáëîí Quiz


Для того чтобы сконструировать новый Flash-фильм на основе шаблона
Flash, выполните следующее.
1. Начните создание нового документа при помощи команды File > New
(Файл > Создать).
2. В открывшемся диалоговом окне New from Template (Создать из шабло-
на) выберите категорию Quiz (Опрос) (рис. 6.34). В этом случае становят-
ся доступными три шаблона, на основе которых можно построить доку-
мент для электронного обучения.
3. Щелкните на одном из трех предлагаемых вариантов шаблона, оценивая
их дизайн при помощи области предварительного просмотра справа. Вы-
берите, например, стиль Quiz Style 1.
4. Нажмите кнопку ОК.
В результате документ Flash, созданный на основе шаблона, открывается на
панелях Timeline (Монтаж) и Stage (Сцена) (рис. 6.35). Этот документ уже
содержит несколько кадров, которые настроены должным образом, чтобы
быть заготовками для фильма, реализующего концепцию электронного обу-
чения. Шаблон устроен таким образом, что имеет несколько кадров. Первый
222 Ãëàâà 6

Рис. 6.34. Диалоговое окно New from Template

Рис. 6.35. Документ Flash, созданный на основе шаблона Quiz


Èíòåðàêòèâíîñòü (Flash) 223

кадр — это страница-приглашение, на которой можно разместить вводный


текст. Также эта начальная заставка содержит кнопку Next (Вперед), нажатие
которой переведет зрителя фильма к его следующему кадру, что организова-
но посредством соответствующего кода на языке ActionScript, который мож-
но просмотреть, обратившись к панели Actions (Действия).
Следующие несколько кадров представляют собой заготовки наиболее часто
употребляемых тестов. На втором кадре Flash-фильма имеется заготовка,
реализующая технологию Drag-and-Drop (Перетаскивание) (рис. 6.36). Тре-
тий кадр реализует тест для ввода некой текстовой информации. Следующий
кадр предлагает выбрать правильный ответ из нескольких предлагаемых ва-
риантов, и т. д. Последний кадр фильма — это обработка результатов опроса,
алгоритм которой также реализован на языке ActionScript.

Рис. 6.36. Один из кадров Flash-теста шаблона Quiz в режиме редактирования

Чтобы принцип действия шаблона Quiz (Опрос) был более понятным, сохра-
ните документ при помощи команды File > Save (Файл > Сохранить), а затем
осуществите его предварительный просмотр, для чего в верхнем меню
Control (Управление) выберите пункт Test Movie (Тестировать фильм). По-
сле небольшого времени экспорта Flash-фильм откроется в окне проигрыва-
224 Ãëàâà 6

теля Flash Player. Как несложно сообразить, Flash-фильм состоит из несколь-


ких экранных форм, переходы между которыми осуществляются нажатием
кнопки Next (Вперед). На второй странице (следующей за заставкой-
приглашением) зрителю необходимо перетащить предлагаемые варианты на
правильные позиции. В заготовке Flash-фильма используется четыре заготов-
ки объектов, отмеченные цифрами с 1 до 4 (рис. 6.37). Для правильного отве-
та зрителю следует перетащить объект 1 (слева) на цель 1 (справа), объект 2
на цель 2 и т. д. После нажатия кнопки Check Answer (Проверить ответ), в
результате работы ActionScript-программы, будет выдано сообщение о пра-
вильном результате Yes, that is correct (Да, правильно).

Рис. 6.37. Просмотр теста в проигрывателе Flash

На следующей странице задается вопрос: "Какое животное имеет белые и


черные полосы?" Ниже расположено поле для ввода ответа. Если ввести в это
поле (по-английски, поскольку именно так задан правильный ответ в шабло-
не) слово Zebra (Зебра), а потом для проверки правильности ответа нажать ту
же, что и на предыдущей странице, кнопку Check Answer (Проверить ответ),
то в результате вы получите ту же оценку Yes, that is correct (Да, правильно).
В случае если на какой-либо странице Flash-теста ввести неправильный ответ
(т. е. тот, который не соответствует эталонному ответу, заданному в шабло-
не), то в качестве оценки будет выдано сообщение No, that is not correct (Нет,
неправильно).
Èíòåðàêòèâíîñòü (Flash) 225

Кнопка Next (Вперед), находящаяся в правом нижнем углу экрана, переведет


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

Рис. 6.38. Последняя страница обучающего фильма с результатами теста

6.6.2. Íàñòðîéêà ñîáñòâåííûõ Flash-òåñòîâ


При использовании шаблона Quiz (Опрос) все, что остается вам для создания
собственного Flash-теста, — это правильно заменить соответствующие над-
писи, вопросы и ответы на те, которые будут составлять ваш собственный
тестовый фильм. Для этого нужно правильно заменить английские надписи,
которые появляются во Flash-документе из шаблона, соответствующими рус-
скими метками, для чего надо просто выделить английские слова и ввести с
клавиатуры на их место русские в соответствующие поля для ввода
(рис. 6.39). Настройка самих кадров с тестами осуществляется посредством
панели Component Inspector (Инспектор компонентов), без непосредствен-
ной правки программного кода на панели Actions (Действия).
226 Ãëàâà 6

Рис. 6.39. Замена надписей-приглашений на первой странице Flash-теста

Рассмотрим, как можно поменять текст во Flash-тесте и настроить его для


создания пользовательского тестового Flash-фильма. Выполните следующее.
1. Разблокируйте слой Title (Заголовок) на панели Timeline (Монтаж).
2. Выделите первый кадр этого слоя. Таким образом, вы получите доступ
к тексту шаблона, появляющемуся на всех кадрах Flash-фильма.
3. Введите новый текст в текстовые блоки на панели Stage (Сцена).
4. Вновь включите блокировку слоя Title (Заголовок) на панели Timeline
(Монтаж).
В результате новый текст будет присутствовать на всех страницах Flash-
фильма, поскольку он имеет всего один ключевой кадр, находящийся на его
первом кадре.
Подобным образом следует изменить и следующие кадры Flash-теста.
1. Перейдите к какому-либо ключевому кадру слоя Interaction (Взаимодей-
ствие), например к предпоследней шестой странице Flash-фильма.
2. Выделите группу объектов на панели Stage (Сцена) и введите команду
Modify > Break Apart (Изменить > Разбить на части).
Èíòåðàêòèâíîñòü (Flash) 227

3. Щелчком в свободной части кадра фильма на панели Stage (Сцена) сни-


мите выделение с объектов, которые теперь являются независимыми.
4. В верхнем меню Window (Окно) выберите команду Component Inspector
(Инспектор компонентов), чтобы раскрыть одноименную панель.
5. Выделите объект, соответствующий взаимодействию. Для предпоследней
страницы теста (реализующей выбор нескольких правильных ответов из
списка) это объект Multiple Choice Interаction (Взаимодействие при по-
мощи флажков проверки). В этом случае на панели Component Inspector
(Инспектор компонентов) открывается страница, описывающая свойства
выделенного объекта (рис. 6.40).

Рис. 6.40. Панель Component Inspector позволяет настроить тест

6. Замените метки, которые присутствуют в шаблоне, собственными мет-


ками. Например: в поле ввода Quеstion (Вопрос) введите необходимый
вам вопрос, выделяя содержимое поля и набирая текст с клавиатуры
(рис. 6.41).
7. Оставьте поле Interaction ID (Идентификатор взаимодействия) без изме-
нения, имея в виду, что, если предполагается увеличивать количество тес-
товых страниц, для каждой новой тестовой страницы необходимо будет
назначить свой идентификатор.
8. Для каждого из флажков проверки определите текстовую метку и выбери-
те, какие из флажков будут соответствовать правильным ответам. Делает-
ся это вводом текста метки с клавиатуры в поля, расположенные в столбце
228 Ãëàâà 6

Label (Метка), и установкой в столбце Correct (Правильно) флажка про-


верки на правильных вариантах ответа.
9. Уберите из теста лишние варианты, выделяя соответствующие объекты на
панели Stage (Сцена) и удаляя их.

Рис. 6.41. Настройка опций компонента теста при помощи панели Component Inspector

10. Нажмите на панели Component Inspector (Инспектор компонентов)


кнопку Options (Опции) и определите дополнительные параметры созда-
ваемого теста. Например, поле Tries (Попытки) позволяет задать количе-
ство попыток для ответа на данный тест; группа Navigation (Навигация)
предназначена для задания следующего действия после ответа зрителя
Flash-фильма.
11. Аналогичным образом замените содержимое остальных кадров шаблона.
12. Чтобы удалить лишние тестовые формы из шаблона, выделите соответст-
вующие кадры Flash-фильма и в верхнем меню Edit (Правка) наведите
указатель на пункт Timeline (Монтаж), а затем в подменю выберите
команду Remove Frames (Удалить кадры).
13. Для оценки результатов работы выберите в верхнем меню Control
(Управление) команду Test Movie (Тестировать фильм).
Отметим в заключение, что вовсе не обязательно ограничиваться заменой
текста в шаблоне обучающего Flash-фильма. Вы имеете возможность, как и
при редактировании обычных документов, располагать на кадрах и слоях
Flash-теста любые объекты: рисунки, видео или анимацию. Для этого доста-
Èíòåðàêòèâíîñòü (Flash) 229

точно (обычным способом) добавить соответствующие объекты на нужный


кадр Flash-теста. Напомним, что делается это так.
1. Выделите желаемый слой и его кадр на панели Timeline (Монтаж).
2. Введите команду File > Import > Import to Stage (Файл > Импорт > Им-
порт в фильм).
3. В диалоговом окне Import (Импорт) найдите и выделите требуемый рису-
нок (или файл другого типа).
4. Отредактируйте местоположение рисунка, перетаскивая его на новое ме-
сто на панели Stage (Сцена).
В результате рисунок будет вставлен в нужное место Flash-теста. Аналогич-
ным образом можно использовать в тестах видеоклипы, звук и другие объ-
екты.
Ïðåäìåòíûé óêàçàòåëü

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 Ïðåäìåòíûé óêàçàòåëü

Н Разметка шлейфа 178


Разработка сценария 208
Наложение: Расположение 119
◊ объектов в пределах слоя 94 ◊ объектов 94
◊ слоев 93 Растровая графика 11
Регистрационная точка 181
О Режим притяжения 126
Рисование:
Обновление рисунка 59 ◊ наложением 13, 95
Обрамление 127, 141 ◊ объектов 13, 124
Объект 14, 217 Рука 109
Овал 135
Открытие документа 45
Отладка сценариев 209
С
Отмена нежелательных действий 120 Свойства 221
Отображение слоя 99 Свойство 218
Сглаживание рисованных линий 131
П Сдвиг объекта 118
Сегмент 137
Палитра Align 120 Символ 58, 179, 195
Панели 23 Синхронизация:
Панель: ◊ видеоклипа 73
◊ Align 119 ◊ звука 75
◊ Color Mixer 110 Слои 107
◊ Информация 26 Слой 88, 93, 100
◊ Монтажа 25 Слушатель (обработчик событий) 215
Переход 166 Смартфоны 79
Перо 108, 138 Событие 17
Пипетка 109, 141 События 221
Подгонка размера объекта 120 Создание:
Покадровая анимация 170 ◊ нового фильма 47
Поле ввода 149, 155 ◊ слоя 96
Поток данных 67 Сотовые телефоны 79
Правка на месте 184 Сохранение документа 45
Предустановка 47 Статический текст 149
Преобразование 108 Стиль обрамления 128
Проект, открытие 46 Строчный текст 149
Профессиональная версия 21 Субвыбор 108, 146
Публикация фильма 79 Сцена 25, 30, 54, 99
Пустые кадры 90 Сценарии 202

Р Т
Рабочая область 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

Оценить