Интернет технологии -> Flash -> Работаем с Flash: оригинальные текстовые эффекты

Работаем с Flash: оригинальные текстовые эффекты

Если речь заходит о Flash, то говорят прежде всего об ActionScript, редакторе действий (Actions) и панели отладки (Debugging). Конечно, эти нововведения в Flash МХ весьма существенны, но не стоит забывать и о некоторых других.

В этом туториале мы воспользуемся функцией Distribute to Layer (распределить по слоям), чтобы создать оригинальные эффекты анимации текста на кнопках. Конечно, возможности этой функции намного шире.

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

Это поможет вам в анимации текста. Например, если вы обработаете текст, то каждую букву будет в отдельном слое и вы сможете ее редактировать.

Итак, прочитайте и приколитесь:

	Этап 1. Функция распределения по слоям в Flash МХ. Используем ее для создания анимированных текстовых эффектов на отдельных буквах.
	Этап 2. Интересный эффект Shape Tween (постепенное преобразование формы). Создайте вложенные анимации Shape Tween для каждой буквы и затем добавьте эффект твиннинга (постепенного преобразования).
	Этап 3. Анимация при наведении указателя мышки С помощью невидимых кнопок, управляющих текстовыми клипами, можно создавать оригинальные эффекты.

Файлы для загрузки:
funky_text.zip
graphic_scene.zip
screen_time.zip
video.zip

Работаем с Flash: оригинальные текстовые эффекты

Этап 1. Функция распределения по слоям в Flash МХ.

Шаг 1

Откройте файл ecorp2.fla в Flash MX. Все файлы, упоминаемые в туториале, вам нужно загрузить. Сохраните его в своей папке и назовите ecorp2_mod.fla. Найдите текстовый слой (Text) на таймлайне и выберите его. Вставьте новый слой над текстовым - для этого нужно нажать кнопку "вставить слой" (Insert Layer)
Переименуйте только что созданный слой в Text MCs (Text Movie Clips - текстовые клипы). Снова выберите текстовый слой и скопируйте его - нажмите Ctrl/Command+C. Теперь выберите слой Text MCs и вставьте в него содержимое буфера обмена - нажмите Ctrl/Command+Shift+V.

Шаг 2

Нажмите Ctrl/Command+T, Ctrl/Command+K, Ctrl/Command+L и Ctrl/Command+I - появятся соответственно панели Трансформации (Transform), Выравнивание (Align), Библиотеки (Library) и Информации (Info). Разместите эти четыре панели справа, а остальные панели оттуда скройте. Откройте панель Библиотеки и разместите ее внизу, так чтобы как было видно как можно больше. Разверните все четыре панели.

Шаг 3

Нажмите на иконку папки на панели библиотеки - появится новая папка. Назовите ее "Default Resources" (стандартные ресурсы) и перетащите в нее все клипы и графику. Удерживая клавишу Option/Alt нажмите на иконку с глазом возле текстового слоя - остальные слои станут скрытыми. Откройте панель свойств (Properties) внизу, выделите все текстовый элементы слоя и измените их цвет на светло серый (значение #CCCCCC).

Шаг 4

Повторите аналогичную процедуру со слоем Text MCs. Выберите слово "Home". Нажмите F8 - откроется диалоговое окно преобразования в символ (Convert to Symbol).

Введите имя Home Main MC, установите поведение (Behaviour) на "клип" (Movie Clip), оставьте совмещение (Registration) по центру и нажмите OK. Теперь выделите клип "Home Main MC" и нажмите Command/ Ctrl+E, чтобы отредактировать его. Увеличьте масштаб отображения текста.

Шаг 5

Выберите слово "Home". Нажатие Ctrl/Command+B разделит текст на составляющие, а Ctrl/Command+Shift+D - распределит полученные объекты по слоям. Переименуйте слой Layer 1 в "Actions". Выделите букву "H" на соответствующем слое. Нажмите F8 и в появившемся диалоговом окне введите имя "Home MC H", поведение - клип, совмещение - по центру. То же самое проделайте с буквами "O", "M" и "E", назвав их соответственно "Home MC 0", "Home MC M" и "Home MC E".

Шаг 6

Кликните на иконке папки на панели библиотеки, чтобы создать новую папку. Назовите ее "Home Text" и переместите туда клип "Home Main MC". Создайте еще одну папку - "Home Letters" и переместите туда клипы для всех букв - "Home MC H", "Home MC 0", "Home MC M" и "Home MC E".

Шаг 7

Выделите клип "Home MC H" и отредактируйте его (Ctrl/Command+E). Выделите букву "H" и нажатием Ctrl/Command+B разбейте его на составляющие. В меню Вид выберите Увеличение > 800 процентов (View>Magnification>800). Подгоните размеры окна так, чтобы справа и сверху от буквы "Н" осталось немного пространства. Выберите инструмент Линия (Line tool) нажатием клавиши "N". На панели свойств измените параметр Stroke Height (высота штриха) на 0.25. Измените цвет на красный.

Шаг 8

Удерживая клавишу Ctrl/Command нарисуйте прямую горизонтальную линию справа и немного выше буквы "Н", приблизительно вдвое шире чем она. Инструментом Стрелка (Arrow), который вызывается нажатием клавиши "V" и выделите линию. Нажмите Ctrl/Command+D пять раз, чтобы создать пять копий линии. Поместите пятую линию чуть ниже буквы. Теперь выделите все линии и откройте панель Выравнивание (Align). Выровняйте линии по левому краю (крайняя левая кнопка на панели выравнивания) и распределите их по центру по горизонтали).

Шаг 9

Сгруппируйте линии нажатием Ctrl/Command+G. Откройте диалоговое онко преобразования в символ (F8). Введите имя "Lines", поведение - клип, совмещение - по центру. Нажмите на панели выравнивания кнопку "To Stage" (по размерам сцены), а затем отцентруйте клип с линиями по вертикали и горизонтали. Нажатием Ctrl/Command+B разделите объект на составляющие. Выделите любой участок буквы "Н" и вы увидите, что мы "нарезали" этими линиями нашу букву.

Этап 2. Интересный эффект Shape Tween (постепенное преобразование формы).

Шаг 1

Переименуйте слой "Layer 1" в "H Shape Tween". Вставьте новый слой нажатием кнопки "вставить слой" (Insert Layer) и назовите его "Actions". Выберите кадр 15 в обоих слоях - "H Shape Tween" и "Actions". Добавьте ключевой кадр нажатием F6. Теперь выберите кадр 15 в слое "Actions". Откройте панель действий (Actions). Выберите Действия > органы управления клипа (Actions>Movie Control). Двойным щелчком мыши добавьте действие "стоп" - stop() - в ключевой кадр. Сверните панель действий.

Шаг 2

Выберите кадр 1 в слое "H Shape Tween". Выберите Вид > Увеличение > 800% (View > Magnification > 800 per cent). Выберите инструмент Увеличение (Zoom) клавишей M или Z. Выберите увеличение и щелкните мышью в центре "Н". Выберите инструмент Стрелка (клавиша "V"). Удерживая Shift выделите элементы буквы "Н" заключенные между двумя верхними, затем двумя средними и двумя нижними линиями. Продолжая удерживать Shift сместите влево выделенные участки на пунктов (20 раз нажмите клавишу "влево"). Выделите, удерживая Shift, оставшиеся элементы буквы и сместите их вправо на 20 пунктов.

Шаг 3

Щелкните мышью на любом кадре между 1 и 15 в слое "H Shape Tween". Откройте панель свойств и поставьте в Tween параметр Shape (форма). В поле Ease (припуск) введите значение -50. Позже мы применим постепенное уменьшение яркости с помощью альфа-прозрачности. Поэтому мы повременим с эффектом Shape Tween, пока клип виден более четко. Режим смешивания (Blend) оставьте на Distributive (распределение).

Шаг 4

Сверните панель свойств. Выберите кадр 1 в слое "H Shape Tween". Примените команду "выделить все" и нажмите Ctrl/Command+B. Теперь выберите инструмент Стрелка. Выделите все красные линии и удалите их. Будьте внимательны, поскольку линии разбиваются на части везде, где пересекаются с линиями буквы и некоторые части будут размером с точку. Но вам нужно удалить их все.

Шаг 5

Теперь выберите кадр 15 в слое "H Shape Tween". Выделите и удалите все красные линии. Убедитесь в том, что удалили все. Просмотрев все кадры от 1 до 15 вы можете выявить оставшиеся линии. Если вы заметите красные линии в окончательном эффекте, значит они остались в одном из кадров. В результате должны получиться только меняющиеся черные линии.

Шаг 6

Вернитесь к клипу "Home Main MC". Добавьте 30 кадров в каждом кадре. Откройте диалоговое окно предпочтений (Preferences) нажатием Ctrl/Command+U. Отключите параметр Span Based Selection (сегментное выделение). Параметр Span Based Selection затрудняет выделение некоторых кадров. Если вы, например, щелкнете мышью на кадре 5 в слое "H", то выделится весь сегмент, а не один кадр. Отключение этого параметра значительно упрощает вставку ключевых кадров.

Шаг 7

Нажмите ОК и закройте окно предпочтений. Щелкните на кадре 5 в слое "Н" и нажмите F6. Еще раз кликните на кадре 5 и выберите клип "Home MC H". Разверните панель трансформаций "Transform" и введите в поле Вращение (Rotation) значение 180. Разверните панель свойств и поменяйте цвет на альфа со значением 0. Теперь щелкните на любом кадре от 5 до 15 в слое "H". В поле Tween панели свойств установите параметр Motion (движение). Все свойства в секции Tween оставьте по умолчанию. Выберите кадр 1 в слое "H" и удалите клип "Home MC H".

Шаг 8

Теперь вам нужно повторить все шаги с 7-го шага первого этапа до 7-го шага второго этапа с клипами "Home MC O", "Home MC M" и "Home MC E". Единственное, что когда вы будете делать шаги 8 и 9 первого этапа, можете не рисовать линии, а перетащить клип "Lines" и отцентровать его поверх буквы. Напрмер, при работе с "Home MC O" разбейте "О" на составляющие, перетащите клип "Lines", отцентруйте его и разбейте на составляющие. Применяйте к клипам эффект Shaped Tween с теми же установками.

