Мир Flash MX на примерах

Урок 5. Создадим открытку ко Дню Рождения (Часть вторая)

Разница между неудачей и успехом заключается в том, чтобы делать что-то «почти правильно» и «совершенно правильно».

Эдуард Симмонз

На прошлом уроке (см. «Мир ПК», № 3/05, с. 127) мы поговорили о личных открытках и начали разрабатывать канву для них ко Дню Рождения, а на нынешнем закончим поздравление и рассмотрим еще несколько интересных приемов анимации, производимых с помощью программы Macromedia Flash МХ 2004. На прилагаемом к журналу диске найдите и скопируйте в свой каталог файлы, необходимые для урока.

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

«Желаю, чтобы даже на необитаемом острове...». Эффект Матрицы

Итак, мы остановились на том, что надо бы добавить в открытку пожелание. Сейчас познакомимся с приемом, которому я дала название «Матрица» из-за сходства со знаменитыми кадрами одноименного фильма.

Принцип его состоит в следующем. В три колонки сверху вниз падают буквы и образуют текст поздравления: «желаю, чтобы даже» «на необитаемом острове» «ты не чувствовал себя» «одиноко». Но последний кусочек пожелания не войдет в рассматриваемый эффект, он появится другим образом. Особенность приема состоит в том, что буквы в колонке выпадают из одной — самой верхней. Откройте мой файл Happy_B.fla, чтобы посмотреть, какова она, «матрица». А теперь давайте разбираться, как же ее построить.

В новом муви-символе matrix напишем первую колонку текста: «Желаю, чтобы даже». Чтобы буквы слов послушно выстроились в колонку, нужно внизу на панели Properties (Свойства) текста найти значок Change orientation of text (Изменить направление текста). Выберите из ниспадающего меню строку Vertical, Left to Right (По вертикали, слева направо) и напишите указанное выше словосочетание.
Немного увеличьте расстояние между буквами, указав в ячейке рядом со значком Character spacing (Межсимвольный промежуток) значение 2.
Теперь нажмите клавишу , чтобы создать новый ключевой кадр через 13 фреймов. Дважды воспользовавшись комбинацией клавиш +B, преобразуйте текст в заливку.
Перейдите к первому ключевому кадру и нажмите один раз комбинацию клавиш +B — тем самым вы разобьете слова на отдельные буквы. Если все сделано правильно, то вокруг каждой буквы появится голубая рамка.
Все буквы первого ключевого кадра должны быть выделены. Вызовите нажатием клавиш + K панель Align (Выровнять) и выберите на ней значок Align top edge (Выровнять по верхнему краю). После этого действия все буквы должны собраться вместе, налепившись на самую верхнюю. Проследите, чтобы в это время не был активен значок To Stage (По сцене).

Запускаем матрицу

По окончании подготовительной работы приступим к движению. Для реализации эффекта Матрицы примените анимацию формы Shape Tween, с которой мы уже встречались раньше (см. «Мир ПК», № 2/05, с. 108).

На панели Properties (Свойства) в поле Tween установите тип анимации Shape Tween. Проиграйте символ и убедитесь, что буквенная матрешка действительно рассыпается и символы выстраиваются в столбик.

Внимание! Учтите, пожалуйста, следующее.

Если воспользоваться анимацией формы Shape Tween на текстовых объектах, не преобразовав их прежде в заливку, то ничего не получится, так как данный вид анимации работает только с разгруппированными объектами типа Fill (Заливка).
Также ничего не выйдет, если с самого начала на первом кадре преобразовать буквы в заливку, а затем выровнять их — они просто-напросто «слипнутся» и «не поймут», как им дальше разворачиваться.

Рис. 1. Timeline (Монтажный стол) символа matrix

Пока получился только первый столбик матрицы. Проделайте аналогичную работу для двух других: «на необитаемом острове» и «ты не чувствовал себя». В итоге у вас должно получиться три столбца, образующих текст пожелания.
Теперь, руководствуясь рис. 1, создайте анимацию движения Motion Tween. В отличие от Shape Tween, анимация Motion Tween не работает с разделенными объектами. Следовательно, чтобы произвести данное движение, необходимо сгруппировать буквы каждого из трех словосочетаний. Для этого после второй ключевой точки движения Shape Tween нажмите , чтобы создать новый ключевой кадр. Выделите содержимое фрейма и нажмите комбинацию клавиш +G или воспользуйтесь меню Modify? Group (Изменить?Сгруппировать). Теперь путь к созданию движения Motion Tween открыт.

В общем, логика такова. Сначала мы работаем с первым столбиком — «желаю, чтобы даже», который появляется с помощью анимации Shape Tween. Затем он, как Motion Tween, «сползает» в самый низ, уходя за пределы сцены, и тут же на следующем ключевом кадре появляется над сценой и спускается так, чтобы его можно было прочитать. Два других столбика подчиняются той же логике, только с запаздыванием.

