Анимация появления текста (с использованием маски)

7.1. Создайте новый файл Flash. Установите частоту кадров 12 к/с.

7.2. Cлой 1 переименуйте в Текст и в первом кадре создайте надпись – Ваше имя. Используйте шрифт, похожий на рукописный, размер – 150, трекинг – 5; цвет – яркий).

Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru

7.3. Вставьте на слое Текст 72-й ключевой кадр (<F6>).

7.4. Создаете новый слой, который будет маской для слоя Текст. Назовите слой Маска. В контекстном меню созданного слоя выберите команду Маска. При этом оба слоя станут заблокированными.

Анимация появления текста (с использованием маски) - student2.ru

7.5. Снимите блокировку на слое Маска.

7.6. Возьмите инструмент Кисть. Выберите на Панели «Инструменты» размер кисти немного толще чем линии символовы текста. Назначьте кисти цвет отличный от цвета текста. Проверьте, чтобы кнопка «Рисование объектов» на Панели «Инструменты» была отключена.

7.6. В третьем кадре слоя Маска создайте ключевой кадр, войдите в него и немножко закрасьте "начало" первой буква слова.

Анимация появления текста (с использованием маски) - student2.ru

Затем создайте шестой ключевой кадр и еще немного закрасьте букву.

Анимация появления текста (с использованием маски) - student2.ru

Повторите ту же операцию в девятом кадре. Закрашивайте надпись так, как если бы вы писали.

Анимация появления текста (с использованием маски) - student2.ru

Продолжайте выполнять аналогичные действия в каждом третьем кадре (12, 15, 18 и т.д.), пока вся надпись не будет закрашена.

Анимация появления текста (с использованием маски) - student2.ru

Протестируйте анимацию.

Примечание. Маску можно использовать также и для постепенного появления любых изображений.

Создание ролика

8.1. Откройте файл Заготовки.fla и сохраните его под другим именем в свою папку.

Файл содержит один слой «Заготовки» с изображением двух картинок: «батарея» и «рука с телефоном», а также картинку для фона и звуковой файл в библиотеке.

8.2. Вставьте четыре новых слоя: Фон, Телефон, Звук и Команды. Между слоями Телефон и Звук вставьте папку слоев "Текст и батарея", в которую добавьте слои: Текст, Текст-1, Текст-2, Текст-3 и Батарея. Слои на Временной шкале должны быть в следующем порядке:

Анимация появления текста (с использованием маски) - student2.ru

8.3. Создайте 77-й ключевой кадр на слое Телефон и переместите в него со слоя Заготовки изображение телефона (руки с телефоном).

8.4. Создайте 199-й ключевой кадр на слое Батарея и переместите в него со слоя Заготовки изображение батареи. 8.5. Слой Заготовки – удалите.

8.6. В первый кадр слоя Фон поместите изображение Фон.jpg из библиотеки. Выделите изображение и преобразуйте его (<F8>) в графический символ.

Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru

8.7. Добавьте звук, синхронизировав его с действиями на сцене. Для этого: выберите 47-й кадр слоя Звук, вставьте пустой ключевой кадр (<F7>) и на панели «Свойства» задайте для него следующие параметры:

Анимация появления текста (с использованием маски) - student2.ru

8.8. Выберите 253-й кадр слоя Команды, вставьте пустой ключевой кадр и на панели «Действия» введите команду: stop ();

8.9. Создайте эффект постепенного появления фона. Для этого: на слое Фон вставьте 40-й ключевой кадр (<F6>) и создайте классическую анимацию движения между 1-м и 40-м кадром. Выделите изображение в 1-м кадре слоя Фон на панели «Свойства» установите яркость –100%.

Анимация появления текста (с использованием маски) - student2.ru

8.10. Создайте эффект появления руки с телефоном. Для этого: на слое Телефон вставьте 84-й ключевой кадр (<F6>) и создайте классическую анимацию движения между 77-м и 84-м кадром. Изображение в 77-м кадре слоя Телефон разместите в правом углу внизу изображения фона, а в 84 – на фоновом изображении справа.

Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru

8.11. Выберите 88-й кадр слоя «Текст», вставьте пустой ключевой кадр и введите ("на экран телефона") текст "Входящее текстовое сообщение..." (как показано на рисунке ниже). Для оптимального размещения текста используйте инструмент Свободное преобразование. Текст должен исчезнуть в 103 кадре – вставьте пустой ключевой кадр.

Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru Анимация появления текста (с использованием маски) - student2.ru

8.12. Аналогично добавьте текст (поздравление и приглашение куда-либо, например как на рисунке выше), который должен будет появляться в кадрах: 108–126 слоя Текст-1, 130–151 слоя Текст-2, 155–199 слоя Текст-3, причем текст на слое «Текст-3» должен обрываться "на полуслове" (например, "Жду тебя около" или "Встретимся в "). Тип и размер шрифта подберите самостоятельно. Воспользуйтесь копированием текста

8.13. В 199-й кадре слоя «Батарея», добавьте текст "Аккумулятор разряжен!" и под ним разместите изображение батареи (при необходимости измените его размер и поворот инструментом Свободное преобразование).

Должно получиться примерно как на рисунке выше.

8.14. С помощью "маскирования" создайте эффект постепенного появления текста. Для этого добавьте Cлой-Маску, в который вложите все слои с текстом (все слои с текстом станут заблокированными).

В диапазонах появления текста на слое «Маска» создайте несколько ключевых кадров, в которых инструментом Кисть (выберите размер кисти чтобы она была равной по ширине символам текста) закрашивайте текст так, как если бы вы писали слова.

В кадрах окончания текстовых блоков (126, 151, 199) вставьте пустые ключевые кадры.

Должно получиться примерно как на рисунке ниже.

Анимация появления текста (с использованием маски) - student2.ru

8.15. Создайте эффект мигания. Для этого на слое «Батарея» вставьте ключевые кадры: 206, 213 и 220 и пустые ключевые кадры: 203, 210, 217 и 224.

8.16. В 241-й кадр слоя «Фон» вставьте ключевой кадр и вверху кадра введите текст, предупреждающий о необходимости вовремя заряжать телефон, например как на рисунке ниже. Параметры шрифта подберите самостоятельно. Добавьте фильтр, например "свечение" или "тень".

Анимация появления текста (с использованием маски) - student2.ru

Протестируйте созданную анимацию.

ЗАДАНИЕ К ЗАЧЕТУ

В программе Flash создать презентационный рекламный ролик для произвольного объекта материальной культуры. В ролике должны присутствовать различные виды анимации движения, анимация с использованием маски и звуковое сопровождение. Размер ролика 550x400. Длительность - 40-45 секунд.

Задания сохранить и представить в форматаx программы Flash (*.fla и *.swf).

Наши рекомендации