Блестящая анимация текста




Главная > Уроки > Анимация > Блестящая анимация текста

Блестящая анимация текста

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2012-11-03

Вот первая часть уроков серии уроков блестящий текст, часть 1, часть 2, часть 3

 

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

 

Анимация может быть сделана только для Flash Player 8 и выше, и может быть создана в Flash 8 и выше. Сдесь не применяеться ActionScript при создании этой анимации, так что он легко может быть реализован как в AS2 и AS3 проектах. Анимация очень удобна при создании логотипа, баннера, или еще чего нибудь. Удачи вам!.

 

Просмотр финального результата

Давайте посмотрим на окончательный результат етого урока:

 

Шаг 1: Создайте новый документ Flash

Переходим File> New> Создаем новый Flash ActionScript 2 или 3 документ.

В окне Свойства, заайте размер сцены 590 на 300.

Частоту кадров в секунду на 30.

 

Шаг 2: Gradient формы

Используя инструмент Прямоугольник (R), создайте квадрат, с заливкой чрно-белым градиентом.

Размер площади не имеет значения.

Назовите слой "gradient".

 

Шаг 3: Изменение размера и выравнивание

Нажмите на квадрат и выравняйте его.

Теперьизмените Match width and height квадрата на сцене.

У вас должно выйти:

Далее выровнять по левому краю сцены.

А теперь вот так:

Затем выровняйте верхний край квадрата на сцене.

Вот результат:

 

Шаг 4: Изменяем размер и цвет

Выберите Gradient Transform Tool (F).

Нажмите на свой градиент на сцене.

Использование етот интрумент, измените размер и форму градиента так, чтобы она более равномерно распределен по сцене. Вот так:

Изменяем Цвет (Alt + Shift + F9).

\

Изменените белый цвет на градиент #333333 серого, и сдвиньте цвета вправо так, что бы был серый круг, в середине градиента.

Вот результат, что вы должны увидеть:

 

Шаг 5: добавить горизонтальные линии

Создайте новый слой над слоем с градиентом, и назовите его "lines".

Используя инструмент Прямоугольник (R), нарисуйте прямоугольник на сцене, и 9% непрозрачости заполниным белым цветом.

\

С помощью панели свойств, изменить размер формы, чтобы было 590 на 5.

Используйте Align ыфравнивание, что бы выровнять форму по горизонтали к центру сцены.

Далее, используя Alig Top edge, выровняйте форму, по верхнему краю сцены.

 

Выделите то что получилось, скопировать его и вставить его туда же (Ctrl + Shift + V).

Переместить эту новую форму на десять пикселов ниже первой формы, и дублировать его еще раз, используя тот же метод. Теперь у вас должно было выйти так:

Сделайте такиеже копии что бы хаполнить всю сцену. Результат:

 

Шаг 6: анимации логотипа Movieclip

Создайте новый слой под названием "logotip".

Нарисуйте прямоугольник (R) белым цветом, но без заливки.

В Properties, измените размер до 590 на 300 пикселей.

Использование Align окно (Ctrl + K), что бы выровнять форму, сделайте так чтобы левый и верхний крый выглядиле так:

Выдилете белый прямоугольник, и конвертируйте его в символ Изменить> Преобразовать в символ.

Назовите мувиклип "masterClip", и убедитесь, что точка регистрации находится в верхнем левом углу.Затем нажмите кнопку "OK".

 

Шаг 7: Руководство по созданию прямоугольника

Дважды щелкните на masterClip, чтобы его изменить

Дважды щелкните по имени слоя и изменить его на "размер сцены".

Щелкните правой кнопкой мыши на слое и выберите пункт "Guide".

Заблокируйье слой, нажав на втором белый круг.

Теперь у вас почти все готово.

 

Шаг 8: добавляем текст

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

Я выбрал SF Sports Night для этой анимации .

 

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

Для достижения такой строки в тексте, вручную введите девять пробелов во второй строке, чтобы получить текст как на экране.

 

Шаг 9: повернуть текст

Выделите текст и используя окно Transform (Ctrl + T) поверните текст до -6,5.

 

Шаг 10: Устанавливаем расстояние

Выделите текст, переместите его вниз так, чтобы он находился в центре кадра.

 

 

Шаг 11: Преобразование текста в Movieclip

Выделите текст на сцене, и конвертируйте его в символ Изменить> Преобразовать в символ (или F8).

 

Имя клипа задайте "sourceText" и убедитесь, что он Movie Clip, а не графический клип. Затем нажмите кнопку "OK".

 

Шаг 12: Создание еще четырех слоев

Выделите текст, клипа и скопируйте его, используя клавиши CTRL + C.

