Внешний вид сайта:

Анимация текста с помощью масок

Есть множество различных способов анимировагь объекты в программе Flash. В этом проекте, используя маски, мы заставим текст постепенно появляться на экране. Это действительно маска, с помощью которой осуществляется анимация. В процессе проигрывания фильма мы будем растягивать маску, чтобы показать больше текста. Кроме того, этот метод облегчает работу при необходимости правки текста, поскольку необходимо внести изменение только в одном месте.

О масках

Не путайте маски для праздника Хэллоуин и маски для графических приложений, таких как Adobe Flash или Adobe Photoshop. Маска служит своего рода окном к объектам, расположенным под ней. То есть объекты, расположенные непосредственно под маской, видны, а те объекты, которые не включены в область маски, — невидимы на экране. В программе Flash элемент маски может быть заполнен формой, объектом, являющимся экземпляром эталона изображения или фильма. Вы можете сразу маскировать несколько слоев для получения сложного эффекта.

Чтобы использовать маску, сначала создайте слой маски. Поместите элемент маски в этот слой. Переместите слой в нужную позицию на шкале времени (Timeline). Слой маски всегда маскирует слой, находящийся непосредственно под ним. Чтобы замаскировать несколько слоев, расположите их под слоем маски. Затем выберите команду Mask (Маска). Слой, расположенный под слоем маски, будет связан со слоем маски, и название замаскированного слоя будет расположено с отступом на шкале времени (Timeline). Вы не увидите эффект маскировки, пока не разблокируете слой маски и слой или слои, которые этот эффект затрагивает.

Создание масок

Мы будем использовать простой прямоугольник для маскировки текста, а затем через какое-то время вытягивать маску, чтобы показать больше текста. Так как у нас несколько экранов с текстом, то мы будем создавать и изменять размеры прямоугольника несколько раз, но понадобиться нам при этом только один слой маски.

Выберите слой Incoming Text Message и щелкните на значке Insert Layer (Вставить слой).

Назовите новый слой Mask (Маска).

Заблокируйте все слои, расположенные под слоем Mask, чтобы случайно не переместить что-нибудь на них.

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

Выберите 88 кадр на слое Mask и нажмите клавишу F7 чтобы вставить пустой ключевой кадр. Этот ключевой кадр должен быть расположен непосредственно над первым ключевым кадром, находящимся на слое Incoming Text Message.

Выберите инструмент Rectangle Tool (Прямоугольник) и снимите выделение со значка Object Drawing (Рисование объектов). Установите параметры прямоугольника: без контура и ярко-красная заливка.

ПРИМЕЧАНИЕ: Вы можете использовать любой цвет для маски, который вам нравится. Он не будет отображаться в конечном фильме. Просто ярко-красный цвет хорошо виден.

Увеличьте масштаб, чтобы хорошо видеть экран телефона.

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


Выберите 91 кадр на слое Mask и нажмите клавишу F6, чтобы вставить ключевой кадр.

Выберите инструмент Free Transform Tool (Произвольная трансформация). Используйте инструмент, чтобы закрыть первую точку в многоточии.

ПРИМЕЧАНИЕ: На сцене одновременно может быть только один элемент маски. В режиме слияния рисунка перекрывающиеся прямоугольники необходимо объединить, чтобы сделать одним объектом, таким образом, обе строки текста станут замаскированными.

Выберите 94 кадр на слое Mask и нажмите клавишу F6, чтобы вставить ключевой кадр.

С помощью инструмента Free Transform Tool (Произвольная трансформация) растяните форму маски, чтобы закрыть вторую точку.

Выберите 97 кадр, нажмите клавишу F6 и растяните форму маски, чтобы закрыть третью точку.

Выберите 103 кадр на слое Mask и нажмите клавишу F7 чтобы вставить пустой ключевой кадр. Эта маска не нужна после этого ключевого кадра, потому что текст исчезает с экрана в этом кадре.

Выберите 108 кадр на слое Mask и нажмите клавишу F7, чтобы вставить пустой ключевой кадр. Этот ключевой кадр должен находиться непосредственно над первым ключевым кадром слоя Hi.

С помощью инструмента Rectangle Tool (Прямоугольник) нарисуйте прямоугольник, закрывающий слово hi.

Используя тот же метод, что и для первого сообщения, постепенно закройте текст маской: в кадре 112 нажмите клавишу F6, чтобы добавить ключевой кадр, а затем закройте весь текст на первой строке; в кадре 116 нажмите клавишу и растяните форму маски вниз, чтобы закрыть слово те.

Выберите 126 кадр на слое Mask и нажмите клавишу F7. чтобы вставить пустой ключевой кадр и закончить с этой маской.

Выберите 130 кадр на слое Mask и нажмите клавишу чтобы вставить пустой ключевой кадр. Этот ключевой кадр должен находиться непосредственно над первым ключевым кадром слоя Just Wanted.

С помощью инструмента Rectangle Tool (Прямоугольник) нарисуйте прямоугольник, закрывающий слово jst.

Постепенно растягивайте маску над текстом на экране: в кадре 136 нажмите клавишу F7 и закройте первую строку. В кадре 141 нажмите клавишу F6. а затем увеличьте прямоугольник, чтобы закрыть 2. (Удостоверьтесь в том, что прямоугольники перекрывают друг друга, чтобы потом стать одним объектом). В кадре 146 нажмите клавишу F6 и растяните прямоугольник, чтобы закрыть остальную часть второй строки.

Выберите 151 кадр на слое Mask и нажмите клавишу F7, чтобы вставить пустой ключевой кадр.

Выберите 155 кадр на слое Mask и нажмите клавишу F7, чтобы вставить пустой ключевой кадр, расположенный непосредственно над первым ключевым кадром слоя I Норе.
Нарисуйте прямоугольник, закрывающий на первой строке слово i.

Так же, как и в других сообщениях, постепенно закройте текст, создавая новые ключевые кадры и регулируя маску. В кадре 161 закройте фразу i hope. В кадре 167 закройте первую строку. В кадре 173 растяните прямоугольник, чтобы закрыть слово hve. В кадре 179 закройте вторую строку. В кадре 186 растяните прямоугольник, чтобы закрыть слово happy.

ПРИМЕЧАНИЕ: Не забудьте создать ключевой кадр для каждого изменения и удостовериться в перекрытии прямоугольников, чтобы они могли стать одним объектом.

Выберите 199 кадр на слое Mask и нажмите клавишу F7 чтобы вставить пустой ключевой кадр.

Создание эффекта мигания

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

Выберите слой Low Batt.

Нажмите клавишу F6 чтобы вставить ключевые кадры в следующих кадрах: 206,213 и 220.

Нажмите клавишу F7, чтобы вставить пустые ключевые кадры в следующих кадрах:203,210, 217 и 224.

Применение маски

Мы нарисовали прямоугольники, чтобы маскировать текст, но маска не вступит в силу, пока мы не применим ее.

Щелкните правой кнопкой мыши (Windows) или, удерживая клавишу Command, щелкните (Mac OS) на слое Mask.

Выберите команду контекстного меню Mask (Маска). Программа Flash вставит отступ перед названием первого слоя, находящимся под слоем Mask. Остальные слои, которые необходимо замаскировать, мы вставим позже.

01:15

Комментарии

Нет комментариев. Ваш будет первым!