В конечном счете все три столбика выстраиваются и образуют текст пожелания. Убрать их помогает прием «штора» (см. «Мир ПК», № 3/05, с.127). Все это показано на рис. 1.

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

Внимание! Данный эффект потребует несколько больших ресурсов компьютера, чем наши предыдущие упражнения. Так что если вы не уверены в пропускной способности сети вашего абонента и быстродействии его машины, можете упростить эффект и не использовать анимацию формы Shape Tween, а ограничиться лишь анимацией движения Motion Tween. Учтите, что движение Shape Tween довольно «ресурсоемкое», и значит, при его применении всегда строго контролируйте объем файла на выходе.

Рис. 2. Строим свою матрицу

Можете попробовать тот же эффект в новом клипе, вставив несколько символов matrix на сцену и сделав буквы салатного цвета, а фон — черного. Вы увидите, насколько изображение будет походить на кадр известного фильма (рис. 2) .

«Одиноко». Прием «шире — уже»

На примере этого остатка пожелания рассмотрим прием «шире — уже», который также связан с изменением формы объекта. На прошлых уроках мы постоянно занимались движением типа Motion Tween, тогда как анимация формы Shape Tween была незаслуженно забыта. Теперь восполним этот пробел. Цель упражнения состоит в плавном сужении и расширении отдельных букв слова. Проделайте, пожалуйста, следующее.

В новом муви-символе lonely напишите слово «одиноко».
В поле Character spacing (Межсимвольный промежуток) вместо нуля укажите цифру 10, чтобы увеличить межбуквенное расстояние. Это позволит потом безнаказанно утолщать буквы, не боясь того, что они станут налезать друг на друга.
Нажмите дважды +B, разбив текст и преобразовав его в заливку. Создайте еще два ключевых кадра с промежутком в 35 фреймов. Итак, на первом и последнем кадрах буквы будут сужены — изящны и грациозны, а на втором, ключевом, мы их немного «подкормим», прибавив несколько пикселов в ширину.
Вернитесь к первому кадру и найдите в меню Modify?Shape (Изменить? Форма) пункт Expand Fill (Расширить заливку). В диалоговом окне настройки параметров, появившемся в ответ на щелчок мыши (рис. 3), установите следующие значения, чтобы заузить буквы:
- Distance (Расстояние) — указывает, сколько пикселов отнимется или прибавится (в зависимости от алгоритма) к начальной толщине объекта. Задайте значение, равное 1 пикселу. Конечно, вы можете попробовать и большие числа, но от этого слово порой деформируется.
- Direction (Направление) — позволяет выбрать один из двух алгоритмов: Expand Fill (Расширить заливку) или Inset Fill (Сузить заливку). Чтобы сделать буквы изящнее, включите функцию во втором алгоритме.

Рис. 3. Настройка диалогового окна Expand Fill (Расширить заливку)

Точно такие же настройки будет иметь и последний кадр символа lonely. Можете скопировать в буфер первый кадр и вставить его в требуемом месте. Теперь давайте отредактируем второй ключевой кадр — задайте Distance (Расстояние) равным 4 пикселам и выберите алгоритм Expand Fill (Расширить заливку).

На рис. 4 показано, как изменяется форма букв от тонких (первый ключевой кадр) к толстым (второй ключевой кадр).

Рис. 4. Плавное изменение формы букв

«Пусть все будет хорошо». В шатком мире теней

Сейчас мы рассмотрим еще один прием работы с текстом. От запланированного сценария осталось нереализованным всего одно пожелание: «Пусть все будет хорошо». Этот прием позволяет получить расплывчатые контуры-тени текста и экспериментировать со смещениями букв.

Рис. 5. Настройка диалогового окна Soften Fill Edges (Смягчить края заливки)

На новом слое создайте текст «Пусть все будет хорошо», преобразованный в заливку. Затем выделите содержимое слоя и воспользуйтесь пунктом меню Modify?Shape?Soften Fill Edges (Изменить?Форма?Смягчить края заливки). В появившемся диалоговом окне настройки параметров установите следующее (рис. 5):

Distance (Расстояние) — служит для задания «ширины» смещения (увеличения или уменьшения) текста. Отступ между копиями рисунка установите равным 2 пикселам.
Number of steps (Количество шагов) — именно это число отвечает на вопрос, сколько копий объекта нужно использовать для достижения эффекта. Нажмите цифру 3, указав тем самым число преобразований. Имейте в виду, что чем оно больше, тем более громоздким и объемным получится файл. Поэтому будьте осторожны при экспериментах с большими значениями данного параметра.
Direction (Направление) — существует два алгоритма смягчения границ: смягчение «наружу» Expand (Расширить) и смягчение «внутрь» Inset (Сузить). Включите функцию Expand (Расширить), определив алгоритм для смягчения заливки.

Рис. 6. Применение эффекта Soften Fill Edges (Смягчить края заливки)

