Adobe Flash CS3 - это просто! Создаем Web-анимацию

Citation preview

Äìèòðèé Êèðüÿíîâ Åëåíà Êèðüÿíîâà

Ñàíêò-Ïåòåðáóðã «ÁÕÂ-Ïåòåðáóðã» 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 (Сцена) демонстрируются кадры фильма, через которые вы проносите линию редактирования;  щелчок в нужном месте шкалы времени — при этом линия редактирова-

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

осуществляется нажатием клавиши .

Во 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 (Сцена), выделите их на этой панели щелчком мыши и удалите из фильма нажатием клавиши .

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 Keyframe (Вставить пустой ключевой кадр) (рис. 1.36). 6. Выделите созданный ключевой кадр на панели Timeline (Монтаж).

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

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

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

39

40

Ãëàâà 1

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

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

9. Для того чтобы создать еще один ключевой кадр в середине анимации на верхнем слое fly, выделите щелчком этот кадр на панели Timeline (Монтаж), вызовите контекстное меню и выберите в нем пункт Insert Keyframe (Вставить пустой ключевой кадр). 10. Перейдите к первому ключевому кадру анимации на слое fly на панели Timeline (Монтаж). 11. Выберите на панели Tools (Инструментарий) инструмент Free Transform (Преобразование). 12. Схватитесь инструментом Free Transform (Преобразование) за маркер обрамления рисунка с шаром и измените его масштаб, перетаскивая маркер в ту или иную сторону (рис. 1.39).

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

41

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

1.3.4. Ïðåäâàðèòåëüíûé ïðîñìîòð ôèëüìà Рассмотрим в заключение различные опции предварительного просмотра созданного Flash-фильма. 1. Щелкая на шкале времени, просмотрите несколько кадров фильма, чтобы убедиться в том, что движение шара сопровождается плавным изменением его размера. 2. Перейдите к первому кадру фильма и нажмите клавишу , чтобы просмотреть фильм в динамике на панели Stage (Сцена). 3. Выберите в верхнем меню команду Control > Test Movie (Управление > Тестировать фильм), чтобы просмотреть фильм в окне встроенного проигрывателя (рис. 1.40).

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

42

Ãëàâà 1

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

Наконец, отметим, что для более удобного просмотра фильма может применяться не только верхнее меню Control (Управление), но и панель Controller (Управление) (рис. 1.41), которую можно вызвать командой Window > Controller (Окно > Управление). Перечислим (слева направо) назначение кнопок панели 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) выберите опции трассировки (о них написано ниже).

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

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-фильма загрузку видео с сервера в момент его просмотра, выберите одну из трех первых опций, например Progressive 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). Запуск финальной публикации фильма (в результате которой создаются упомянутые файлы) осуществляется нажатием сочетания клавиш + или вводом команды 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

Формат (расширение) fla

Главное назначение Сохранение процесса редактирования фильма — основной формат Flash

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

Примечания: как 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 mpeg и т. д.

Видео

Медиапроигрыватели, например, Windows Media Player

Импорт / (иногда экспорт)

gif bmp jpeg и т. д.

Растровая графика

Графические редакторы и средства просмотра

Импорт / (редко экспорт)

ai fh и т. д.

Векторная графика

Специализированные графические редакторы, например, FreeHand

Импорт / (редко экспорт)

wav au mp3 и т. д.

Звук

Медиапроигрыватели, например, Windows Media Player

Импорт / (редко экспорт)

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

86

Ãëàâà 2

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

вателем в самой программе Flash);  просмотр (соответственно, производимый зрителем фильма, например,

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

ÃËÀÂÀ

3

Êàäðû è ñëîè Посвятим эту главу основным приемам послойного монтажа фильма, главным образом, на примере импортированных рисунков. Для компоновки фильма относительно линейки времени следует использовать панель Timeline (Монтаж), совмещая действия на ней с просмотром кадров 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 Photoshop — 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. Äåéñòâèÿ ñ êàäðàìè ñëîÿ Рассмотрим теперь наиболее важные операции с отдельными кадрами (как ключевыми, так и обычными). Для редактирования кадров на панели Timeline (Монтаж) предусмотрены следующие операции:  выделение одного кадра — для этого достаточно щелкнуть на нужном

кадре слоя;  выделение нескольких кадров — для этого следует применять щелчки при

удерживаемой клавише или ;  выделение неизменного фрагмента слоя от ключевого кадра до последнего

обычного кадра — для этого используется двойной щелчок мыши;

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

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

с одного слоя на другой) — для этого следует выделить кадр и перетащить его на новое место (имейте в виду, что при перетаскивании обычного кадра на новое место он автоматически сделается ключевым);  удаление кадра или фрагмента слоя — достаточно выделить кадр или

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

