Web-разработка с Macromedia Studio MX



Создание анимированного текста


Каждый блок текста создается в своем собственном символе, а потом все они размещаются в рабочей области. Ниже мы рассмотрим создание только одного клипа, остальные создаются аналогично.
1. Создайте новый графический символ, выбрав в меню Insert=>New Symbol или нажав клавишу <F8>. Назовите этот символ Pants.
2. Выберите инструмент Text и переместите курсор в рабочую область. Курсор должен принять вид буквы А с четырехнаправленной стрелкой над ней. Щелкните в рабочей области, введите слово Pants в текстовое поле и выделите слово.
3. В окне свойств установите шрифт Arial Bold, размер — 48, цвет — белый (FFFFFF). Можете выбрать шрифт Arial Black, но не применяйте полужирное начертание.

Совет
Если вам нужно выделить слово или весь текст в текстовом поле, выберите инструмент Direct Selection и щелкните им в любом месте текста. После этого будет выделен весь блок, и вы сможете заменить шрифт, размер, цвет и т.д.

Замечание
Взглянув на текст, вы заметите, что промежуток между буквами Р и А не мешало бы сделать поменьше. Для этого нужно настроить кернинг пары букв. Во Flash настройка кернинга — это скорее формальность, она задается в процентах и называется tracking, флажок Kern, который всегда должен быть установлен, отвечает за выполнение кернинга (во многом аналогично тому, как это сделано в Fireworks). Но имейте в виду, что этому кернингу нельзя доверять полностью. В данном случае вам нужно сжать или растянуть последовательность букв.

4. Выделите букву Р и перетащите ползунок Tracking Control вниз. Вы видите, как остальные буквы строки передвигаются по направлению к выделенной букве и даже могут наехать на нее, если вы потащите ползунок слишком сильно. Установите значение этого параметра, равное -4. Это очень небольшое значение, однако при настройке кернинга нужно проявлять умеренность.

Совет
Есть и другой способ изменить расстояние между буквами. Щелкните инструментом Text между буквами и, удерживая нажатой клавишу <Alt>, нажимайте клавиши со стрелками управления курсором. После каждого нажатия расстояние между буквами изменяется приблизительно на 1/2 пикселя.


5. Выделив текстовый блок в рабочей области, выберите в меню Window=>Panels=>Align или нажмите комбинацию <Ctrl+K>. Щелкните на кнопке То Stage, а потом на кнопках Align to Horizontal Center и Vertical Center. Текстовый блок в рабочей области выровняется по центру как по горизонтали, так и по вертикали.
6. Для того чтобы создать анимированный текст, вам нужно преобразовать буквы в рисунок и поместить каждую букву в собственный слой. Выделите текст и выберите вменю Modify=>Break Apart или нажмите комбинацию <Ctrl+B>. Теперь каждая буква находится в своем собственном текстовом поле. Если вы примените команду Break Apart вторично, то каждая буква преобразуется в контур с заливкой.
7. Выделите весь текст в рабочей области. Выберите в меню Modify=>Distribute to Layers. После этого каждая буква попадет в отдельный слой. Если при этом у вас образовались лишние слои, удалите их. Если слои расположились в неудобном порядке, например вместо слова Pants получалось stnaP, перетащите их так, как вам покажется более удобным. Выделите каждую букву и преобразуйте ее в графический символ.
8. Нажмите клавишу <Ctrl>, щелкните на 25-м кадре в слое Р и протащите его вниз по слоям. Добавьте новый кадр, выбрав в меню Insert=>Frame или нажмите клавишу <F5>. Это нужно сделать для настройки длительности клипа. При частоте обновления 12 кадров в секунду ваш клип будет длиться ровно 2 секунды. На данном этапе ваша рабочая область и слои должны выглядеть так, как на рис. 12.25.
Теперь нам нужно сделать так, чтобы размеры букв в последовательности кадров увеличивались и проявлялись четче (fade in). Вот как это можно сделать.
1. Начиная с 5-го кадра верхнего слоя щелкните и протащите до нижнего слоя. Добавьте ключевой кадр, выбрав в меню Insert=>Key Frame или нажав клавишу <F6>.



Рис. 12.24. Здесь можно изменить самые разнообразные настройки текста, в том числе и кернинг

Совет
Можно многое сделать с помощью меню или клавиатуры, например вставить кадры, ключевые кадры, движущиеся объекты и пр. Однако имейте в виду, что для всего этого существует несколько способов. Щелчок на кадре правой кнопкой открывает контекстное меню, в котором можно выбрать нужную команду. Кроме того, можно просто щелкнуть на кадре в шкале времени (time line) и не отпускать кнопку мыши, при этом ..тоже откроется меню с доступными командами.

1. Перетащите ползунок воспроизведения на 1-й кадр и выделите все буквы, но не кадры. Выберите в меню окна свойств Color=>Alpha и установите значение 0.
Во Flash параметр Alpha означает непрозрачность. Если вы выделили буквы в рабочей области, то в окне свойств откроются свойства соответствующего объекта, т.е. букв. Если вы выделите кадры, то откроются свойства кадров и в таком случае вы не увидите параметр Color.
2. Когда буквы в 1-м кадре все еще выделены, выберите в меню Modify=>TransformoScale или нажмите комбинацию клавиш <Ctrl+Alt+S>. Задайте масштаб 40% и щелкните на кнопке ОК. Щелкните и протащите где-нибудь между 1-м и 5-м кадрами сверху вниз и выберите в меню Insert=>Create Motion Tween. Между ключевыми кадрами появится стрелочка. Если вы протащите ползунок воспроизведения, то увидите, что размеры букв увеличиваются и меняют четкость проявления. Мы выбрали для всех букв одинаковое значение. Но эффект можно сделать более интересным, если установить разные значения для разных букв.
3. Щелкните, удерживая нажатой клавишу <Shift>, на 1-м и 2-м кадрах слоя Р и перетащите выделение на 3-й кадр. Передвиньте остальные слои к случайным начальным точкам. Если кадр выходит за 25-ю позицию на шкале времени, щелкните на квадратике в конце шкалы и перетащите его на 25-й кадр.



Рис. 12.25. Слои созданы, буквы преобразованы в символы, длительность клипа составляет 25 кадров

4. Нажмите клавишу <Enter>, чтобы просмотреть клип (рис. 12.26).
5. Повторите все вышеописанные действия с остальными словами.
Поддержание порядка
Все буквы в каждом слове преобразованы у вас в символы. Это хорошо во всех отношениях, за исключением того, что некоторые буквы являются общими для данных слов, например буквы S и Т встречаются в нашем клипе несколько раз. Мы заменим букву соответствующим символом, если он ужа существует. Вот как это делается.
Выделите букву и запомните ее координаты X и Y в окне свойств. Удалите букву и перетащите ее символ в рабочую область. Введите запомненные ранее координаты в панели Info и нажмите <Enter>. Буква станет на свое место.
Рекомендуем хранить все объекты в библиотеке Library в соответствующих папках. Например, откройте новую папку о библиотеке, щелкнув на кнопке New Folder. Назовите эту папку Pants Folder и перетащите в нее все объекты, задействованные в анимации слова Pants. Папка открывается и закрывается двойным щелчком на ней.