Создайте четыре новых слоя с помощью "Новый слой" Кнопка вверху панели.

 

 

Поставьте текстовый клип, который вы скопировали в каждом слое, используя Edit> Paste на месте.

Теперь у вас есть пять одинаковых слоев.

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

Блокируйте и скройте все ваши слои с помощью замка и видимых переключается в сроки.

Посли чего, мы сможем выделить и редактировать каждый слой отдельно.

 

Шаг 13: Редактировние "glows"

Сделайте видимым слой "glows" слой видимым, и разблокировать его. Нажмите на этот слой, чтобы его редактировать.

Выделите текст клипа на сцене, и убедиться, что фильтры работают в панели свойств.

Добавить свечение в тексте клипа, используя кнопку Добавить фильтр. Выберите "Glow" фильтр.

Применить эти параметры для свечения, которое было только что создано.

Теперь у вас есть такой эффект:

Теперь, используя тот же метод, примените второй фильтр свечения на тот же клип.

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

Теперь у вас есть такой эффект:

Теперь примените Drop Shadow к этому же клипу.

Применить эти настройки для теней, который были только что созданы.

Теперь у вас есть такой эффект:

 

 

Шаг 14: Редактировать слоя "Mask3"

С слоем "glows" видны и отдельные, добавить новый слой. Назовите его "green".

Сейчас уберите замок и спрятайте "glows" слой. Сделать "mask3" слой видимым, и разблокировать его.

Сделать "mask3" слоtv маски щелкнув правой кнопкой мыши на слое и выбрав «маски».

 

green слой теперь будет временно заблокирован. Разблокировать его, нажав на значок замка слоя.

 

Используйте Rectangle Tool (R), чтобы нарисовать фигуру на «green» слой.

Примените стандартный черный-белый линейный градиент.

Нарисуйте форму, еще больше чем размер сцены.

Выберите инструмент Gradient Transform (F) и нажмите на градиент на сцене.

Используя Gradient Transform ручки, поверните градиент 90 градусов, а также изменить диапазон градиента, так что бы он охватывал только область текста на сцене.

Измените цвет градиента, используя цвет окна. (Alt + Shift + F9).

 

Зеленый справа #8CD566 .

Зеленый слева #43851F .

Сейчас заблокировать "green" слой, и убедитесь, что "mask3" слой также заблокирован. Также включите видимость "glows" слоя обратно. .

В результате в настоящем времени у вас должно быть это:

 

Шаг 15: Редактировать слоя "Inner Glow"

Сделайте "Inner Glow" слой видимым, и разблокируйте его.

Измениет клип на "внутреннее свечение" слой, и добавить свечение к нему под фильтры в окне proerties.

Применить эти параметры для нового свечения:

 

Совет: Обратите внимание, что это свечение внутреннее свечение, которое означает, что он светится изнутри, а не снаружи.

Ваш результат в настоящее время такой:

В клипе еще выбран, измените режим смешивания на Overlay под дисплеем в панели свойств:

С новыми режим смешивания на месте, ваш результат сейчас это:

 

Шаг 16: Увеличение Timeline кадров

Это masterClip в настоящее время только один кадр долгий. Нам нужно добавить больше кадров, так что мы могли анимировать блеск эффектов.

В строке, нажмите и перетащите, чтобы выделить все слои на рамер 88 кадров.

 

Перейти к части 2

Просмотров: 7862


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


    Лучшие статьи этой категории:

  • Блестящая анимация текста

  • Анимация ходьбы человека

  • Flash фейерверк

  • Анимированый переворот страниц

  • Как создать анимацию полета птицы в Flash

    • Добавить Ваш коментарий:

      Введити сумму чисел с картинки:

      Коментарии:

      Коментарий добавил(а): PycckuuJuice
      Дата: 2014-07-15

      Отличный урок! Есть ещё вариант, как сделать "Шаг 5: добавить горизонтальные линии". Создаём одну горизонтальную полосу - F8 - превращаем в символ, далее Motion Tween, где эта полоса пересекает полностью экран. Затем преобразуем Motion Tween в кадры (convert to keyframes. Затем жмём Edit multiple frames ("редактировать несколько кадров") под таймлайном и выделяем все кадры получившейся анимации. Это и будут искомые полосы на равном расстоянии друг от друга. После этого выделяем все полосы и вырезаем их в отдельный кадр. Расстояние между ними регулируется длиной самой анимации.


      Коментарий добавил(а): bos4r
      Дата: 2012-11-05

      Бля, используй Word... столько ошибок... читать невозможно. И это никоим образом образом не тянет на авторские знаки и пунктуацию.


 1