ключевого кадра — эту операцию следует выполнять при помощи команд

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 (Библиотека) — для этого применяется выделение нужного кадра на панели Timeline (Монтаж) и последующее перетаскивание этого объекта на панель 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 (Выбор) через эту область при нажатой кнопке мыши.  Для того чтобы добавить к уже выделенным объектам еще один или не-

сколько, нажмите и удерживайте клавишу , а потом выделите новые объекты инструментом Selection (Выбор).  Для выделения всех объектов текущего кадра на всех слоях нажмите на

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

ра, определите ее, "нарисовав" на кадре фильма инструментом Lasso (Лассо) (рис. 3.30). При желании можно задать область в виде многоугольника, предварительно установив соответствующий режим нажатием нижней кнопки из группы Options (Опции). Вершины многоугольника определяются щелчками инструментом Lasso (Лассо) на кадре фильма.

Êàäðû è ñëîè

115

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

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

Для удаления выделенного объекта достаточно нажать клавишу на клавиатуре, либо выбрать в верхнем меню 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. Для сохранения пропорций объекта нажмите и удерживайте при масштабировании клавишу . 5. Чтобы изменить форму объекта, задав перемещение только перетаскиваемого маркера, удерживайте при его перетаскивании нажатой клавишу . 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

нить), либо нажав комбинацию клавиш +. Для повторения ранее отмененного действия служит команда Edit > Redo (Правка > Повторить) либо комбинация клавиш ++.

Для повторения и отмены последовательности последних действий можно воспользоваться панелью History (Журнал) (рис. 3.38).

ÃËÀÂÀ

4

Ðèñîâàíèå

Рисование разнообразных графических примитивов (см. разд. 4.2) и текстовых объектов (см. разд. 4.3) во Flash осуществляется на слоях на панели Stage (Сцена), на ключевых кадрах фильма, определенных на панели Timeline (Монтаж). Рисование производится инструментами, выбираемыми на панели 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. Рисование графических примитивов (на примере линии)

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

Ðèñîâàíèå

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 Transform (Преобразование градиента) (рис. 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 (Библиотека), либо просто нажмите клавишу . 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)

Рис. 6.18. Сценарий gotoAndStop назначен первому кадру слоя

Рис. 6.19. Назначение сценария prevFrame() последнему кадру сцены с НЛО

207

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 ActionScript 16, 193 Adobe Device Central 79 Adobe Flash Video Encoder 64 Align 119, 120 Anchor point 117

E Edit in place 184 Eraser 109, 133 Event 17, 219 Eyedropper 109, 141

F B Betweening 14 Bitmap 11 Break Apart 148 Bring to Front 95 Brush 132 Button 17, 179, 195

C Cap 129 Color Mixer 110 Convert Lines to Fills 145 Current-time indicator 28

D Data rate 67 Digital Video 65 Distribute 120 Down 200 DV 65 Dynamic text 149

Fill 127 Filter 189 Flash Lite 19, 79 Flash Player 18, 85 Frame 14, 100 Frame based selection 99

G Go To and Play 209 Gradient Transform 144 Graphic 179

H Hand 109 History 26, 120, 121 Hit 197

I Info 26 Ink Bottle 141 Input Text 149, 155

232

J

Ïðåäìåòíûé óêàçàòåëü

Resize video 68 Rotate 162

Join 129

K Keyframe 90, 100

L Layer 88 Library 24 Listener 215 Loop 41

M Menu 26 Merge drawing 13 Monitor 25 Motion guide 172 Motion tweening 158 Movie clip 179 MP3 67 Multiline 156

O Object drawing 13 Oval 135 Over 200

P Paint Bucket 141 Pen 138 Pencil 130 Play 42 Polygon 138 Polystar 109 Properties 137

Q Que point 69 Quiz 221

R Registration point 181

S Scene 30 Script Assist 208 Selection 108, 113, 114, 115, 148 Send Backward 95 Shape tweening 158 ShockWave Flash 18 Shortcuts 26 Smoothing 131 Snap 126 Span based selection 99 Stage 25 Star 138 Static text 149 Stream 75 Stroke 127 SWF-файл 19 Sync 75

T Tab 87 Text 153 Time ruler 27 Timecode 88 Timeline 24, 25, 30, 87, 88 Tools 25, 123 Tweening 14, 157

U Undo 120 Up 200

V Vector 11

W Web 9 Workspace 31

Z Zoom 109

Ïðåäìåòíûé óêàçàòåëü

А Альфа-канал 93 Анимационный символ 186 Анимация: ◊ вращения 162 ◊ движения 158 ◊ формы 158, 163 Аудиоклип 76

Б Библиотека 24

В Векторная графика 11 Вложенная анимация 186 Временная шкала 27 Вставка объекта в фильм 111 Выбор 108, 113, 148 Выравнивание 119

Г Горячие клавиши 26 Градиент 142 ◊ цвета 110 Графический символ 179

Д Динамический текст 149 Документ: ◊ создание 47 ◊ сохранение 45

Ж Журнал 26, 121

З Закладка фильма 87 Заливка 127, 141 Замена рисунка 59 Звезда 138 Звук 74 Зритель фильма 86

233

И Импорт 49, 50, 52 ◊ видео 59 Индикатор текущего кадра 28 Инструментарий 25, 123 Интерактивность 16 Интернет 9

К Кадр 14 Карандаш 130 Кисть 132 Клип 179 Ключевой кадр 100 Ключевые кадры 14, 90 Кнопка 179 Кнопки 195 Кодек 66 Кодировщик Flash-видео 64 Кольцо 137 Края линии 129 Кривые Безье 138

Л Лассо 108, 113 Ластик 109, 133 Линейка времени 27 Линия 135 ◊ редактирования 29 Листенер 215, 219

М Масштаб 109 Масштабирование 115 Меню 26 ◊ контекстное 26 ◊ окна 26 Методы 221 Многоугольник 138 Монитор 25 Монтажный стол 25, 87

234

Н Наложение: ◊ объектов в пределах слоя 94 ◊ слоев 93

О Обновление рисунка 59 Обрамление 127, 141 Объект 14, 217 Овал 135 Открытие документа 45 Отладка сценариев 209 Отмена нежелательных действий 120 Отображение слоя 99

П Палитра Align 120 Панели 23 Панель: ◊ Align 119 ◊ Color Mixer 110 ◊ Информация 26 ◊ Монтажа 25 Переход 166 Перо 108, 138 Пипетка 109, 141 Подгонка размера объекта 120 Покадровая анимация 170 Поле ввода 149, 155 Поток данных 67 Правка на месте 184 Предустановка 47 Преобразование 108 Проект, открытие 46 Профессиональная версия 21 Публикация фильма 79 Пустые кадры 90

Р Рабочая область 31 Разбиение: ◊ объекта 146 ◊ рисунка 53

Ïðåäìåòíûé óêàçàòåëü

Разметка шлейфа 178 Разработка сценария 208 Расположение 119 ◊ объектов 94 Растровая графика 11 Регистрационная точка 181 Режим притяжения 126 Рисование: ◊ наложением 13, 95 ◊ объектов 13, 124 Рука 109

С Свойства 221 Свойство 218 Сглаживание рисованных линий 131 Сдвиг объекта 118 Сегмент 137 Символ 58, 179, 195 Синхронизация: ◊ видеоклипа 73 ◊ звука 75 Слои 107 Слой 88, 93, 100 Слушатель (обработчик событий) 215 Смартфоны 79 Событие 17 События 221 Создание: ◊ нового фильма 47 ◊ слоя 96 Сотовые телефоны 79 Сохранение документа 45 Статический текст 149 Стиль обрамления 128 Строчный текст 149 Субвыбор 108, 146 Сцена 25, 30, 54, 99 Сценарии 202

Т Таймкод текущего кадра 88 Текст 153 Текстовый блок 149 Текущий кадр 28

Ïðåäìåòíûé óêàçàòåëü

Точка: ◊ разметки 69 ◊ привязки 117 Траектория 172 Трассировка рисунка 53

У

235

Ч Частота кадров 14

Ш Шаблон 47, 221 Шкала времени 27, 29, 88 Шлейф 177

Удаление слоя 97

Э Ф Фильтр 189 Фон 92 Функции 209

Экземпляр символа 182 Экспорт 33, 76 ◊ фильма 76 Эмулятор устройства 83 Эффекты панели Монтажа 166