Шаг 9

В клипе "Home Main MC" movie clip, сместите изменения для каждой буквы на 5 кадров. К примеру, в клипе "Home MC O" начните твиннинг на слое "O" в кадре 10 и закончите его на кадре 20, в клипе "Home MC M" начинайте с кадра 15 в слое "М" и заканчивайте на 25. Не забудьте удалить клипы из первых кадров каждого слоя.

Этап 3. Анимация при наведении указателя мышки

Шаг 1

Выберите слой "Actions" и нажмите кнопку "вставить слой". Назовите новый слой "Labels". Кликните на первом кадре нового слоя 1. Откройте панель свойств и установите Label на Rollover. Добавьте еще 35 кадров во всех слоях. Выберите кадр 35 в слое "Labels". Добавьте ключевой кадр (F6). На кадре 35 установите значение Rollout.

Шаг 2

Выберите инструмент Стрелка и протащите кадры с первого по 30 в слоях "H", "O", "M" и "E". Нажмите Ctrl+Alt+C (PC)/Command+Option+C (Mac), чтобы скопировать кадры. Теперь выберите кадр 35 на слоях H, O, M и E. Вставьте кадры (Ctrl+Alt+V (PC)/Command+Option+V (Mac)). Flash MX добавит лишние кадры в слоях H, O, M и E, с 65 по 94. Выделите их и удалите (Shift+F5). Выберите кадр 60 в слоях H, O, M и E и добавьте кадр (F5).

Шаг 3

Выберите инструмент Стрелка и протяните через кадры с 35 по 65 в слоях H, O, M и E. Воспользуйтесь командой Реверс из меню Изменить > Кадры (Modify>Frames>Reverse). Тепер добавьте ключевой кадры в слое Actions в кадрах 30 и 65. Добавьте действие Stop в кадрах 1, 30 и 65 слоя Actions.

Анимация почти готова. Если бы функция Reverse Frames работала так, как нужно, то у нас была бы одна и та же закономерность изменения от 35 до 65 кадра, как и от 1 до 30, только в обратном порядке. Нужно немного доработать этот момент.

Шаг 4

Добавьте ключевой кадр в кадр 40 слоя M, кадр 45 слоя O и 50 - слоя H. Выберите кадры с 35 до 40 на слое М. Нажмите правую кнопку мыши (или Option и левую кнопку на Mac на кадрах и выберите в меню "очистить ключевой кадр" (Clear Keyframe). Повторите это же со слоем О (кадры 35-45) и слоем Н (35-50). Действие stop в кадре не позволяет пользователю увидеть что-либо. нам нужно добавить органы управления событиями к невидимым кнопкам, чтобы пользователи видели анимацию, когда наводят указатель мыши на кнопку и уводят с нее.

Шаг 5

Вернитесь в основное окно. Все слои, кроме Text MCs, должны быть невидимыми. Вы должны видеть белые точки. Это клип, над которым мы работаем. Flash показывает клип, в первом кадре которого нет графики. Щелкните на белой точке с кнопкой Arrow и откройте панель свойств. Измените имя объекта на "home".

Шаг 6

Теперь щелкните мышью, удерживая Alt/Option на белой точке под иконкой глаза возле слоя кнопок (Buttons) - это третий слой под слоем Text MCs layer. В этом слое находится несколько голубых прямоугольников - невидимые кнопки. В таком виде Flash отображает кнопки без содержимого в исходном состоянии. Голубой объемный прямоугольник - нажатие мышью. Эти голубые прямоугольники незаметны при просмотре клипа. Выберите верхнюю кнопку.

Шаг 7

Откройте и разверните панель действий. Учтите, что на кнопке уже есть маркеры событий on (RollOver) и on (RollOut). Выберите панель действий и нажмите Ctrl/Command+Shift+E, чтобы переключиться в расширенный режим (Expert Mode). Поставьте курсор в конце строки кода _root.one.gotoAndPlay("OUT");
и нажмите ввод. Затем добавьте
_root.home.gotoAndPlay(2);
к коду on (RollOver). Теперь разместите курсор в конце строки _root.one.gotoAndPlay ("IN");
и добавьте
_root.home.gotoAndPlay ("RollOut");
к коду on (RollOver).

Шаг 8

Сверните панель действий и нажмите Ctrl/Command+Enter, чтобы протестировать клип. Наведите мышь на кнопку Home и отведите в сторону - посмотрите, что произойдет. Обратите внимание, что анимации разные, при разных действиях мыши. Закройте тестовое окно. Теперь вы можете создать аналогичные эффекты с другими надписями для других кнопок.

Шаг 9

Чтобы сэкономить время, советую вам использовать в других надписях клипы с уже имеющимися буквами. Просто скопируйте и вставьте их. Функция Distribute to Layers позволяет создавать множество оригинальных текстовых эффектов. Экспериментируйте и наслаждайтесь. Успехов.