Оживляем текст. Возвращаемся к буквам. Увеличьте масштаб и рассмотрите в деталях, как работает алгоритм «смягчения» (рис. 6, нижняя часть). После того как вы вдоволь налюбовались произведенным эффектом, щелкните мышью на внутренних элементах некоторых букв и удалите их. Сделайте текст повеселее, чтобы он соответствовал смыслу и оптимистичному содержанию поздравления. Экспериментируйте: красьте буквы в разные, но обязательно сочетающиеся между собой цвета, смещайте внутренности букв, пробуйте добавлять обводку. В общем, почувствуйте себя хозяином пожелания (рис. 6, верхняя часть).

Игровой момент. Неожиданное появление

Теперь, когда мы до конца разобрались с составляющими основного действия, будем считать, что вы сами определите место лирического героя в клипе. У меня он(а) появляется тогда, когда идет надпись «Милый Мишка... с мыслями о тебе» (см. «Мир ПК», №3/05, с.127). Как и в какой последовательности будет возникать то или иное пожелание, также решайте сами. Единственное, что нам осталось сделать, так это привнести какой-нибудь интересный игровой момент. Например, пусть при подведении мыши к слову «одиноко» рядом с медведем снова появится лирическая героиня.

Рис. 7. Сюрприз при подведении мыши к слову «одиноко»

Это делается достаточно просто. На основе «одиноко» нажатием клавиши создается символ типа Button (Кнопка), где в состоянии Over (Над) делается еще один слой, куда и вставляется лирическая героиня рядом с медведем (рис. 7).

Тестирование в режиме Bandwidth Profiler

Рис. 8. Режим Bandwidth Profiler (Профиль полосы)

Теперь давайте научимся осмысленно тестировать клип. Для этого в Macromedia Flash предусмотрен режим Bandwidth Profiler (Профиль полосы) (рис. 8). Советую вам всегда тестировать ролики в данном режиме, так как с его помощью исключительно удобно отслеживать процесс загрузки клипа. Чтобы активизировать Bandwidth Profiler (Профиль полосы), необходимо войти в режим тестирования, нажав +, а затем выбрать в меню View (Вид) опцию Bandwidth Profiler (Профиль полосы). После этого действия в верхней части окна появляется график, на котором показано, сколько данных передается каждому кадру клипа при определенной скорости загрузки. Скорость можно изменять с помощью меню View?Download Settings (Вид?Настройки загрузки). Обратите внимание на левую часть Bandwidth Profiler (Профиль полосы), где показаны ключевые характеристики созданного вами клипа. Рассмотрим их подробнее.

Movie (Клип) — отображаются основные параметры клипа:
Dim (Размер) — указываются параметры высоты и ширины документа.
Fr Rate (Частота кадров) — выводится информация о том, сколько кадров проигрывается за 1 с.
Size (Размер) — показывает размер результирующего swf-файла, т.е. вам совсем необязательно на промежуточных стадиях работы сохранять swf-файл, чтобы отслеживать его объем. У меня получился клип размером 74 Кбайт. Согласитесь, он совсем небольшой.
Duration (Длительность) — указывается длительность клипа в кадрах и в секундах. Также удобная опция, поскольку не всегда хочется результирующее число фреймов делить на 12 (стандартное количество кадров в секунду), чтобы узнать, сколько времени будет продолжаться клип. Время проигрыша открытки составляет чуть более 30 с. Для баннера или заставки сайта это непозволительная роскошь, но для личного поздравления в самый раз.
Preload (Предзагрузка) — определяется время загрузки клипа. Для нашей открытки оно составляет менее 1 с. Весь фокус в минимизации времени состоит в том, как у вас распределяются ресурсы. Например, если бы длительность клипа была мала, а вы загружали бы тяжелые символы с анимацией формы типа «матрицы» или растровыми рисунками, то время предзагрузки ощутимо увеличилось бы.
Settings (Настройки) — показывает, при какой скорости выполняется проигрыш клипа. Как я уже говорила, этот параметр можно изменять.
State (Состояние) — отражает состояние текущего кадра: номер и объем данных, которые передаются на данном фрейме. Старайтесь избегать таких ситуаций, при которых величина загрузки на одном кадре превышает 8 Кбайт, если не хотите, чтобы на слабеньких компьютерах клип притормаживал. В моем клипе максимальный объем передается только на первом кадре — 4 Кбайт. Далее он благополучно распределяется между соседними и не превышает 400 байт.

* * *

На этом наша работа закончена — поздравительная открытка готова. В ходе урока вы познакомились с Flash-эффектами, применимыми к тексту, потренировались с анимацией Shape Tween, узнали, что скрывается в меню Shape (Форма), изучили возможности тестирования в Bandwidth Profiler (Профиль полосы). А самое главное, теперь у вас есть чем порадовать ваших друзей на День Рождения.

Ксения Слепченко — менеджер и дизайнер Координационного центра программы ECDL на Украине (Европейский стандарт компьютерной грамотности), e-mail: ksenijas@yandex.ru.