Работа с текстом. Анимация каллиграфической надписи во флеше

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

Итак, берем подходящий рукописный шрифт. Если такого нет, то ищем в сети. Для примера, хороший ресурс с множеством бесплатных шрифтов dafont.com. Большой плюс – на сайте шрифты можно сразу протестировать в режиме Preview, что неимоверно облегчает поиск.

Хорошо в такой анимации будут смотреться шрифты со всевозможными завитками: чем больше разных загогулинок, тем красивее будет смотреться результат.

На второй страничке нахожу шрифт, который меня сразу привлекает своим  душевным названием – Shit Happens. Хороший шрифт, забираем его.

Шаг 1. На рабочей области пишем слово, которое будем анимировать. Сохраняем нашу надпись в символ (F8) (лучше не делать такую анимацию сразу на таймлайне, а разместить в символе).

Саму надпись разбиваем, трансформируем в заливку (Ctrl+B).

 

Шаг 2. Заходим в символ text и создаем дополнительный слой для маски.

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

 

Шаг 3. Будем создавать покадровую анимацию, когда прорисовывается кадр за кадром (frame by frame animation).

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

Вот так приблизительно выглядит сам процесс:

И на таймлайне:

Как видим, это несложно, но есть некоторые нюансы, о которых нужно помнить:

1) Перед началом анимации сразу определяем направление и порядок  анимации, что и за чем анимируем.

Мысленно разделяем каждую букву на фрагменты.

 

2) Кончик маски должен быть полукруглым, нужно следить, чтобы он не был плоским. Поэтому стараемся следить за его округлостью.

 

3) Очень аккуратно нужно рисовать маску в местах стыков частей буквы на пересечениях. Если сделать их кое-как, то появятся некрасивые куски по бокам.

 

 

4)Чтобы анимация не выглядела однообразной и однотонной, делаем так: в самом начале и в конце анимацию замедляем за счет прорисовки большего количества промежуточных кадров (рисунок ниже). Таким образом, наша анимация как бы промелькивает от начального до конечного кадра.

Сам процесс создания анимации достаточно простой. Но спешить не стоит: чем аккуратнее отрисуем маску, тем лучше будет результат.

А вот и сам результат:

Таким же образом можно анимировать различные декоративнее элементы – завитки, морозные и цветочные узоры.

Комментарии
Аватар пользователя Эд

А я просто стираю, с конца, само слово . , а потом применяю обратное движение... но сейчас попробую с Маской ..Спасибо!

Аватар пользователя АндрейAnd

Почему, когда я добавляю второй кадр мой текст (символ) на этом кадре исчезает? Вроде всё сделал как описывалось: написал текст, создал из него символ, вошел в символ, создал новый слой и сделал из него маску.

Аватар пользователя LeeTovetz

Расскажите более подробно что вы делаете и какие клавиши нажимаете.?
Маска сверху - слово снизу. От начала до конца анимации слово не изменяется. Поэтому оно растянуто F5 клавишей.
А над ним покадрово рисуется маска.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя Murejib

У способа с маской существует один недостаток - вес. Количество ключевых кадров с уникальными шейпами в итоге получается внушительным.
лично я предпочитаю другой способ, намного более экономичный и быстрый — сначала я тонкой линией отмечаю места разрезов, а затем, выделяя шейпы по ходу аниимации, группирую их (cmd+g), после чего стираю линии разрезов. Дальше остается только раскидать группы по слоям (distribute to layers) и выстроить кадры лесенкой. Так на каждом ключевом кадре будет лежать всего одна группа. В случае же с маской на каждом ключевом кадре лежат шейпы с определенным количеством опорных точек, и с каждым кадром их становится все больше.

Аватар пользователя sovik

Можешь выложить пример такой анимации? На сколько вес меньше?

Аватар пользователя murejib

sovik пишет:
Можешь выложить пример такой анимации? На сколько вес меньше?

Вес отличается почти в два раза.
Классическая покадровка (9кб):
http://murejib.com/feedback/keyframe.swf

Покадровка с группировкой )) 5 кб:
http://murejib.com/feedback/keyframe_g.swf

Аватар пользователя Oksana

спасибо, возьму на заметку. не делала так ранее

Аватар пользователя Andrey

Оксана, спасибо получилось клёво.

Аватар пользователя hugin

Оксана, а как эту превратить в мувик?
Заранее пасибки.

Аватар пользователя Oksana

хм, анимация делается в мувиклипе (в самом начале надпись сохраняется в символ), если я правильно поняла вопрос про мувик.

Аватар пользователя hugin

спасибки, оч оч все нравится.

Аватар пользователя LeeTovetz

Пасибо. Тоже часто пользуюсь таким эффектом письма.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя flahhi

А, вьехал))) Я просто искал здесь глубокий сакраментальный смысл Smile Спасибо!

Аватар пользователя flahhi

Спасибо! Одного не понял:
// Кончик маски должен быть полукруглым
Это с чем связано?

Аватар пользователя Oksana

flahhi пишет:

Спасибо! Одного не понял: // Кончик маски должен быть полукруглым Это с чем связано?

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

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки